铬径向css梯度光滑度

本文介绍了铬径向css梯度光滑度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用 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和Safari Firefox非常流畅和良好

这是chrome的错误吗？任何人都有同样的问题。它这样一个简单的渐变！当然这么简单的东西不能是一个小故障

签出： http ：//jsfiddle/GyRLe/1/ 演示我的意思。

有没有解决方案？一个图像将是可怕的：（

（好吧，看看平滑度有多糟糕）：这是我使用它时得到的： i.imgur/UYB1d.png （Chrome） i.imgur/tzGuq.png （Safari）（看起来有点先进，但是因为png ，否则它接近完美的平滑度）

火狐浏览器就像Safari一样好只是chrome是糟糕的我需要alpha，因为我把重复风格

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

Edit2：我们使用CSS的原因是我们不必使用图片！因此，我将此添加到 http： //code.google/p/chromium/issues/detail?id=123491 ，希望Google能够直截了当，因为我认为Chrome是美妙的

解决方案

我知道它已经发布了很久很久以前，但我遇到了与Chrome 24使用相同的问题（强烈的条带）：

-webkit-radial-gradient（center，ellipse cover，#XXXXXX 0％，＃YYYYYY 100％）;

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

-webkit-gradient（径向，中心，0像素，中心，100％，色彩停止（0％，＃XXXXXX） #YYYYYY））;

希望这有助。

Edit：我已经看到-webkit-gradient（radial，...）只是径向渐变显示的旧语法，所以它不应该是这个问题的长期答案... p>

Im using chrome 18.0.1025.162 and am trying to do a radial gradient

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

The problem is that the gradient is very pixelated sort of, the transition in color and alpha is in blocks and not smooth. This is different in Safari and Firefox. Safari & Firefox do it very smoothly and well

Is this a bug with chrome? Anyone have the same problem with this. Its such a simple gradient!! Surely something as simple as this can't be a glitch

Check out : jsfiddle/GyRLe/1/ for a demo of what I mean.

Is there a solution for this? An image would be awful :(

(Ok so to see how bad the smoothness is): This is what I get when im using it: i.imgur/UYB1d.png (Chrome) i.imgur/tzGuq.png (Safari) (Seems a bit edgy but thats because of the png, otherwise its close to perfect smoothness)

Firefox is just as good as Safari its just chrome is doing it badly I need alpha because Im putting an repeat style image in the background

Edit: Chrome 20 (Canary) also had this horrid issue!

Edit2: The reason we use CSS is so we dont have to use images! So I've added this to code.google/p/chromium/issues/detail?id=123491 & hopefully google gets their act straight because I think chrome is wonderful

解决方案

I know that it have been posted quite a long time ago, but I encountered the same issue (strong banding) with Chrome 24 using :

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

But I realized that using the code below the banding almost disappeared :

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

Hope this helps.

Edit: I've seen that -webkit-gradient(radial, ...) is just the old syntax for radial gradient display, so it should not be a long term answer for that issue...