如何使 Chrome 中的渐变平滑？答案

【问题标题】：How to make gradients in Chrome smooth?如何使 Chrome 中的渐变平滑？
【发布时间】：2016-03-09 17:03:12
【问题描述】：

这就是它在 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 可使渐变平滑，但我希望它在所有尺寸下都平滑。

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

【问题讨论】：

也许向我们提供您的 HTML 以及您如何将三角形覆盖在渐变上，以便我们了解其结构？
我认为 HTML 在这里并不重要，因为只需在 body 上设置属性就会产生输出。 @SanJeetSingh：顺便问一下，您使用的background-size 是什么？我在 Chrome 中使用 40px 40px 进行了尝试，它产生与 Firefox 相同的输出。
@Harry 是的，渐变平滑，40px。不过我使用的是 60 像素。理想情况下，我希望渐变在所有维度上都是平滑的。
@SanJeetSingh：this 能解决您的问题吗？这只是一种解决方法，但在我的 Chrome 版本中它可以工作。让我知道它是否有帮助，我会将其发布为答案。
@Harry 是的，它奏效了。你是怎么猜到的？我需要继续试验百分比值还是适用于所有尺寸？为什么会奏效？

标签： html css google-chrome linear-gradients

【解决方案1】：

原因：

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

这不需要太多的实验（或反复试验），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;
}

【讨论】：

好@Harry！产生这种东西的原因有很多。另一个大脑笔记。谢谢！
是的@MarcosPérezGude。我记得早些时候也遇到过backface-visibility 选项，但由于某种原因，这对这个选项不起作用。所以是的，一个问题和不同的可能解决方法仅适用于某些情况:(

【解决方案2】：

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

 transform-style: preserve-3d;

或

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

边框解决方案

  border: 1px solid #fff;

【讨论】：

你确定吗？你可以发jsfiddle.net 或 stacksn-p 来显示问题吗？
请稍等，我正在创建小提琴:)。
我等了整整 5 分钟，因为是时候离开西班牙的办公室了 :)，但我会保持同步。

【解决方案3】：

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

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>

【讨论】：

【解决方案4】：

尝试添加backface-visibility: hidden

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

【讨论】：