上篇文章介紹了 CSS3 線性漸變（linear-gradient），這篇文章向大家介紹 radial-gradient（徑向漸變）以及重復漸變（線性重復、徑向重復）。在以前，漸變效果和陰影、圓角效果一樣都是做成圖片，現在 CSS3 可以直接編寫  CSS 代碼來實現。

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>]*);

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);

CSS3 徑向漸變（radial-gradient）

摘要 上篇文章介紹了 CSS3 線性漸變（linear-gradient） ，這篇文章向大家介紹 radial-gradient（徑向漸變）以及重復漸變（線性重復、徑向重復）。在以前，漸變效果和陰影、圓角效果一樣都是做成圖片，現在 CSS3 可以直接編寫 CSS 代碼來實現。 CSS3 徑向漸變和線

上篇文章介紹了 CSS3 線性漸變（linear-gradient），這篇文章向大家介紹 radial-gradient（徑向漸變）以及重復漸變（線性重復、徑向重復）。在以前，漸變效果和陰影、圓角效果一樣都是做成圖片，現在 CSS3 可以直接編寫  CSS 代碼來實現。

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

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

　　示例一：

　　效果：

　　示例二：

　　效果如下：

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

　　示例三：

　　效果如下：

　　示例四：

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

　　效果如下：

　　示例三和示例四我們從效果中就可以看出，其形狀不一樣，示例三程圓形而示例四程橢圓形狀，也是就是說他們存在形狀上的差異。然而我們在回到兩個示例的代碼中，顯然在示例三中設置其形狀為 circle，而在示例四中 ellipse，換而言之在徑向漸變中，我們是可以設置其形狀的。
　　示例五：

background: -moz-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

　　效果如下：

　　示例六：

background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);

　　效果如下：

　　從示例五和示例六中的代碼中我們可以清楚知道，在示例五中我人應用了closest-side而在示例六中我們應用了farthest-corner。這樣我們可以知道在徑向漸變中我們還可以為其設置大小(Size)：size的不同選項(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用來定義圓或橢圓大小的點。 示例：橢圓的近邊VS遠角 下面的兩個橢圓有不同的大小。示例五是由從起始點(center)到近邊的距離設定的，而示例六是由從起始點到遠角的的距離決定的。

　　示例七：

background: -moz-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

　　效果如下：

　　示例八：

　　效果如下：

　　示例七和示例八主要演示了圓的近邊VS遠邊 ，示例七的圓的漸變大小由起始點(center)到近邊的距離決定，而示例八的圓則有起始點到遠邊的距離決定。
　　示例九：

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

　　效果如下：

　　示例十：

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

　　效果如下：

　　示例九和示例十演示了包含圓 。在這里你可以看到示例九的默認圈，同一漸變版本，但是被包含的示例十的圓。

　　最后我們在來看兩個實例一個是應用了中心定位和full sized,如下所示：

/* Firefox 3.6+ */
 background: -moz-radial-gradient(circle, #ace, #f96);
 /* Safari 4-5, Chrome 1-9 */
 /* Can't specify a percentage size? Laaaaaame. */
 background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ace), to(#f96));
 /* Safari 5.1+, Chrome 10+ */
 background: -webkit-radial-gradient(circle, #ace, #f96);

　　效果如下：

原文見：CSS3 徑向漸變（radial-gradient）   http://www.jcodecraeer.com/a/qianduankaifa/css3/2013/0623/1383.html