CSS3 經典教程系列：CSS3 放射狀漸層（radial-gradient）

　　《CSS3 經典教程系列》上篇文章介紹了 linear-gradient（線性漸層），這篇文章向大家介紹 radial-gradient（放射狀漸層）以及重複漸層（線性重複、徑向重複）。在以前，漸層效果和陰影、圓角效果一樣都是做成圖片，現在 CSS3 可以直接編寫  CSS 代碼來實現。

您可能感興趣的相關文章

• Web 開發人員和設計師必讀文章推薦
• 20個非常絢麗的 CSS3 特性應用示範
• 35個讓人驚訝的 CSS3 動畫效果示範
• 推薦12個漂亮的 CSS3 按鈕實現方案
• 24款非常實用的 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，而在樣本四中 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);

　　效果如下：

　　

　　樣本八：

background: -moz-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);background: -webkit-radial-gradient(circle farthest-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);   

　　效果如下：

　　

　　下面這個執行個體應用的是Positioned, Sized，請看代碼和效果：

/* Firefox 3.6+ */ /* -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* ) */background: -moz-radial-gradient(80% 20%, closest-corner, #ace, #f96); /* Safari 4-5, Chrome 1-9 */background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#ace), to(#f96)); /* Safari 5.1+, Chrome 10+ */background: -webkit-radial-gradient(80% 20%, closest-corner, #ace, #f96);

　　效果如下：

　　

　　到此關於 CSS3 的兩種漸層方式我們都介紹完了。再浪費大家一點時間，我們看看CSS3 重複漸層（Repeating Gradient）的應用。

　　如果您想重複一個漸層，您可以使用-moz-repeating-linear-gradient（重複線性漸層）和-moz-repeating-radial-gradient（重複放射狀漸層）。 在下面的例子，每個執行個體都指定了兩個起止顏色，並無限重複。

background: -moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);background: -moz-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);background: -webkit-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);

　　效果：

　　         

　　有關於CSS3漸層的東西就完了，大家看完了肯定會想，他主要用在哪些方面呢？這個說起來就多了，最簡單的就是製作背景，我們還可以應用其製作一些漂亮的按鈕，還可以用他來製作patterns，我在這裡列出幾種製作patterns的範例程式碼吧：

　　HTML代碼：

<ul>   <li class="gradient gradient1"></li>   <li class="gradient gradient2"></li>   <li class="gradient gradient3"></li>   <li class="gradient gradient4"></li>   <li class="gradient gradient5"></li>   <li class="gradient gradient6"></li></ul>

　　CSS 代碼：

ul {  overflow: hidden;  margin-top: 20px;}li{  width: 150px;  height: 80px;  margin-bottom: 10px;  float: left;  margin-right: 5px;  background: #ace;  /*Controls the size*/  -webkit-background-size: 20px 20px;  -moz-background-size: 20px 20px;  background-size: 20px 20px; }    li.gradient1 {  background-image: -webkit-gradient(    linear,    0 100%, 100% 0,    color-stop(.25, rgba(255, 255, 255, .2)),     color-stop(.25, transparent),    color-stop(.5, transparent),     color-stop(.5, rgba(255, 255, 255, .2)),    color-stop(.75, rgba(255, 255, 255, .2)),     color-stop(.75, transparent),    to(transparent)    );  background-image: -moz-linear-gradient(    45deg,     rgba(255, 255, 255, .2) 25%,     transparent 25%,    transparent 50%,     rgba(255, 255, 255, .2) 50%,     rgba(255, 255, 255, .2) 75%,    transparent 75%,     transparent    );  background-image: -o-linear-gradient(    45deg,     rgba(255, 255, 255, .2) 25%,     transparent 25%,    transparent 50%,     rgba(255, 255, 255, .2) 50%,     rgba(255, 255, 255, .2) 75%,    transparent 75%,     transparent  );  background-image: linear-gradient(    45deg,     rgba(255, 255, 255, .2) 25%,     transparent 25%,    transparent 50%,     gba(255, 255, 255, .2) 50%,     rgba(255, 255, 255, .2) 75%,    transparent 75%,     transparent    );}li.gradient2 {   background-image: -webkit-gradient(linear, 0 0, 100% 100%,      color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),      color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),      to(transparent));   background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,      transparent 75%, transparent);   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,      transparent 75%, transparent);   background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,      transparent 75%, transparent);}    li.gradient3 {  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);}    li.gradient4 {  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);}    li.gradient5 {  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));  background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),     -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),     -moz-linear-gradient(45deg, transparent 75%, #555 75%),     -moz-linear-gradient(-45deg, transparent 75%, #555 75%);  background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),     -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),     -o-linear-gradient(45deg, transparent 75%, #555 75%),     -o-linear-gradient(-45deg, transparent 75%, #555 75%);  background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),    linear-gradient(-45deg, #555 25%, transparent 25%, transparent),    linear-gradient(45deg, transparent 75%, #555 75%),    linear-gradient(-45deg, transparent 75%, #555 75%);}    li.gradient6 {  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),     -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));  background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),     -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),     -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),     linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));}

　　效果：

　　

　　不錯的效果吧，當然感興趣的朋友可以到這裡學習製作更多的不同效果。

您可能感興趣的相關文章

• CSS3 Media Queries 實現響應式設計
• CSS3 入門教程系列：CSS3 圓角詳解
• CSS3 入門教程系列：CSS3 陰影詳解
• CSS3 入門教程系列：CSS3 RGBA詳解
• CSS3 入門教程系列：CSS3 線性漸層

 

本文連結：CSS3入門教程：CSS3放射狀漸層（整理自：W3CPLUS）

編譯來源：夢想天空 ◆ 關注Web前端開發技術 ◆ 分享網頁設計資源