《CSS3實戰》筆記--漸變設計（二)

Gecko引擎的CSS漸變設計直線漸變基本語法

-moz-linear-gradient([ || ,]?,[,]*)

參數說明：

:定義漸變起始點，取值包含數值，百分比，也可以使用關鍵字，其中left，center 和right 關鍵字定義x 軸座標，top，center 和bottom 關鍵字定義y 軸座標。當指定一個值時，另一個值預設為 center 。

:定義直線漸變的角度。單位包括deg，grad（梯度，90度 = 100grad），rad （弧度，一圈等於2*PI rad）。

：定義步長，用法與Webkit引擎的color-stop()函數相似，但是此參數不需要呼叫函數，直接傳遞函數即可。其中第一個參數設定顏色，可以為任何合法的顏色值，第二個值設定顏色的位置，取值為百分比（0~100%）或數值，也可以省略步長設定。

直線漸變的基本用法

/*最簡單的線性漸變，只需要指定開始顏色和結束顏色，則預設從上到下實作線性漸變*/background: -moz-linear-gradient(red, blue) ;

示範效果： 

/*從左上角到右下角的漸變，其中top關鍵字設定起點的x軸，left關鍵字設定起點的y軸座標*/
background: -moz-linear- gradient(top left,red, blue)

示範效果： 

/*設定從左到右的五彩漸變，其中y軸座標預設為center，多個色標以步長平均顯示*/background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

示範效果： 

/*從左上角到右下角的紅色漸變，其中紅色逐漸減弱，並最終顯示為透明*/background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));

示範效果： 

/*設定角度值*/background : -moz-linear-gradient(0deg, red, rgba(255,0,0,0));

演示效果： 

小結：當指定角度時，是沿水平線按逆時針旋轉定位的。因此，設定0deg,將產生從左向右的水平漸變，而設定90度，將創建一個從底部到頂部的漸變。

/*從上到下的多彩漸變，其中在y軸的80%的位置，添加一個綠色色標，設計三色漸變效果。如果沒有指定位置則三色會均勻分佈*/background: -moz-linear-gradient(top, blue, green 80%, orange);

演示效果： 

/*設計漸變半透明的效果的背景圖片，在背景圖片上面覆蓋一層從左到右為白色到透明的漸變填充層*/
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)) , url(images/bg4.jpg);

示範效果： 

徑向漸層的基本語法

-moz-radial-gradient([ || ,
-moz-radial-gradient([ || ,]?[shape> | | ,]? ,[,]*)

此函數的參數說明：

:定義漸變起始點，取值包含數值，百分比，也可以使用關鍵字，其中left，center 和right關鍵字定義x 軸座標，top，center 和bottom 關鍵字定義y 軸座標。當指定一個值時，則另一個值預設為center。

:定義直線漸變的角度。單位包括deg，grad（梯度，90度 = 100grad），rad （弧度，一圈等於2*PI rad）。

：定義步長，用法與Webkit引擎的color-stop()函數相似，但是此參數不需要呼叫函數，直接傳遞函數即可。其中第一個參數設定顏色，可以為任何合法的顏色值，第二個值設定顏色的位置，取值為百分比（0~100%）或數值，也可以省略步長設定。

:定義圓半徑，或橢圓的軸長度n

徑向漸變的基本語法

/*最簡單的徑向漸變，從中間向外由紅色，黃色到藍色漸變顯示*/background: - moz-radial-gradient(red, yellow, blue);

示範效果： 

/*最簡單的徑向漸變，從中間向外由紅色，黃色道藍色漸變顯示，並設置不同色標的顯示位置*/background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);

示範效果： 

/*徑向漸變，從左下角向外由紅色，黃色下角由紅色，黃色下角由紅色，藍色漸層顯示，並設定藍色色標的顯示位置*/background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);

顯示效果： 

/*徑向漸變，形狀為圓形。從左側中間向外由紅色，黃色到藍色漸變顯示，並設定藍色色標的顯示位置*/background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);

示範效果： 

🎜

/*徑向漸變，形狀為橢圓。從中間向外由紅色，黃色到藍色漸變顯示，並設定漸變尺寸為cover關鍵字*/background: -moz-radial-gradient(ellipse cover, red, yellow, blue);

示範效果： 

小結： 
size參數包含多個關鍵字，closest-side,closest-corner,farthest-side,farthest-corner,contain 和cover。使用這些關鍵字可以定義徑向漸層的大小。

另外，Gecko引擎也定義了-moz-repeating-linear-gradient 和-moz-repeating-radial-gradient 兩個屬性，用來定義重複直線漸變和重複徑向漸變。

background: -moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);

簡報top left 60deg,black, black 10px, white 10px, white 20px);

示範效果： 

更多《 CSS3實戰》筆記--漸層設計（二)相關文章請關注PHP中文網！