Question

我有以下CSS：

 background: linear-gradient(0deg,  transparent 0px, transparent 1px, #f0f0f0 1px, #f0f0f0 100%);

现在我想让它适用于：Safari 4和Safari 5.1 +

制作-webkit-linear-graient和-webkit-gradient的语法是什么。

这里是：在Safari中打开时，与Chrome或Firefox中显示的相同

http://jsfiddle.net/df9z9/

Answer 1

使用此：

background: -webkit-linear-gradient(0deg,  transparent 0px, transparent 1px, #f0f0f0 1px, #f0f0f0 100%);
background: linear-gradient(0deg,  transparent 0px, transparent 1px, #f0f0f0 1px, #f0f0f0 100%);

Answer 2

使用此渐变生成器，它将有助于跨浏览器支持：

http://www.colorzilla.com/gradient-editor/

您甚至可以从之前的CSS导入我导入的渐变，这就是它给出的

background: -moz-linear-gradient(top, rgba(240,240,240,1) 1px); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1px,rgba(240,240,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,240,240,1) 1px); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,240,240,1) 1px); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240,240,240,1) 1px); /* IE10+ */
background: linear-gradient(to bottom, rgba(240,240,240,1) 1px); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */

该代码可能不是您所寻找的，但您可以尝试使用渐变生成器并放置自己的停靠点和所有内容。

如何将此CSS转换为webkit

2 个答案: