google-chrome - 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 处理这些事情的方式，还是我遗漏了什么？有什么办法可以使它变得平滑一点(显然不使用图像)？

这是 fiddle :http://jsfiddle.net/wARGc/

---

更新: I filed a bug report for this .

Answer 1

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

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