CSS3 漸層功能

CSS漸層功能太方便拉 對我這種不愛用圖檔的人來說真是一大樂事阿

CSS語法:

-moz-linear-gradient(顏色漸成開始位置,開始顏色,結束顏色) /*Firefox Linear gradients*/
-webkit-gradient(linear,開始位置,結束位置,from(開始顏色),to(結束顏色)) /*Safari, Chrome Linear gradients*/
個人比較喜歡FF的寫法精簡，但其實兩者都挺容易上手。

趕快來看看效果如何:

左to右
background:-moz-linear-gradient(left, #003300, #66CC66) ;/*FF3.0*/
background: -webkit-gradient(linear, left center, right center, from(#003300), to(#66CC66)); /*Google*/

上to下
background:-moz-linear-gradient(top, #003300, #66CC66) ;/*FF3.0*/
background: -webkit-gradient(linear,center top,center bottom, from(#003300), to(#66CC66)); /*Google*/

左斜to右斜
background:-moz-linear-gradient(left top 300deg, #003300, #66CC66) ;/*FF3.0*/
background:-webkit-gradient(linear, left top, right bottom, from(#003300), to(#66CC66)); /*Google*/