利用css 3实现渐变可以很方便的更改它的颜色，并且能够减少图片的制作，但是它的兼容性并不好，下面的代码就是实现利用css 渐变兼容的代码：
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8浏览器下的渐变背景*/
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); /* Firefox浏览器下的渐变背景 */
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); /* chrome/Safari浏览器下的渐变背景实现 */
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); /* Opera浏览器下的渐变背景 */
}
<div class="gradient"></div>
实现的效果如下图：
具体的使用说明可查看张鑫旭博客地址：http://www.zhangxinxu.com/wordpress/?p=743