css3 Gradient漸變

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* }  //標(biāo)準(zhǔn)寫法
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* }  //在WebKit瀏覽器下的應(yīng)用
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )  //在Mozilla瀏覽器下的應(yīng)用
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);  //在Opera瀏覽器下的應(yīng)用

background:linear-gradient(left top,yellow,blue);
background:-webkit-linear-gradient(left top,yellow,blue);
background:-moz-linear-gradient(left top,yellow,blue);
background:-o-linear-gradient(left top,yellow,blue);

background: linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);   
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);   
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);   
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

1.3 使用角度

角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創(chuàng)建一個從下到上的漸變，90deg 將創(chuàng)建一個從左到右的漸變。

注意：有部分瀏覽器使用了舊的標(biāo)準(zhǔn)，即 0deg 將創(chuàng)建一個從左到右的漸變，90deg 將創(chuàng)建一個從下到上的漸變。換算公式 90 - x = y 其中 x 為標(biāo)準(zhǔn)角度，y為非標(biāo)準(zhǔn)角度。

1.4 重復(fù)的線性漸變

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 15%);
    background: -o-repeating-linear-gradient(red, yellow 10%, green 15%); 
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 15%); 
    background: repeating-linear-gradient(red, yellow 10%, green 15%);

二、徑向漸變（radial-gradient）

徑向漸變由它的中心定義。

為了創(chuàng)建一個徑向漸變，你也必須至少定義兩種顏色結(jié)點。顏色結(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。

同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。

語法

 -moz-radial-gradient([<position> || <angle>,]? [<shape>] [<size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
 -webkit-radial-gradient([<position> || <angle>,]? [<shape>] [<size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
 -o-radial-gradient([<position> || <angle>,]? [<shape>] [<size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
 radial-gradient([<position> || <angle>,]? [<shape>] [<size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

參數(shù)說明：

<position>：用來定義徑向漸變的圓心位置，類似background-position，默認(rèn)為center?？捎藐P(guān)鍵字top、left、bottom、right、center、<length>、<percentage>。

例子：顏色結(jié)點均勻分布的徑向漸變

 background: -webkit-radial-gradient(white, green, orange);
 background: -o-radial-gradient(white, green, orange);
 background: -moz-radial-gradient(white, green, orange); 
 background: radial-gradient(white, green, orange);

例子：結(jié)點不均勻的徑向漸變

background: -webkit-radial-gradient(white 2%, green 10%, orange 50%);
 background: -o-radial-gradient(white 2%, green 10%, orange 50%);
 background: -moz-radial-gradient(white 2%, green 10%, orange 50%); 
background: radial-gradient(white 2%, green 10%, orange 50%);

例子：定義形狀

shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 ellipse。

 background: -webkit-radial-gradient(circle,white, green, orange);
 background: -o-radial-gradient(circle,white, green, orange);
 background: -moz-radial-gradient(circle,white, green, orange); 
 background: radial-gradient(circle,white, green, orange);

重復(fù)的徑向漸變

 background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); 
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); 
    background: repeating-radial-gradient(red, yellow 10%, green 15%);

如有錯誤，歡迎指正！