Какой эквивалент -webkit-градиент этого CSS?

Question

Стиль должен быть обратно совместимым.

Пробовал -webkit-gradient синтаксис прибегая к помощи и понять это сам, но не могу найти документ ......

Итак, что эквивалентно -webkit-gradient этого CSS:

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-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

Answer 2

Новый Стандарт должен использовать background-image: linear-gradient().

Следующие версии браузера (или более поздней версии) поддерживают новый 'не-приставкой' версию background-image: linear-gradient():

Chrome: 26
Safari: 6,1
Firefox: 16
Opera: 15
IE: 10
Android: 4.4
Иос: 7,0

Если вы хотите узнать больше о градиентах CSS и новом синтаксисе «без префикса», я бы рекомендовал иметь read of this CSS-Tricks article.

Answer 3

-webkit- является взломом для браузера Webkit. В этом случае применяется к свойству CSS с линейным градиентом.

Как правило, первое, что мы должны иметь в виду при использовании CSS3, это то, что некоторые старые браузеры не могут поддерживать это «новое» свойство (или многие другие). Поэтому мы всегда используем общий фон, охватывая устаревшие движки просто ,

Вместе со своим имуществом и хакерами -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

Надеется, что это помогает!