CSS3背景颜色渐变效果

1、firefox浏览器：

background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff);

2、safari、chrome浏览器：

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%,from(#eef9fe), to(#d1ecff));

3、Opera浏览器：

background-image: -o-linear-gradient(top , #eef9fe, #d1ecff);

4、IE浏览器：

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#eef9fe,endcolorstr=#d1ecff,gradientType=1);

注意：其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。

上面IE浏览器代码实现的是红色至蓝色的渐变，但是不含透明度变化，这是由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用：

 filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

 opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 
 finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
 style用来指定透明区域的形状特征：
 0 代表统一形状
 1 代表线形
 2 代表放射状
3 代表矩形。
 startx 渐变透明效果开始处的 X坐标。
  starty 渐变透明效果开始处的 Y坐标。 
 finishx 渐变透明效果结束处的 X坐标。 
 finishy 渐变透明效果结束处的 Y坐标。

综上所述：在IE浏览器中要实现既含有透明度又含有渐变的效果的话，CSS代码如下：

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#eef9fe,endcolorstr=#d1ecff,gradientType=1);
 -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=1);

更多具体的解析可参考：

http://www.zhangxinxu.com/wordpress/?p=743