如何将此 CSS 转换为 webkit答案

【问题标题】：How to translate this CSS to webkit如何将此 CSS 转换为 webkit
【发布时间】：2013-09-25 14:09:22
【问题描述】：

我有以下 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/

【问题讨论】：

标签： html css google-chrome jquery-mobile safari

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

【讨论】：

它不工作。 jsfiddle.net/df9z9/3，你看，当你在 safari 中打开它时……它显示不同
小心角度！来自 Mozilla 开发者：按照最初的 Apple 提议，语法的前缀变体都使用定义为类似极角的，即 0deg 代表东方。为了与 CSS 的其余部分保持一致，规范定义了一个 0 度角代表北方。

【解决方案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 */

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

【讨论】：