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

Question

供参考，请参阅此问题： 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。

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

}