Question

在主题中我只提到了Firefox，因为现在它是我测试我的代码的唯一浏览器，但如果有人能给我一个通用的解决方案会很好:)。

background-image: -moz-linear-gradient(center top, rgb(30, 30, 30), rgb(4, 4, 4));

使用上面的代码，我看到......步骤？ :)我的意思是 - 它不是很光滑，但非常矩形，就像那样：浅灰色，浅灰色，浅黑色，黑色而不是颜色平滑地相互褪色。有办法防止这种情况吗？

Answer 1

你的色觉比我好，我的朋友。对我来说，看到一个渐变是太黑了。无论如何，这是支持所有现代浏览器的风格，就像今天一样：

小提琴：http://jsfiddle.net/zbeY3/1/

<强> CSS

background:-moz-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4));
background:-o-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* Opera */
background:-webkit-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* Safari 5.1+, Chrome 10+ */  
background:-ms-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* IE10 PP */
background:linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* W3C */

Answer 2

我通常将此公式用于FF：

background: -moz-linear-gradient(top, topvalue 0%, bottomvalue 99%); /* firefox */

所以，在您的情况下：

background: -moz-linear-gradient(top, rgb(30, 30, 30) 0%, rgb(4, 4, 4) 99%);

此外，如果您感兴趣，这是我用来涵盖各种浏览器的组。这是一个垂直渐变，从＃999到＃000。

/* CSS Gradients */

background: -moz-linear-gradient(top, #999999 0%, #000000 99%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(99%,#000000)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#000000',GradientType=0 ); /* ie */

希望它有所帮助！

Answer 3

我弄清楚为什么我的渐变不平滑（至少我认为是这样:)） - 这是因为起始颜色和结束颜色之间的差异太小。在一个很大的表面上它是非常明显的，但如果我创建一个100x100px div，它没关系......

在Fx下看起来很糟糕的CSS3渐变

3 个答案: