Firefox linear-gradient 问题

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 和其他浏览器以不同方式计算渐变中的颜色步骤。