Firefox线性渐变问题

Question

我有一个渐变div，这里是：

<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中。

我猜chrome和其他浏览器会以不同的方式计算渐变中的颜色步长。