界面漸變特效 -- CSS實現 -- 兼容IE8

特別注意：里面的RGB顏色值必須要全寫，不能使用縮寫。

左右：
background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c));   
　　background: -webkit-linear-gradient(left, #80c1e7, #213c7c);   
　　background: -moz-linear-gradient(left, #80c1e7, #213c7c);   
　　background: -o-linear-gradient(left, #80c1e7, #213c7c);   
　　background: -ms-linear-gradient(left, #80c1e7, #213c7c);   
　　background: linear-gradient(left, #80c1e7, #213c7c);   
　　filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #80c1e7, endColorstr = #213c7c);   
上下：
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e8e8e8));   
    background: -webkit-linear-gradient(top, #ffffff, #e8e8e8);   
    background: -moz-linear-gradient(top, #ffffff, #e8e8e8);   
    background: -o-linear-gradient(top, #ffffff, #e8e8e8);   
    background: -ms-linear-gradient(top, #ffffff, #e8e8e8);   
    background: linear-gradient(top, #ffffff, #e8e8e8);   
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = #ffffff, endColorstr = #e8e8e8);   

　　

上下：
background: -webkit-linear-gradient(top,#ffffff,#f5f5f5);
    background: -moz-linear-gradient(top,#ffffff,#f5f5f5);
    background: -webkit-gradient(linear, top, bottom,from(#ffffff),to(#f5f5f5));
    background: linear-gradient(top,#ffffff,#f5f5f5);
    background: -ms-linear-gradient(top,#ffffff,#f5f5f5);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#f5f5f5);


左右：

background: -webkit-linear-gradient(left,#41caf4,#5399f6);
    background: -moz-linear-gradient(left,#41caf4,#5399f6);
    background: -webkit-gradient(linear,left top,right top,from(#41caf4),to(#5399f6));
    background: linear-gradient(left,#41caf4,#5399f6);
    background: -ms-linear-gradient(left,#41caf4,#5399f6);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#41caf4, endColorstr=#5399f6);

IE透明度：
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*IE6~IE8*/


相關說明：
上面的濾鏡代碼主要有三個參數，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表橫向漸變，gradientType=0代表縱向淅變。startcolorstr=”色彩” 代表漸變漸變起始的色彩，endcolorstr=”色彩” 代表漸變結尾的色彩。

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坐標。

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));  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  
    background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));