Chrome 径向 css 渐变平滑度答案

【问题标题】：Chrome radial css gradient smoothnessChrome 径向 css 渐变平滑度
【发布时间】：2012-04-26 19:13:52
【问题描述】：

我正在使用chrome 18.0.1025.162 并尝试做径向渐变

-webkit-radial-gradient(circle, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.9))

问题在于渐变是非常像素化的，颜色和 alpha 的过渡是块状的并且不平滑。这在 Safari 和 Firefox 中是不同的。 Safari 和 Firefox 做得非常顺利和出色

这是 chrome 的错误吗？任何人都有同样的问题。它是如此简单的渐变！这么简单的事情肯定不会是小故障

查看：http://jsfiddle.net/GyRLe/1/ 了解我的意思的演示。

有解决办法吗？图片会很糟糕:(

（好吧，看看平滑度有多差）：这是我使用它时得到的： http://i.imgur.com/UYB1d.png (Chrome)
http://i.imgur.com/tzGuq.png (Safari)（看起来有点前卫，但那是因为 png，否则它接近完美的平滑度）

Firefox 和 Safari 一样好，只是 chrome 做得不好我需要 alpha，因为我在背景中放置了一个重复样式的图像

编辑：Chrome 20 (Canary) 也有这个可怕的问题！

Edit2：我们使用 CSS 的原因是我们不必使用图像！所以我已将此添加到 http://code.google.com/p/chromium/issues/detail?id=123491 并希望谷歌能直截了当地采取行动，因为我认为 chrome 很棒

【问题讨论】：

【解决方案1】：

如果您不需要 alpha 值，使用 rgb 而不是 rgba 看起来会更平滑。

【讨论】：

【解决方案2】：

在这种情况下没有多大帮助，但我注意到添加

width: x-value;
height: y-value;

有时可以提供帮助。 X 值和 Y 值当然是您的尺寸。

【讨论】：

【解决方案3】：

我知道它已经在很久以前发布了，但是我在 Chrome 24 中遇到了同样的问题（强条带）：

-webkit-radial-gradient(center, ellipse cover,  #XXXXXX 0%,#YYYYYY 100%);

但我意识到使用下面的条带代码几乎消失了：

-webkit-gradient(radial, center, 0px, center, 100%, color-stop(0%,#XXXXXX), color-stop(100%,#YYYYYY));

希望这会有所帮助。

编辑：我已经看到 -webkit-gradient(radial, ...) 只是径向渐变显示的旧语法，因此它不应该是该问题的长期答案...

【讨论】：