css3系列之linear-gradient() repeating-linear-gradient() 和 radial-gradient() repeating-radial-gradient()

　　linear-gradient()  (線性漸變)　　repeating-linear-gradient()   (重復的線性漸變)

　　radial-gradient()  (鏡像漸變)　　repeating-radial-gradient()   (重復的鏡像漸變)

設置漸變色。

這四個屬性， 都可以作為背景圖片的url 放入使用。例如 border-image: linear-gradient();   和 background-image:  linear-gradient();

　　

　　 linear-gradient()  (線性漸變)

參數：

linear-gradient(#fff, #333);       第一個值 設置 從什么顏色 漸變到 第二個值的顏色。

linear-gradient(to bottom, #fff, #333);    第一個值是 從上漸變到 下。 

linear-gradient(to top, #333, #fff);　　 第一個值是 從下漸變到 上。 

linear-gradient(180deg, #fff, #333);　　第一個值 是角度的意思。 也就是從上漸變到下，一個圓是 360deg。   

linear-gradient(to bottom, #fff 0px,  #333 100px);  第二個值的 0px  和 第三個值的 100px  是， 從 第二個值的顏色，0px位置開始， 漸變到 第三個值的 100px位置停止。具體是怎么樣的，看下面圖解。    也可以填 %。

 

　　repeating-linear-gradient()   (重復的線性漸變)

語法跟上面的 linear-gradient() 是一樣的。

只不過 linear-gradient 后面沒填充完的 地方用了最后一個顏色填充。

repeating-linear-gradient 他是用填充好的效果，重復填充 還沒填充的地方

 

　　radial-gradient()  (鏡像漸變)

 參數：  

radial-gradient(circle, #f00, #ff0, #080);   第一個值是， 正圓的意思。以正圓的方式 擴散漸變。  第二 三 四 個值。從圓心 #f00 顏色， 向外擴散。

radial-gradient(circle at center, #f00, #ff0, #080);  第一個值的意思是。 正圓，圓心在 中間，默認就是這個。

radial-gradient(circle at 50%, #f00, #ff0, #080);  50% 也是一樣， 寬的 50%，也就是中間。（可以設置兩個值，一個值代表left的位置，第二個代表top的位置） 

radial-gradient(circle farthest-corner, #f00, #ff0, #080);　　

第一個值： 設置圓的類型。 有  正圓：circle  橢圓：ellipse， 可以搭配 at top 指定位置。(可以填 %，也可以填px， 一個值的時候，是設置left，兩個值 是設置 left 和top 的位置)

第一個值還可以設置：

　　closest-side：指漸變的半徑長度為從圓心到離圓心最近的邊

　　closest-corner：指漸變的半徑長度為從圓心到離圓心最近的角

　　farthest-side：指漸變的半徑長度為從圓心到離圓心最遠的邊

　　farthest-corner：指漸變的半徑長度為從圓心到離圓心最遠的角

　　還可以加上 at 使用。( farthest-corner at 30px 30px，#f0f, #ff0 )

 

 　　repeating-radial-gradient()   (重復的鏡像漸變)

語法和上面一樣。

只不過 radial-gradient 后面沒填充完的 地方用了最后一個顏色填充。

repeating-radial-gradient 他是用填充好的效果，重復填充 還沒填充的地方