CSS在不同浏览器下实现颜色渐变效果

 想做一个首页巨幕，又不想用图片，这样速度会慢掉一点点，纯色挺丑的，只好试试渐变效果咯。CSS 3有很好的颜色渐变支持，要应付一些老旧的浏览器，还是要几行代码滴。

 整理如下：

<code>    </code><code>background-image</code><code>: -moz-linear-gradient(</code><code>top</code><code>, </code><code>#ff4f02</code><code>, </code><code>#8f2c00</code><code>);</code>

<code>    </code><code>/* Firefox */</code>

<code>    </code> 

<code>    </code><code>background-image</code><code>: -webkit-gradient(linear, </code><code>left</code> <code>top</code><code>, </code><code>left</code> <code>bottom</code><code>, color-stop(</code><code>0</code><code>, </code><code>#ff4f02</code><code>), color-stop(</code><code>1</code><code>, </code><code>#800000</code><code>));</code>

<code>    </code><code>/* Safiri 4+, Chrome */</code>

<code>    </code><code>filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=</code><code>'#ff4f02'</code><code>,endColorstr=</code><code>'#8f2c00'</code><code>);</code>

<code>    </code><code>/* IE 6 7 8 9 */</code>

<code>    </code><code>background</code><code>: -ms-linear-gradient(</code><code>top</code><code>, </code><code>#ff4f02</code><code>, </code><code>#8f2c00</code><code>);</code>

<code>    </code><code>/* IE 10 */</code>

 效果是酱紫的：

<a href="http://s3.51cto.com/wyfs02/M01/6D/73/wKiom1VkWgeivNH-AAKS_uYw208623.jpg" target="_blank"></a>

本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1655408，如需转载请自行联系原作者