Internet Explorer 9中的渐变
有谁知道IE9内的渐变供应商前缀还是我们仍然应该仍然使用他们的专有filter？
我得到的其他浏览器是：
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */ 作为奖金有人知道Opera的供应商的前缀呢？
从IE9 beta 1开始，您仍然需要使用专有的filter。
看起来我晚了一点，但这里有一些顶级浏览器的例子：
/* IE10 */ background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* Opera */ background-image: -o-linear-gradient(top, #444444 0%, #999999 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%); /* Proposed W3C Markup */ background-image: linear-gradient(top, #444444 0%, #999999 100%);
来源： http : //ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
注意：所有这些浏览器也支持rgb / rgba代替hex表示法。
最好的跨浏览器解决scheme是
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*/
IE9目前缺乏CSS3渐变支持。 但是，这里有一个很好的解决方法，使用PHP来返回一个SVG（垂直线性）渐变，这使我们能够将devise保留在样式表中。
<?php $from_stop = isset($_GET['from']) ? $_GET['from'] : '000000'; $to_stop = isset($_GET['to']) ? $_GET['to'] : '000000'; header('Content-type: image/svg+xml; charset=utf-8'); echo '<?xml version="1.0"?> '; ?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> <defs> <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/> <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/> </linearGradient> </defs> <rect width="100%" height="100%" fill="url(#linear-gradient)"/> </svg>
简单地上传到您的服务器，并像这样调用URL：
gradient.php?from=f00&to=00f
这可以与您的CSS3渐变一起使用，如下所示：
.my-color { background-color: #f00; background-image: url(gradient.php?from=f00&to=00f); background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f)); background-image: -webkit-linear-gradient(top, #f00, #00f); background-image: -moz-linear-gradient(top, #f00, #00f); background-image: linear-gradient(top, #f00, #00f); }
如果你需要在IE9以下的目标，你仍然可以使用旧的专有'filter'的方法：
.ie7 .my-color, .ie8 .my-color { filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff"); }
当然，您可以修改PHP代码以在渐变上添加更多的停止点，或者使其更加复杂（径向渐变，透明度等），但这对于那些简单（垂直）线性渐变很好。
我用于所有浏览器渐变的代码：
background: #0A284B; background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); background: -webkit-linear-gradient(#0A284B, #135887); background: -moz-linear-gradient(top, #0A284B, #135887); background: -ms-linear-gradient(#0A284B, #135887); background: -o-linear-gradient(#0A284B, #135887); background: linear-gradient(#0A284B, #135887); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887'); zoom: 1;
您将需要指定一个高度或zoom: 1将hasLayout应用于该元素，以便在IE中工作。
更新：
这里有一个LESS Mixin（CSS）版本，用于你所有的LESS用户：
.gradient(@start, @end) { background: mix(@start, @end, 50%); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")"; background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); background: -webkit-linear-gradient(@start, @end); background: -moz-linear-gradient(top, @start, @end); background: -ms-linear-gradient(@start, @end); background: -o-linear-gradient(@start, @end); background: linear-gradient(@start, @end); zoom: 1; }
Opera将很快开始build立可用的渐变支持，以及其他CSSfunction。
W3C的CSS工作组甚至没有完成CSS2.1，你们都知道，对吧？ 我们打算很快完成。 CSS3是精确模块化的，所以我们可以将模块移动到更快的速度，而不是整个规范。
每个浏览器公司使用不同的软件循环方法，testing等等。 所以这个过程需要时间。
我相信很多很多读者都知道，如果你在CSS3中使用任何东西，你就是在做所谓的“渐进式增强” – 那些支持最多的浏览器可以获得最好的体验。 另一部分是“优雅的退化”，这意味着体验将是令人满意的，但可能不是最好的或最有吸引力的，直到浏览器实现了模块或与你想要做的事情相关的模块的一部分。
这造成了相当奇怪的情况，不幸的是，前端开发人员由于执行时间不一致而感到非常沮丧。 所以这是一个真正的挑战 – 你是否指责浏览器公司，W3C，还是更糟 – 你自己（天知道我们无法知道这一切！）我们这些为浏览器公司和W3C组织工作的人成员怪自己？ 您？
当然不是。 这总是一个平衡的游戏，而且迄今为止，我们还没有一个行业发现这个平衡点到底在哪里。 这是进化技术工作的喜悦:)
据我所知，IE9仍然不会支持CSS渐变。 这是一个耻辱，因为它支持其他伟大的新东西的负载。
您可能希望将CSS3Pie作为让所有版本的IE浏览器支持各种CSS3function（包括渐变，但也包括border-radius和box-shadow）的一种方式。
我相信CSS3Pie适用于IE9（我已经在预发行版本上试过了，但还没有在目前的testing版上）。
不确定关于IE9，但Opera似乎没有任何渐变支持：
在该页面上没有出现“渐变”。
Robert Nyman有一篇很棒的文章，讲述如何在所有不是Opera的浏览器上使用CSS渐变：
不知道是否可以扩展到使用图像作为后备。
从版本11开始，Opera使用-o-供应商前缀支持线性渐变。 Chris Mills写了一篇关于它的Dev.Opera文章： http ://dev.opera.com/articles/view/css3-linear-gradients/
径向渐变仍在工作（在规范和Opera内）。
使用渐变发生器 – 一切都将是完美的;） http://www.colorzilla.com/gradient-editor/
