CSS3‧漸層

CSS3的漸層語法，在各瀏覽器的語法略有不同，分別說明如下：


Chrome / Safari 4+:


/*由上到下*/
background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));


/*由左至右*/
background:-webkit-gradient(linear, left top, right top, from(#00475E), to(#007276));


/*在Chrome 10 之後語法可簡化為:*/
background:webkit-linear-gradient(top, #00475E, #007276);


Firefox 3.6+
/*由上到下*/
background:-moz-linear-gradient(top, #00475E, #007276);


/*由左至右*/
background:-moz-linear-gradient(left, #00475E, #007276);


IE6~IE8
基本語法 
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276'); 


參數說明 
上下漸層GradientType=0 
左右漸層GradientType=1 
漸層起始色彩startcolorstr=# 
漸層結束色彩endcolorstr=# 




跨瀏覽器綜合語法
body {
        /*預設背景顏色, 讓不支援漸層的瀏覽器能呈現基本底色*/
        background: #278092;
        /******跨瀏覽器的底色漸層CSS語法 (由上到下)********/ 
        /*Chrome的語法*/
        background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));
        /*FireFox的語法*/
        background: -moz-linear-gradient(top, #00475E, #007276);
        
        /*IE6~IE8的語法*/
        filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276');
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #00475E, #007276);
        margin: 0px;
}
--------------------------------------------------------------
後記：
上述語法精我實際測試後，Opera沒有安裝..= =和除了ie的效果不知道為什麼出不來外
其他皆能呈現我要的效果測試OK


引用網站：
http://mepopedia.com/forum/read.php?844,17157,17157#.E4.B8.89.E3.80.81.E8.B7.A8.E7.80.8F.E8.A6.BD.E5.99.A8.E7.B6.9C.E5.90.88.E8.AA.9E.E6.B3.95
參考資料: 
CSS Tricks: http://css-tricks.com/examples/CSS3Gradient/ 
CSS3 Maker: http://www.css3maker.com/