如何使Chrome中的渐变顺畅？

Question

这就是它在Chrome中的外观：

这是Firefox的截图：

从屏幕截图中可以清楚地看到，Chrome中的渐变边界是锯齿状的。我怎样才能让它们流畅？

这是我的渐变，重要的是：

background-image: linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, red),
                  linear-gradient(-45deg, red 25%, transparent 25%, transparent 75%, red 75%, red);
background-size: 60px 60px;
background-position:0 0, 30px 30px;

修改

将背景尺寸更改为40px会使渐变变得平滑，但我希望它在各种尺寸下都能保持平滑。

如果我需要提供其他代码，请告诉我。感谢。

Answer 1

它是由chrome中的一个bug生成的，它将这种背景视为3D元素。你可以避免写边框（它转换成扁平元素），或者使用这个属性。

 transform-style: preserve-3d;

OR

 -webkit-backface-visibility: hidden; /* Webkit specifically! */

边境解决方案

  border: 1px solid #fff;

详细了解此错误：

http://adrianroselli.com/2014/10/linear-gradient-problems-in-chrome.html

Answer 2

<强>原因：

正如我在评论中所描述的，当一种颜色的终点是另一种颜色的终点（即硬停止梯度）时，颜色的变化是突然的，并且已知某个角度的这种突然变化即使在其他浏览器中也可以产生粗糙的边缘（现在可能已经修复）。在一种颜色的终点和下一种颜色的开始之间留出间隙可以产生更平滑的颜色变化，从而最大限度地减少粗糙边缘。

这不需要太多实验（或试验和错误），1或2％的差距几乎总是足够的。

解决方法：

改变颜色停止点以产生更平滑的颜色变化，而不是给它一个硬停止似乎有帮助。

＆＃13;

＆＃13;

body {
  background-image: linear-gradient(45deg, red 24%, transparent 26%, transparent 74%, red 76%, red), linear-gradient(-45deg, red 24%, transparent 26%, transparent 74%, red 76%, red);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

对渐变所在的元素进行尝试。

transform: translateZ(0);

使渐变变得平滑。见下文。

＆＃13;

＆＃13;

td.normal {
  width: 50px;
  height: 50px;
  background-image: linear-gradient(to top right, red 25%, transparent 25%, transparent 75%, red 75%, red),
  linear-gradient(to top right, red 25%, transparent 25%, transparent 75%, red 75%, red);
}

td.smooth {
  transform: translateZ(0);
}

＆＃13;

<table>
<tr>
  <td class="normal"></td>  
  <td class="normal"></td>
  <td class="normal smooth"></td>
  <td class="normal smooth"></td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

尝试添加backface-visibility: hidden

当我们要求浏览器倾斜图像时，有时会发生这种情况。