Линейный градиент CSS3

Ответ 1

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

Все экспериментальные свойства CSS получают префикс:

• -webkit- для браузеров Webkit (хром, Safari)
• -moz- для FireFox
• -o- для Opera
• -ms- для Internet Explorer
• нет префикса для реализации, которая полностью соответствует спецификации.

Используйте top right вместо right, если вам нужен другой угол. Используйте left или right, если вы хотите горизонтальный градиент.

См. также:

• MDN: linear-gradient

Internet Explorer

Для < IE10 вам нужно будет использовать:

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

filter работает для IE6, IE7 (и IE8), в то время как IE8 рекомендует -ms-filter (значение должно быть указано) вместо filter. Более подробную документацию для Microsoft.Gradient можно найти по адресу: http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx

-ms-filter синтаксис

Поскольку вы являетесь поклонником IE, я объясню синтаксис -ms-filter:

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorStr='#0c93c0', /*Start color*/
     endColorStr='#FFFFFF',   /*End color*/
     GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

Вместо использования цвета RGB HEX вы также можете использовать формат ARGB. Средство альфа, FF означает непрозрачность, а 00 означает прозрачность. Часть GradientType является необязательной, все выражение нечувствительно к регистру.

Ответ 2

Вот пример, который работает с Opera, Internet Explorer и многими другими веб-браузерами. Если браузер не поддерживает градиенты, он будет показывать нормальный цвет фона.

background: #f2f5f6;
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc));
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);

Я украл это с этого веб-сайта. Microsoft построила собственный генератор здесь.

Ответ 3

Вы пробовали Colorzilla Ultimate CSS Gradient Generator?

Ответ 4

Я получил решение почти для всех!

/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FFFFFF));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */    background-image:   -webkit-linear-gradient(top, #000000, #FFFFFF);
/* Firefox 3.6+ */                                      background-image:   -moz-linear-gradient(top, #000000, #FFFFFF);
/* IE 7-*/                                                  filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0);
/* IE 8+*/                                                  -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0)";
/* IE 10+ */                                                background-image:   -ms-linear-gradient(top, #000000, #FFFFFF);
/* Opera 11.10+ */                                      background-image:   -o-linear-gradient(top, #000000, #FFFFFF);
/* fallback image                                       background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   #000000;

Надеюсь, это может помочь некоторым людям:).

Ответ 5

Ответ Rob W является исчерпывающим, в то же время подробным. Поэтому я хотел бы получить резюме, поддерживающее текущие браузеры в конце 2014 года, одновременно обеспечив некоторую обратную совместимость, оставив только IE6/7 недопустимые возможности рендеринга линейного градиента и раннего Webkit (Chrome1-9, Saf4 -5 специальный способ (-webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) );)

Синтаксис стандартов изменился с начала градиентной позиции до to direction, например. background-image: linear-gradient( to bottom, #0C93C0, #FFF );

Широко поддерживаемый, удобный для чтения CSS:

background-color: #8BCCE1;                                             /* fallback color (eg. the gradient center color), if gradients not supported; you could also work with an gradient image, but mind the extra HTTP-Request for older browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#0C93C0, EndColorStr=#FFFFFF )"; /* IE8-9, ColorZilla Ultimate CSS Gradient Generator uses SVG bg image for IE9 */

background-image: -webkit-linear-gradient(       top, #0C93C0, #FFF ); /* Chrome10-25, Saf5.1-Saf6, iOS -6.1, Android -4.3 */
background-image:    -moz-linear-gradient(       top, #0C93C0, #FFF ); /* Fx3.6-15 */
background-image:      -o-linear-gradient(       top, #0C93C0, #FFF ); /* Op11.10-12.02 */
background-image:         linear-gradient( to bottom, #0C93C0, #FFF ); /* W3C, Fx16+, Chrome26+, IE10+, Op12.10+, Saf6.1+ */

Интересным фактом является то, что большинство сообщений в блогах и инструменты градиента браузера в Интернете, например f.e. знаменитый ColorZilla " Ultimate CSS Gradient Generator" включает значение префикса MS -ms-linear-gradient для MS-поставщика.
Это поддерживается в Internet Explorer 10 Consumer Preview on. Но когда вы включаете стандартное значение linear-gradient, Internet Explorer 10 Release Preview, он делает это соответственно.
Таким образом, включив -ms-linear-gradient и стандартный способ, с -ms вы фактически обращаетесь только к IE10 Consumer Preview, который сводится к nobody в вашей аудитории.