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

Question

尝试使用Google搜索 -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+ */

- Allen Zhang

Answer 1

这里有一些内容。 -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)));

Demo

Try before buy

- insertusernamehere

Answer 2

-webkit-是针对Webkit浏览器引擎的一种hack。在此情况下，应用于linear-gradient CSS属性。

通常，在使用CSS3时，我们必须记住一件事情，即一些旧的浏览器可能不支持这个“新”的属性（或许多其他属性）。因此，我们始终使用常见的背景，简单地覆盖了旧的引擎。

除了该属性和-webkit- hack之外，我们还有其他旧版本浏览器引擎的hack，如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);

}

你可以在以下链接中查看更多关于CSS3渐变的解释： https://css-tricks.com/css3-gradients/ 还有： http://www.w3schools.com/css/css3_gradients.asp 希望对你有所帮助！

- RPichioli

Answer 3

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

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

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

如果您想了解有关 CSS 渐变和新的“未加前缀”语法的更多信息，我建议阅读此 CSS-Tricks 文章 read of this CSS-Tricks article。

- Zac Webb