这个 CSS 的等价物 -webkit-gradient 是多少？

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

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

以下浏览器版本（或更高版本）支持 background-image: linear-gradient() 的新 'un-prefixed' 版本：

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

如果您想了解有关 CSS 渐变和新 'un-prefixed' 语法的更多信息，我建议您使用 read of this CSS-Tricks article.

Answer 2

-webkit- 是 Webkit 浏览器引擎的 hack。在这种情况下，应用到 linear-gradient CSS 属性.

通常，我们在使用 CSS3 时首先要记住的是一些旧浏览器不支持此 "new" 属性（或许多其他浏览器）..所以我们总是使用共同的背景，简单地涵盖遗留引擎。

连同属性和 -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);

}

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

并且： http://www.w3schools.com/css/css3_gradients.asp

希望对您有所帮助！

Answer 3

给你。 -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

这个 CSS 的等价物 -webkit-gradient 是多少？

What's the equivalent -webkit-gradient of this CSS?

html

css

webkit