關於css3的背景漸變

關於css3的漸變，目前各大瀏覽器還未做到很好的支持，所以需要在我們使用時加上各大瀏覽器前綴。

-moz-：使用Mozilla內核的瀏覽器（Firefox瀏覽器）

-webkit-：使用Webkit核心的瀏覽器（Chrome,Safari瀏覽器）

-o-：使用Opera內核的瀏覽器（Opera瀏覽器）

這裡對IE不做過多介紹，對於本文背景顏色的漸變，也沒有考慮IE

一。線性漸層(linear-gradient)

1.語法：-moz-linear-gradient(/,,……)

參數：第一個參數便是線性漸變的方向

　　　　top：從上到下；

　　　　left：由左至右；

　　　　right：由右到左；

　　　　bottom：從下到上；

　　　　也可以兩兩組合，例如從左上：left top,從右上：right top等等，這裡就不過多介紹了；

　　　　angle代表角度（一直認為涉及到角度一個平面直角座標系足夠直觀）。

　　第二個參數和第三個參數分別是起點和終點的顏色，還可以再他們之間插入更多的參數，表示多種顏色的漸進，顏色支持使用16進制數值表示，也可以使用rgb (a)數值

　　例：background:-moz-linear-gradient(top,#000,#fff);  

　　　　註：表示從#000到#fff的漸變

　　　　background:-moz-linear-gradient(45deg,#000 50%,#555 50%,#555);

　　　　註：表示0-50%是#000,50%-100%是#555

2.文法：-webkit-linear-gradient(/,,…)  【新式文法書寫規則】

　　　　-webkit-gradient(,/,/,,…) 【老式文法書寫規則】

　　　　新式語法書寫規則與其他相同這裡不過多介紹，下面介紹一下老式語法規則：

參數：第一個參數表示漸變類型，可以是linear(線性)或radial(徑向)；

　　第二個參數和第三個參數表示漸變的起點和終點，可以是座標或關鍵值；

　　第四個和第五個參數分別表示起點和終點的顏色，還可以再他們之間插入更多的參數，表示多種顏色的漸進，顏色支持使用16進制數值表示，也可以使用rgb( a)數值。

　　例：background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#000));

　　註：表示從上到下，從#fff到#000的漸變

　　background:-webkit-gradient(linear,0 0,100% 100%,color-stop(.5,rgb(255,255,255)),color-stop(.5,rgba(0,0,0,.2)));

　　註：表示由左上到右下0-50%是白色，50%-100%是透明度為0.2的黑色

3.語法：-o-linear-gradient(/,,……)

　　例：background:-moz-linear-gradient(top,#000,#fff);  

　　　　註：表示從#000到#fff的漸變

二。徑向漸層（radial-gradient）

語法：-moz-radial-gradient(/,/,,……);

　　-webkit-radial-gradient(/,/,,…);

oprea瀏覽器對徑向漸變的支援還不太好，所以這裡不介紹。除了在線性漸變中看到的其實位置，方向和顏色，徑向漸變允許指定漸變的形狀：圓形（circle）和橢圓形（ellipse）和大小:最近端（closest-side），最近角（closest -corner），最遠端（farthest-side），最遠角（farthest-corner），包含（contain），覆蓋（cover）。對於這幾個大小的設定有的差距甚微，有些迷惑。

例：background:radial-gradient(#fff, #000););

🎜🎜🎜🎜🎜🎜

　　🎝 ient(#fff, #000);

　　註：表示從白到黑的圓形漸變　〜 　　background: -moz-radial-gradient(80% 20%, closest-corner, #fff, #000); 　　background: -webkit-radial-gradient(80% 20%, closest-corner, #fff, #000); 　　註：表示在80% 20%的位置有白色圓到黑色的漸變 2.css的重複漸層 語法：-moz-repeating-linear-gradient(/,,……); 　　-webkit-repeating-linear-gradient(/,,…);

　　-o-repeating-linear-gradient(/,,…);

　　

-moz-radial-gradient(/,/,,……);

　　

-webkit-radial-gradient(/,/,,…); 例：background: -moz-repeating-radial-gradient(#fff, #000 5px, #000 5px, #000 10px);

　　background: -webkit-repeating-radial-gradient(#fff, #000 5px, #000 5px, #fff 10px); 　　註：表示一圈一圈的黑白圓圈（不要太暈哦） 本文摘自沙漠的部落格http://www.w3cplus.com/content/css3-gradient