鉻徑向CSS漸變平滑

進出口使用chrome 18.0.1025.162，我試圖做一個徑向漸變鉻徑向CSS漸變平滑

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

的問題是，梯度是非常像素化的那種，在色彩過渡和alpha在塊和不光滑。這在Safari和Firefox中是不同的。 Safari & Firefox做得非常順利，很好

這是一個Chrome的bug嗎？任何人都有與此相同的問題。其如此簡單的漸變！當然，像這樣簡單的事情不能成爲一個小故障

退房：http://jsfiddle.net/GyRLe/1/演示我的意思。

有沒有解決方案呢？使用它時，即時通訊這就是我得到： http://i.imgur.com/UYB1d.png器（Chrome）
http://i.imgur.com/tzGuq.png（Safari瀏覽器）（似乎有點心急火燎的圖像將是可怕:(

（OK所以看平整度是多麼糟糕）但由於PNG，否則其接近完美的光滑度）

Firefox是一樣的Safari良好的多數民衆贊成它只是Chrome是做不好我需要阿爾法，因爲林把一個重複式的圖像中的背景

編輯：Chrome 20（金絲雀）也有這個可怕的問題！

Edit2：我們使用CSS的原因是我們不必使用圖像！所以，我已將此添加http://code.google.com/p/chromium/issues/detail?id=123491 &谷歌希望得到他們的行爲直，因爲我覺得鉻是美好

2012-04-14 Akshat

不！沒有解決方案。你將不得不使用一個圖像。 – Ryan 2012-04-14 21:31:50

它對我來說很流暢：http：//i.stack.imgur.com/sal39.png（Chrome 18.0.1025.142（Ubuntu 11.10））。 – 2012-04-14 21:43:36

與Safari的比較（我的例子不是很好，但與我的配置之一（以圖像作爲背景）它變得可怕） – Akshat 2012-04-14 21:44:36

我知道它已經發布很長一段時間以前，但我遇到了同樣的問題（強條帶）使用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的梯度（徑向，...）就是舊語法徑向漸變顯示，所以它不應該是這個問題長期答案...

2013-02-10 16:09:51

Welp。這個答案不再適合。 :( – Awol 2016-08-25 11:21:51

如果你不需要alpha值，它看起來順暢了很多使用的rgb代替rgba。

2012-04-14 21:43:45 stewe

添加透明度後絕對沒有變化。嘗試減小顏色範圍 - 例如白色到灰色的漸變，你會看到樂隊 – Awol 2016-08-25 11:21:20

它沒有太大的幫助在這種情況下，但我注意到，加入

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

有時可以提供幫助。當然，X值和Y值是你的尺寸。

2012-04-14 22:03:49 Connor

你在哪裏添加它？我已經使用了高度和寬度（就像在jsfiddle中 - 我只是把它扔在div而不是css中） – Akshat 2012-04-14 22:10:13

是的，就像你一樣。但是，當向html或body添加漸變時，例如，我注意到設置寬度/高度有助於平滑漸變。 – Connor 2012-04-14 22:13:43

回答