Question

风格需要向后兼容。

尝试用谷歌搜索-webkit-gradient语法并自己弄清楚，但无法找到该文档......

那么，这个CSS的等价-webkit-gradient是什么：

background: -webkit-linear-gradient(left, #E0E0E0 0%, #E0E0E0 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 100%),
            -webkit-linear-gradient(top, #F9FCF6 0%, #BBE6BF 100%); /* Chrome10+,Safari5.1+ */

Answer 1

-webkit-是Webkit浏览器引擎的攻击。在这种情况下，应用于线性渐变CSS属性。

通常，在使用CSS3时我们必须要考虑的第一件事是，一些旧的浏览器无法支持这个＆＃34; new＆＃34;财产（或许多其他人）..所以我们总是使用共同的背景，简单地覆盖传统引擎。

与该属性和-webkit-黑客一起，我们还有其他旧浏览器引擎，如Mozilla Firefox，Internet Explorer，Safari和Opera。

看一下这个例子

.some-class{

    /* Fallback (could use .jpg/.png alternatively) */
    background-color: red;

    /* SVG fallback for IE 9 (could be data URI, or could use filter) */
    background-image: url(fallback-gradient.svg); 

    /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
    background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));

    /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
    background-image:
    -webkit-linear-gradient(left, red, #f06d06);

    /* Firefox 3.6 - 15 */
    background-image:
    -moz-linear-gradient(left, red, #f06d06);

    /* Opera 11.1 - 12 */
    background-image:
    -o-linear-gradient(left, red, #f06d06);

    /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
    background-image:
    linear-gradient(to right, red, #f06d06);

}

您可以在以下位置查看更多解释： https://css-tricks.com/css3-gradients/

和： http://www.w3schools.com/css/css3_gradients.asp

希望它有所帮助！

Answer 2

你走了。 -webkit-gradient仅用于Chrome 4-9和Safari 4-5。我很惊讶Safari 9中仍然支持它：

background:
    -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(224,224,224,1)), color-stop(10%, rgba(224,224,224,1)), color-stop(11%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0))),
    -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249,252,246,1)), color-stop(100%, rgba(187,230,191,1)));

<强>演示

Try before buy

Answer 3

新标准是使用background-image: linear-gradient()。

以下浏览器版本（或更高版本）支持background-image: linear-gradient()的新“未加前缀”版本：

Chrome：26
  Safari：6.1
  Firefox：16
  歌剧：15
  IE：10
  Android：4.4
  iOS：7.0

如果您想了解有关CSS Gradients的更多信息以及新的“无前缀”语法，我建议您使用read of this CSS-Tricks article。

什么是这个CSS的等效-webkit-gradient？

3 个答案: