blocks|key|1118287|text|从IE9+beta+1开始，你仍然需要使用他们的专有过滤器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118288|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You still need to use their proprietary filters as of IE9 beta 1.

blocks|key|1118332|text|我知道IE9仍然不会支持CSS渐变。这是一种遗憾，因为它支持大量其他优秀的新功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118333|您可能希望将CSS3Pie作为一种让所有版本的IE以最小的麻烦支持各种CSS3功能(包括渐变，但也包括边界半径和框阴影)的方法。|offset|length|1118334|我相信CSS3Pie可以在IE9上工作(我已经在预发布版本上尝试过了，但还没有在当前的测试版上使用)。|1118335|entityMap|0|LINK|mutability|MUTABLE|url|http://css3pie/^0|0|6|7|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

I understand that IE9 still won't be supporting CSS gradients. Which is a shame, because it's supporting loads of other great new stuff.

You might want to look into <a href="http://css3pie" rel="nofollow">CSS3Pie</a> as a way of getting all versions of IE to support various CSS3 features (including gradients, but also border-radius and box-shadow) with the minimum of fuss.

I believe CSS3Pie works with IE9 (I've tried it on the pre-release versions, but not yet on the current beta).

blocks|key|1118435|text|Opera将很快开始提供支持渐变的构建，以及其他CSS功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118436|W3C+CSS工作组甚至还没有完成CSS+2.1，你们都知道，对吧？我们打算很快完成。CSS3是完全模块化的，因此我们可以更快地将模块转移到实现中，而不是整个规范。|1118437|每家浏览器公司都使用不同的软件周期方法、测试等。所以这个过程需要时间。|1118438|我相信很多很多读者都知道，如果你在CSS3中使用任何东西，你就是在做所谓的“渐进式增强”--支持最多的浏览器会获得最好的体验。另一部分是“优雅的降级”，这意味着在浏览器实现模块或模块中与你想做的事情相关的部分之前，体验将是令人愉快的，但可能不是最好的或最具吸引力的。|1118439|这造成了一个相当奇怪的情况，不幸的是，前端开发人员对此感到非常沮丧:实现的时间不一致。因此，这对任何一方都是一个真正的挑战-你会责怪浏览器公司、W3C，还是更糟糕的是-你自己(天知道我们不可能知道所有的事情！)我们这些在浏览器公司工作的人和W3C小组成员会自责吗？你?|1118440|当然不是。这永远是一场平衡的游戏，到目前为止，我们作为一个行业还没有弄清楚平衡点到底在哪里。这就是在进化技术领域工作的乐趣:)|1118441|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

Opera will soon start having builds available with gradient support, as well as other CSS features. 

The W3C CSS Working Group is not even finished with CSS 2.1, y'all know that, right? We intend to be finished very soon. CSS3 is modularized precisely so we can move modules through to implementation faster rather than an entire spec.

Every browser company uses a different software cycle methodology, testing, and so on. So the process takes time. 

I'm sure many, many readers well know that if you're using anything in CSS3, you're doing what's called "progressive enhancement" - the browsers with the most support get the best experience. The other part of that is "graceful degradation" meaning the experience will be agreeable but perhaps not the best or most attractive until that browser has implemented the module, or parts of the module that are relevant to what you want to do.

This creates quite an odd situation that unfortunately front-end devs get extremely frustrated by: inconsistent timing on implementations. So it's a real challenge on either side - do you blame the browser companies, the W3C, or worse yet - yourself (goodness knows we can't know it all!) Do those of us who are working for a browser company and W3C group members blame ourselves? You? 

Of course not. It's always a game of balance, and as of yet, we've not as an industry figured out where that point of balance really is. That's the joy of working in evolutionary technology :)

blocks|key|903757|text|从版本11开始，Opera支持带有-o-+vendor前缀的线性渐变。Chris+Mills写了一篇关于它的Dev.Opera文章：http://dev.opera.com/articles/view/css3-linear-gradients/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|903758|径向渐变仍然在工作中(无论是在规范中，还是在Opera中)。|903759|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.opera.com/articles/view/css3-linear-gradients/^0|1U|1L|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

As of version 11, Opera supports linear gradients with the -o- vendor prefix. Chris Mills wrote a Dev.Opera article about it: <a href="http://dev.opera.com/articles/view/css3-linear-gradients/" rel="nofollow">http://dev.opera.com/articles/view/css3-linear-gradients/</a>

Radial gradients are still in the works (both in the spec, and within Opera).

blocks|key|903797|text|最好的跨浏览器解决方案是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|903798|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%25;/*For+IE7*/+|code-block|syntax|javascript|903799|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The best cross-browser solution is

<pre><code>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*/ 
</code></pre>

blocks|key|1118618|text|IE9目前缺乏对CSS3渐变的支持。然而，这里有一个很好的变通解决方案，使用PHP返回SVG+(垂直线性)渐变，这允许我们在样式表中保留我们的设计。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118619|<?php

$from_stop+=+isset($_GET['from'])+?+$_GET['from']+:+'000000';
$to_stop+=+isset($_GET['to'])+?+$_GET['to']+:+'000000';

header('Content-type:+image/svg%2Bxml;+charset=utf-8');

echo+'<?xml+version="1.0"?>
';

?>
<svg+xmlns="http://www.w3.org/2000/svg"+version="1.1"+width="100%25"+height="100%25">
++++<defs>
++++++++<linearGradient+id="linear-gradient"+x1="0%25"+y1="0%25"+x2="0%25"+y2="100%25">
++++++++++++<stop+offset="0%25"+stop-color="#<?php+echo+$from_stop;+?>"+stop-opacity="1"/>
++++++++++++<stop+offset="100%25"+stop-color="#<?php+echo+$to_stop;+?>"+stop-opacity="1"/>
++++++++</linearGradient>
++++</defs>
++++<rect+width="100%25"+height="100%25"+fill="url(#linear-gradient)"/>
</svg>|code-block|syntax|javascript|1118620|只需将其上传到您的服务器并调用URL，如下所示：|1118621|gradient.php?from=f00&to=00f|1118622|这可以与CSS3渐变结合使用，如下所示：|1118623|.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);
}|1118624|如果你需要在IE9下面定位，你仍然可以使用旧的专有的'filter‘方法：|1118625|.ie7+.my-color,+.ie8+.my-color+{
++++filter:+progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000",+endColorStr="#0000ff");
}|1118626|当然，您可以修改PHP代码以在渐变上添加更多色标，或者使其更复杂(径向渐变、透明度等)。但这对于那些简单的(垂直)线性梯度是很好的。|1118627|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

IE9 currently lacks CSS3 gradient support. However, here is a nice workaround solution using PHP to return an SVG (vertical linear) gradient instead, which allows us to keep our design in our stylesheets.

<pre><code>&lt;?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 '&lt;?xml version="1.0"?&gt;
';

?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"&gt;
 &lt;defs&gt;
 &lt;linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
 &lt;stop offset="0%" stop-color="#&lt;?php echo $from_stop; ?&gt;" stop-opacity="1"/&gt;
 &lt;stop offset="100%" stop-color="#&lt;?php echo $to_stop; ?&gt;" stop-opacity="1"/&gt;
 &lt;/linearGradient&gt;
 &lt;/defs&gt;
 &lt;rect width="100%" height="100%" fill="url(#linear-gradient)"/&gt;
&lt;/svg&gt;
</code></pre>

Simply upload it to your server and call the URL like so:

<pre><code>gradient.php?from=f00&amp;to=00f
</code></pre>

This can be used in conjunction with your CSS3 gradients like this:

<pre><code>.my-color {
 background-color: #f00;
 background-image: url(gradient.php?from=f00&amp;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);
}
</code></pre>

If you need to target below IE9, you can still use the old proprietary 'filter' method:

<pre><code>.ie7 .my-color, .ie8 .my-color {
 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}
</code></pre>

Of course you can amend the PHP code to add more stops on the gradient, or make it more sophisticated (radial gradients, transparency etc.) but this is great for those simple (vertical) linear gradients.

blocks|key|903940|text|看起来我来得有点晚了，但这里有一个针对一些顶级浏览器的示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|903941|/*+IE10+*/+
background-image:+-ms-linear-gradient(top,+#444444+0%25,+#999999+100%25);

/*+Mozilla+Firefox+*/+
background-image:+-moz-linear-gradient(top,+#444444+0%25,+#999999+100%25);

/*+Opera+*/+
background-image:+-o-linear-gradient(top,+#444444+0%25,+#999999+100%25);

/*+Webkit+(Safari/Chrome+10)+*/+
background-image:+-webkit-gradient(linear,+left+top,+left+bottom,+color-stop(0,+#444444),+color-stop(1,+#999999));

/*+Webkit+(Chrome+11%2B)+*/+
background-image:+-webkit-linear-gradient(top,+#444444+0%25,+#999999+100%25);

/*+Proposed+W3C+Markup+*/+
background-image:+linear-gradient(top,+#444444+0%25,+#999999+100%25);|code-block|syntax|javascript|903942|来源：http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html|offset|length|903943|注意:所有这些浏览器都支持rgb/rgba，而不是十六进制表示法。|903944|entityMap|0|LINK|mutability|MUTABLE|url|http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html^0|0|0|3|2A|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Looks like I'm a little late to the party, but here's an example for some of the top browsers:

<pre class="lang-css prettyprint-override"><code>/* 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%);
</code></pre>

Source: <a href="http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html" rel="noreferrer">http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html</a>

Note: all of these browsers also support rgb/rgba in place of hexadecimal notation.

blocks|key|903974|text|使用梯度生成器-一切都将变得完美;)+http://www.colorzilla.com/gradient-editor/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|903975|entityMap|0|LINK|mutability|MUTABLE|url|http://www.colorzilla.com/gradient-editor/^0|J|16|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Use an Gradient Generator - and everything will be perfect ;)
<a href="http://www.colorzilla.com/gradient-editor/" rel="nofollow">http://www.colorzilla.com/gradient-editor/</a>

Does anyone know the vendor prefix for gradients within IE9 or are we still supposed to still be using their proprietry filters?

What I've got for the other browsers is:

<pre><code>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 */
</code></pre>

As a bonus does anyone know Opera's vendor prefix as well?

Gradients in Internet Explorer 9

服务器

有没有人知道IE9中渐变的供应商前缀，或者我们仍然应该使用他们自己的过滤器？对于其他浏览器，我得到的是：background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */background-image: -webkit-gradient...

问Internet Explorer 9中的渐变
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Internet Explorer 9中的渐变EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Internet Explorer 9中的渐变
EN