В Chrome/Safari и Firefox есть свойства -webkit-gradient
и -moz-linear-gradient
. Как я могу сделать то же самое с IE9?
Поддерживает ли IE9 линейные градиенты CSS?
Ответ 1
Ну, IE9 еще не закончен, но пока похоже, что вам придется использовать SVG. Я не знаю никакой поддержки -ms-градиента или градиента в IE9. Другое, что до сих пор не хватает, что меня раздражает, это текстовая тень.
Ответ 2
Лучшее кросс-браузерное решение -
background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
height: 1%;/*For IE7*/
Ответ 3
Лучшее кросс-браузерное решение для IE 9+, которое соответствует стандартам W3C (не приводит к ошибке в CSS validator):
background-color: #fff; /* Browsers without linear-gradient support */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */
background-image: -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */
background-image: linear-gradient(#fff 0%, #000 100%); /* W3C */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";
.gradient--test {
background-color: #fff; /* Browsers without linear-gradient support */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */
background-image: -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */
background-image: linear-gradient(#fff 0%, #000 100%); /* W3C */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";
}
.gradient--test {
width: 61.8%;
height: 200px;
}
<div class=gradient--test></div>