CSS3 gradient 顏色漸變效果

CSS3 Gradient分爲 linear-gradient(線性漸變) 和 radial-gradient（徑向漸變）。爲了更好的應用CSS3 Gradient, 須要先了解一下目前的幾種瀏覽器的內核，主要有Mozilla( Friefox, Flock等)， webkit(Safari, chrome等)，Opera(Opera瀏覽器)， Trident(IE瀏覽器)。

線性漸變在Mozilla下的應用：

語法：  

 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

參數：其共有三個參數，第一個參數表示線性漸變的方向,top是從上到下，left是從作到右，若是定義成left top,那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還能夠在它們之間插入更多的參數，表示多種顏色的漸變。如圖所示：

根據上面的介紹，咱們先來看看一個簡單的例子：

HTML:

<div class="example example1"></div>

CSS:

.example
{
     width: 150px;
     height: 80px;
}

如無特殊說明，咱們後面的實例都是應用這一段html和CSS的基本代碼。

如今咱們給這個div應用一個簡單的漸變樣式：

.example
{
    background: -moz-linear-gradient( top,#ccc,#000);
}

效果以下：

---

線性漸變在Webkit下的應用

語法：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發布書寫語法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規則

上面這種CSS語法咱們常常見到，可能有人看不一樣具體的意思，其實上面的一些符號含義與正則表達式有不少一致之處：

•  [] 在正則中表示一個字符類，這裏，你能夠理解爲一個小單元

•  | 表示候選。也就是」或者」的意思，要麼前面的，要麼就後面的。

• ？爲量詞，表示0個或者1個

參數：-webkit-gradient是webkit引擎對漸變的實現參數，一共有五個。第一個參表示漸變類型(type),能夠是linear（線性漸變）或者radial(徑向漸變)。第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值能夠用座標形式表示，也能夠用關鍵值表示，好比left top（左上角）和left bottom(左下角)。 第四個和第五個參數，分別是兩個color-stop函數。 color-stop函數接收兩個參數，第一個表示漸變的位置，0爲起點，0.5爲中點， 1爲結束點；第二個表示該點的顏色。如圖所示：

咱們先看看一個老式的寫法示例：

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

效果以下：

接着咱們在來看看一下新式的寫法：

background:-webkit-linear-gradient(top,#ccc,#000);

這個效果就不在貼出來了，你們在瀏覽器中一看就明白了，他們是否一致的效果，仔細對比，在Mozilla和webkit下二者的學法都是基本上一致了。只是其前綴的區別，固然哪一天他們能統一成同樣，對咱們倆說固然是更好了的，那就不用去處理了。將大大節省咱們的開發時間喲。其餘內核的瀏覽器的寫法在這裏就再也不一一介紹，具體請看下面的連接：

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

CSS3徑向漸變

CSS3徑向漸變和線性漸變是很類似的，咱們首先來看看其語法：

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

除了您已經在線性漸變中看到的起始位置，方向和顏色，徑向梯度容許你指定漸變的形狀（圓形或橢圓形）和大小（最近端，最近角，最遠端，最遠角），包含和覆蓋(closest-side, closest-corner,farthest-side, farthest-corner, contain or cover)。 顏色起止（Color stops）：就像用線性漸變，你應該沿着漸變線定義漸變的起止顏色。下面爲了更好的理解其具體的用法，咱們主要經過不一樣的示例來對比CSS3徑向漸變的具體用法：

示例一：

background: -moz-radial-gradient(#ace, #f96, #1E90FF);
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

效果：

示例二：

background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

效果：

從以上兩個示例的代碼中發現，他們起止色相同，可是就是示例定位了些數據，爲何會形成這麼大的區別呢？其實在徑向漸變中雖然具備相同的起止色，可是在沒有設置位置時，其默認顏色爲均勻間隔，這一點和咱們前面的線性漸變是同樣的，可是設置了漸變位置就會按照漸變位置去漸變，這就是咱們示例一和示例二的區別之處，雖然圓具備相同的起止顏色，但在示例一爲默認的顏色間隔均勻的漸變，而示例二顏色都有特定的位置。

示例三

background: -moz-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);

效果：

示例四

background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);

效果

示例三和示例四咱們從效果中就能夠看出，其形狀就不同，示例三圓形而示例四橢圓形，也就是說他們存在形狀上的差別。然而咱們再回到兩個示例的代碼中，顯然在示例三中設置其形狀爲circle,而在示例四是elipse, 換而言之在徑向漸變中，咱們是能夠設置其形狀的。

還有一些比較詳細的用法，在此再也不詳細講述，詳情請參考下面連接：

http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html