在Windows 7

Question

在Chrome徑向梯度作爲參考的像素化渲染，看到這樣的問題：Chrome radial css gradient smoothness。

的OP是具有漸變的平滑麻煩，但是從討論看來，使用Alpha透明度時，只有。

---

下面是我使用的梯度：

div { 
    background: radial-gradient(
     #000 30%, 
     transparent 30%, transparent 40%, 
     #000 40%, #000 60%, 
     transparent 60% 
    ); 
} 

正如你所看到的，它使用硬停止（沒有顏色過渡），並沒有rgba（所以沒有阿爾法要麼）。儘管如此，在Chrome（23測試在Windows 7），它呈現的非常像素化：

這只是鍍鉻處理這些事情的方式，還是我失去了一些東西？有沒有什麼可以使之平滑一些（顯然，很少使用圖像）？

這裏的小提琴：http://jsfiddle.net/wARGc/

---

更新：I filed a bug report for this。

Answer 1

它是由鉻渲染問題，您可以創建略微調整形狀平滑自己。看到我更新到你的提琴

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; 

}