Firefox 线性渐变问题答案

【问题标题】：Firefox linear-gradient issueFirefox 线性渐变问题
【发布时间】：2015-01-13 08:17:47
【问题描述】：

我有一个渐变 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 前缀 - 没有结果。

谢谢！

【问题讨论】：

【解决方案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%)
}

在您的代码中，渐变从透明黑色变为不透明白色，因此中间的灰色部分显示在 FF 中。

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

【讨论】：