渐变不适用于Firefox–；我需要特定颜色的订单吗？

如果你看一下，你会发现

#b

和

#a

都不能在Firefox（13.0.1）上运行。为什么呢？它在Chrome上工作（语法不同，但颜色相同）

我需要有一些特定的颜色梯度工作？

#a

和

#c

都使用了两种颜色，但

#a

不起作用

HTML:

试试看，它会自动为你做css渐变编码

多浏览器渐变的示例格式

背景：#1e5799；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#1e5799 0%，#2989d8 50%，#207cca 51%，#7db9e8 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#1e5799）、颜色停止（50%，#2989d8）、颜色停止（51%，#207cca）、颜色停止（100%，#7db9e8））；/*铬，Safari4+*/
背景：-webkit线性梯度（顶部，#1e5799 0%，#2989d8 50%，#207cca 51%，#7db9e8 100%）；/*铬10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#1e5799 0%，#2989d8 50%，#207cca 51%，#7db9e8 100%）；/*歌剧院11.10+*/
背景：-ms线性梯度（顶部，#1e5799 0%，#2989d8 50%，#207cca 51%，#7db9e8 100%）；/*IE10+*/
背景：线性梯度（至底部，#1e5799 0%，#2989d8 50%，#207cca 51%，#7db9e8 100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#1e5799'，endColorstr='#7db9e8'，GradientType=0）；/*IE6-9*/

问题在于您的百分比没有按递增顺序排列。见：

必须按顺序指定颜色停止

---

我的建议。通过Photoshop实现最佳跨浏览器解决方案。

<div id='c'></div>
<div id='b'></div>
<div id='a'></div>

#c {
    background-image: -moz-linear-gradient(center bottom , #131315 37%, #272727 75%);
}

#b {
    background-image: -moz-linear-gradient(center bottom , #242424 80%, #1E1E1E 58%, #191919 20%);
}

#a {
    background-image: -moz-linear-gradient(center bottom , #242424 80%, #191919 20%);
}