IT兄弟連 HTML5教程 CSS3屬性特效 漸變3

4  徑向漸變

CSS3徑向漸變是圓形或橢圓形漸變。顏色再也不沿着一條直線軸變化，而是從一個起點朝全部方向混合。但相對線性漸變要比徑向漸變複雜的多。

徑向漸變的格式以下：

radial-gradient([<起點>]? [<形狀> || <大小>,]? <點>，<點>…)

 

徑向漸變的參數描述如表1：

表1  CSS3徑向漸變參數描述

5  徑向漸變實例

雖然徑向漸變要比線性漸變動爲複雜，只要瞭解了其基本語法以及相關屬性參數的做用，並不須要花太多的時間去適應。接下來，咱們經過實戰來增強徑向漸變的使用。本節的全部例子咱們都在一個寬度爲400像素，高爲300像素的容器中實現。

 

1、從容器內部向外徑向漸變

先來看一個最簡單的徑向漸變，圓心都是容器正中間，從「#ffc107」顏色向「pink」顏色實現徑向漸變，CSS代碼以下：

 

在瀏覽器中查看效果如圖1所示：

圖1  簡單徑向漸變

 

若是你想製做一個圓形漸變，而不是一個橢圓形漸變，只須要添加一個關鍵詞「circle」，咱們在上例的基礎上添加一個關鍵詞「circle」，代碼以下：

 

此時的漸變變成了圓形，在瀏覽器中查看效果如圖2所示：

 

圖2  圓形漸變

 

正如你所看到的，圓形的漸變是一個特殊的橢圓漸變，水平半徑和垂直半徑具備相同的長度值。既然圓形漸變是橢圓漸變的一種特殊狀況，若是咱們漸變主要半徑（水平半徑）和次要半徑（垂直半徑）不相同時就是一個橢圓形漸變。正如上面所言，主要半徑和次要半徑不相等時，製做的徑向漸變是橢圓形漸變，在製做橢圓形漸變，可使用關鍵詞「ellipse」。

 

2、規定徑向漸變的半徑

除了使用關鍵詞製做不一樣的徑向漸變，還能夠用不一樣的漸變參數製做徑向漸變效果，經過製做同心圓，主要半徑和次要半徑來決定徑向漸變的形狀。徑向漸變的半徑設爲「200px,100px」。水平半徑爲200px，垂直半徑爲100px，從「#ffc107」色到「pink」色徑向漸變：

 

此時的漸變變成了水平半徑爲200px，垂直半徑爲100px的橢圓，在瀏覽器中查看效果如圖3所示：

圖3  自定義半徑的徑向漸變

 

3、規定徑向漸變的半徑及圓心位置

除了上述方法能實現一些簡單的徑向漸變效果以外，還可使用漸變形狀配合圓心定位。主要使用「at」加上關鍵詞來定義徑向漸變中心位置。徑向漸變中心位置相似於background-position屬性。例如，圓心位置在「100px,150px」處，水平半徑爲200px，垂直半徑爲100px，從「#ffc107」色到「pink」色徑向漸變：

 

此時的漸變變成了水平半徑爲200px，垂直半徑爲100px且圓心位置在「100px 200px」處的橢圓，在瀏覽器中查看效果如圖4所示：

 

圖4  自定義半徑及圓心位置的徑向漸變

 

設置圓心位置除了使用特定的值外，可使用百分比和一些關鍵詞來定義，如「center」、「top」、「right」、「bottom」、「left」及這些關鍵詞的組合，如「top left」、「right bottom」等，組合位置的關鍵詞順序能夠調換。

 

4、重複的徑向漸變

跟線性漸變同樣，咱們也能夠爲徑向漸變設置重複。以一樣的方式，可使用相關的屬性建立重複的徑向漸變。其語法和linear-gradient相似，只是以一個徑向漸變爲基礎進行重複漸變，以下例所示，咱們製做一個三色重複的徑向漸變：

 

在瀏覽器中查看，漸變效果如圖5所示：

圖5  三色重複徑向漸變

 

理解了上述的幾個實例後，讀者就能夠本身DIY漸變效果了。