棋盘格 CSS 模式错误（对角线不美观）答案

【问题标题】：Checkerboard CSS pattern bug (diagonal unaesthetic line)棋盘格 CSS 模式错误（对角线不美观）
【发布时间】：2017-11-14 11:50:44
【问题描述】：

我使用以下 css 代码创建了一个棋盘模式：

.testcheckerboard{
  width: 200px;
  height: 100px;

  background-color: white;
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}

结果是我想要的棋盘格图案，但也显示了一条不美观的对角白线！

奇怪的是，在某些情况下，问题消失了。

有没有办法去掉这条线？我认为这只是一个抗锯齿错误，但我找不到控制或删除抗锯齿的方法......

我在 Internet 上找不到任何解决方案。

【问题讨论】：

这里工作正常...jsfiddle.net/a0sh0dwc你确定是css问题吗？（在 Chrome 62 上测试）。
在 Chrome 上问题消失了，在某些情况下，所以我认为代码不准确。也许是一个抗锯齿错误。
我也使用 chrome 和小提琴工作正常。我也认为你的 css 没有问题
相关：stackoverflow.com/q/55455177/8620333

标签： css background-image linear-gradients

【解决方案1】：

我找到了一种解决方法，即在 css 中使用 inline-svg。

适用于所有 Windows 浏览器和 Android 浏览器，但我不确定这适用于 OSX (MAC)。

.testcheckerboard{
  width: 200px;
  height: 100px;
  background-size: 40px 40px;

  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(0,0,0)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E");
}

&lt;div class="testcheckerboard"&gt;&lt;/div&gt;

【讨论】：