Windows 7 上 Chrome 中径向渐变的像素化渲染答案

【问题标题】：Pixelated rendering of radial gradient in Chrome on Windows 7Windows 7 上 Chrome 中径向渐变的像素化渲染
【发布时间】：2012-11-20 05:30:39
【问题描述】：

作为参考，请参阅此问题：Chrome radial css gradient smoothness。

OP 在渐变的平滑度方面遇到问题，但从讨论看来，这似乎只是在使用 alpha 透明度时。

这是我正在使用的渐变：

div {
    background: radial-gradient(
        #000 30%,
        transparent 30%, transparent 40%,
        #000 40%, #000 60%,
        transparent 60%
    );
}

如您所见，它使用硬停止（所以没有颜色过渡）并且没有rgba（所以也没有alpha）。尽管如此，在 Chrome 中（在 Windows 7 上进行了 23 次测试），它仍呈现出极度像素化：

这只是 Chrome 处理这些事情的方式，还是我遗漏了什么？有什么办法可以使它变得平滑一点（显然，没有使用图像）？

这是小提琴：http://jsfiddle.net/wARGc/

更新：I filed a bug report for this.

【问题讨论】：

很奇怪，只是把它弄乱了，我让它看起来很流畅，但实际上改变了它的样子——所以我不打算发帖
@ScottSelby - 我认为你应该发帖。看到你所做的不同可能只是给我们一个线索，了解可能导致这种情况的原因。
同样适用于圆形 - div，边框半径为宽度/高度的 50%，应用透明蒙版。
三年32个版本，这还是个问题……

标签： google-chrome css radial-gradients

【解决方案1】：

这是Chrome的渲染问题，您可以通过稍微调整形状来自己创建平滑。查看我对您的小提琴的更新

http://jsfiddle.net/jamestoone/XU7jB/

div {
    width: 100px;
    height: 100px;
    background: radial-gradient(#000 30%, transparent 30%, transparent 40%, #000 40%, #000 60%, transparent 60%);
}

div.new {
    background: radial-gradient(#000000 30%, transparent 32%, transparent 38%, #000000 40%, #000000 60%, transparent 62%) repeat scroll 0 0 transparent;
    height: 100px;
    width: 100px;
}

【讨论】：

我接受了这个答案，因为它在一定程度上解决了我的问题，但这仍然很奇怪。 I filed a bug for it。让我们看看会发生什么。