如何使 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;

编辑：

将 background-size 更改为 40px 可使渐变平滑，但我希望它在所有尺寸下都平滑。

如果我需要提供额外的代码，请告诉我。谢谢

Answer 1

在渐变所在的元素上试试这个。

transform: translateZ(0);

平滑渐变。见下文。

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);
}

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

Answer 2

它是由 chrome 中的一个错误产生的，它将那种背景视为 3D 元素。您可以避免编写边框（它转换为平面元素），或者使用此属性.

 transform-style: preserve-3d;

或

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

边界解决方案

  border: 1px solid #fff;

查看有关此错误的更多信息：

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

Answer 3

尝试添加 backface-visibility: hidden

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

Answer 4

原因：

正如我在评论中描述的那样，当一种颜色的终点是另一种颜色的起点（即硬停止渐变）时，颜色的变化是突然的，并且角度突然变化甚至在其他浏览器中也以产生粗糙的边缘而闻名（现在可能已经修复）。在一种颜色的结束点和下一种颜色的开始点之间设置间隙会产生更平滑的颜色变化，从而最大限度地减少粗糙边缘。

这不需要太多实验（或反复试验），1% 或 2% 的差距几乎总是足够的。

解决方法：

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

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;
}

如何使 Chrome 中的渐变平滑？

How to make gradients in Chrome smooth?

html

css

google-chrome

linear-gradients