CSS3:background漸變

今天總結漸變的問題，漸變分爲線性漸變、徑向漸變。呼呼，廢話少說，

線性漸變：background:linear-gradient(設置漸變形式,第一個顏色起點,中間顏色點 中間顏色的位置,結束點顏色);

Linear:漸變的類型（線性漸變）；

漸變的形式：可選參數 有兩種方式-一、設置旋轉角度，0度表明水平從左到右，90度就是從上到下啦，從0度開始逆時針變換。

二、使用關鍵字，left表明從左到右，top表明從上到下，同理right就是從右到左，lefttop-從坐上到右下，同理leftbottom，righttop，rightbottom。

中間顏色與中間顏色位置爲可選參數。

不過要考慮瀏覽器的兼容，我們這樣寫：

-webkit-gradient（linear,0  0,0  100%,from(起始顏色,to(結束顏色)）；  /*for Safari4+,Chrome 2+*/

-webkit-linear-gradient（起始顏色, 結束顏色）；  /*for Safari 5.1+,Chrome 10+*/

-moz-linear-gradient（起始顏色, 結束顏色）；  /*for firefox*/

-o-linear-gradient（起始顏色, 結束顏色）；  /*Opera*/

linear-gradient（起始顏色, 結束顏色）；  /*標準屬性*/

對於IE來講是個麻煩事，老辦法

Filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’ 起始顏色’,endColorstr=」 結束顏色」);  /*IE6,IE 7*/

-ms-linear-gradient（起始顏色, 結束顏色）；  /*IE8*/

<div class="content1"></div>

.content1{width:500px;height:300px;border-radius:10%;background:#ade691;
background:-webkit-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:-moz-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88cfc3', endColorstr='#096e5d'); /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#88cfc3', endColorstr='#096e5d')";background:linear-gradient(lleft,#88cfc3,#329e8c 30%,#096e5d;float:left;}
.tit1{font-size:3em;font-weight: bold;color:#f00;}

重複性線性漸變：repeating-linear-gradient屬性來代替線性漸變linear-gradient；

<div class="content2"></div>

.content2{width:500px;height:200px;
background-image: -webkit-repeating-linear-gradient(red,green 40px, orange 80px);
background-image: repeating-linear-gradient(red,green 40px, orange 80px);}

 

 

徑向漸變：radial-gradient（設置漸變的中心，漸變形狀 漸變大小，起始顏色值，中間顏色值 中間顏色位置，終點顏色）

漸變中心，可選參數，如30px 20px指距離左側30px距離上側20px，能夠是像素，能夠是百分比，也能夠是關鍵字，默認爲中心位置。

漸變形狀，可選參數，能夠取值circle或eclipse【默認】

漸變大小，可循環參數，能夠取值

closest-side：

指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊

closest-corner：

指定徑向漸變的半徑長度爲從圓心到離圓心最近的角

farthest-side：

指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊

farthest-corner：

指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角

contain：

包含，指定徑向漸變的半徑長度爲從圓心到離圓心最近的點。類同於closest-side

cover：

覆蓋，指定徑向漸變的半徑長度爲從圓心到離圓心最遠的點。類同於farthest-corner

 circle farthest-corner圓形漸變，ellipse farthest-corner橢圓漸變

<div class="content3"></div>

.content3{width:500px;height:200px;
background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));margin-top:20px;}