Internet Explorer 9中的渐变

是否有人知道IE9中渐变的供应商前缀，还是我们仍然应该使用他们的专有过滤器？

我为其他浏览器提供的是：

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开始，您仍然需要使用其专有的过滤器。

我参加聚会似乎有点晚了，但这是一些顶级浏览器的示例：

/* 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代替十六进制表示法。

最好的跨浏览器解决方案是

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（垂直线性）渐变，这使我们可以将设计保留在样式表中。

<?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以下，则仍可以使用旧的专有“过滤器”方法：

.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将其应用于hasLayoutIE 才能应用到该元素。

更新：

这是面向所有LESS用户的LESS Mixin（CSS）版本：

.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将很快开始提供带有梯度支持以及其他CSS功能的版本。

W3C CSS工作组甚至还没有完成CSS 2.1，你们都知道，对吧？我们打算很快完成。CSS3精确地模块化了，因此我们可以更快地将模块移到实现中，而不是整个规范。

每个浏览器公司都使用不同的软件周期方法，测试等。因此该过程需要时间。

我敢肯定，很多读者都知道，如果您在CSS3中使用任何工具，那么您所做的就是所谓的“渐进式增强”-获得最多支持的浏览器将获得最佳体验。另一部分是“优雅降级”，这意味着在该浏览器实现了模块或与您要执行的操作相关的模块之前，体验将是令人满意的，但可能不是最好或最有吸引力的。

这造成了一种奇怪的情况，不幸的是前端开发人员由于以下原因而极为沮丧：实现时间不一致。因此，无论从哪方面来看，这都是一个真正的挑战-您是责怪浏览器公司，W3C或更糟糕的是-自己（善意知道我们一无所知！）为我们这些在浏览器公司和W3C小组工作的人做成员自责吗？您？

当然不是。它始终是一种平衡的游戏，到目前为止，作为一个行业，我们还没有弄清平衡点的真正位置。这就是从事进化技术的乐趣：）

我了解IE9仍不支持CSS渐变。真可惜，因为它支持其他许多很棒的新东西。

您可能希望研究CSS3Pie，以使IE的所有版本都能以最少的麻烦来支持各种CSS3功能（包括渐变，还包括边界半径和框阴影）。

我相信CSS3Pie可以与IE9一起使用（我已经在预发行版中进行过尝试，但尚未在当前Beta版中使用）。

不确定IE9，但Opera似乎还没有任何渐变支持：

• http://www.opera.com/docs/specs/presto26/#css

该页面上没有出现“渐变”。

罗伯特·尼曼（Robert Nyman）撰写了一篇很棒的文章，介绍如何在所有非Opera浏览器中使用CSS渐变：

• http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

不知道是否可以扩展以使用图像作为备用。

从版本11开始，Opera支持带有-o-供应商前缀的线性渐变。克里斯·米尔斯（Chris Mills）撰写了一篇有关Dev.Opera的文章：http ://dev.opera.com/articles/view/css3-linear-gradients/

径向渐变仍在工作中（在规范中和Opera中）。

使用渐变生成器-一切都会完美;） http://www.colorzilla.com/gradient-editor/