Firefox的線性漸變問題

Question

我有一個梯度格，那就是：

<div class="gradient"></div> 

這裏是CSS：

.gradient { 
    width: 20px; 
    height: 20px; 
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, #fff 100%) 
} 

很簡單。 在Chrome中它工作正常，但在Firefox（34.0，Ubuntu的14.04），它的工作不正確：

我試圖使用rgba(0,0,0,0)代替transparent，試圖-moz-linear-gradient前綴 - 沒有結果。

dabblet link

謝謝！

Answer 1

如果您想要避免中間的灰色，您可以使用從透明白色(255, 255, 255, 0)到不透明白色(255, 255, 255, 1),#fff的漸變。

.gradient { 
    width: 20px; 
    height: 20px; 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%) 
} 

http://dabblet.com/gist/64dd43f37e8978d08749

在代碼中的梯度從透明的黑色變爲白色不透明並且由於在中間的灰色部分在FF顯示出來。

我想鉻和其他瀏覽器計算不同梯度的顏色步驟。