CSS3之漸層Gradient

　　漸層是CSS3中比較好玩的屬性，學會了漸層，那麼可以做出非常炫的東東喲。CSS3 中漸層——Gradient分為linear-gradient(線性漸層)和radial-gradient(放射狀漸層)。下面就為大家詳細介紹一下CSS3中漸層——Gradient。

　一、Gradient文法

　　1、線性漸層的文法：

　　對象選取器 {background:-瀏覽器首碼-linear-gradient( 起點方向,起點顏色,終點顏色);}

　　

　　對象選取器 {background:-瀏覽器首碼-radial-gradient( 起點方向,形狀,大小,起點顏色,終點顏色);}

　　

　　

　　(1)Firefox 3.6+

　　background:-moz-linear-gradient( 起點方向,起點顏色,終點顏色);

　　(2)Safari 4-5, Chrome 1-9

　　background:-webkit-linear-gradient( 起點方向,起點顏色,終點顏色);

　　(3)Opera 11.10+

　　background:-o-linear-gradient( 起點方向,起點顏色,終點顏色);

　　

　　filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

　　

　　

　　(1)Firefox 3.6+

　　background:-moz-radial-gradient( 起點方向,形狀,大小,起點顏色,終點顏色);

　　(2)Safari 4-5, Chrome 1-9

　　background:-webkit-radial-gradient( 起點方向,形狀,大小,起點顏色,終點顏色);

　　

　　

div {height:100px;width:100px;   background: -webkit-linear-gradient( top,red,green,gray,yellow,pink,purple);}

　　

<div></div>

　　

　　2、不同角度線性漸層

　　

span {height:100px;width:100px;float:left;margin:5px;color:yellow;}.s1 {background: -webkit-linear-gradient( 0deg,#ccc,#000);}.s2 {background: -webkit-linear-gradient( 45deg,#ccc,#000);}.s3 {background: -webkit-linear-gradient( 90deg,#ccc,#000);}.s4 {background: -webkit-linear-gradient( 135deg,#ccc,#000);}.s5 {background: -webkit-linear-gradient( 180deg,#ccc,#000);}.s6 {background: -webkit-linear-gradient( 225deg,#ccc,#000);}.s7 {background: -webkit-linear-gradient( 270deg,#ccc,#000);}.s8 {background: -webkit-linear-gradient( 315deg,#ccc,#000);}.s9 {background: -webkit-linear-gradient( 360deg,#ccc,#000);}

　　

<span class="s1">0度</span><span class="s2">45度</span><span class="s3">90度</span><span class="s4">135度</span><span class="s5">180度</span><span class="s6">225度</span><span class="s7">270度</span><span class="s8">315度</span><span class="s9">360度</span>

　　

　　

　　

span {height:100px;width:180px;float:left;margin:5px;color:yellow;}.s1 {background: -webkit-radial-gradient(ellipse closest-side, #ccc, red 10%, #000 50%, #ccc);}.s2 {background: -webkit-radial-gradient(ellipse closest-corner, #ccc, red 10%, #000 50%, #ccc);}.s3 {background: -webkit-radial-gradient(ellipse farthest-side, #ccc, red 10%, #000 50%, #ccc);}.s4 {background: -webkit-radial-gradient(ellipse farthest-corner, #ccc, red 10%, #000 50%, #ccc);}.s5 {background: -webkit-radial-gradient(ellipse contain, #ccc, red 10%, #000 50%, #ccc);}.s6 {background: -webkit-radial-gradient(ellipse cover, #ccc, red 10%, #000 50%, #ccc);}

　　

<span class="s1">最近端</span><span class="s2">最近角</span><span class="s3">最遠端</span><span class="s4">最遠角</span><span class="s5">包含</span><span class="s6">覆蓋</span>

　　

　　

　　

span {height:100px;width:180px;float:left;margin:5px;color:yellow;}.s1 {background: -webkit-repeating-linear-gradient(top, #ace, #ace 5px, #f96 5px, #f96 10px);}.s2 {background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);}

　　

<span class="s1"></span><span class="s2"></span>

　　

　　CSS3之漸層Gradient就為大家介紹到這裡，更多CSS3屬性方面的介紹敬請大家關注本blog有關CSS3的更新。更多有關CSS3的建議歡迎大家提出，謝謝大家長期關注夢龍blog。