CSS3徑向漸變

CSS3徑向漸變是圓形或橢圓形漸變。顏色不再沿著一條直線軸變化，而是從一個起點朝所有方向混合。但相對線性漸變要比徑向漸變復(fù)雜的多。

一、徑向漸變的語法

CSS3的徑向漸變已得到眾多瀏覽器引擎的支持，只不過其語法的版本根據(jù)不同的引擎瀏覽器，其語法也不一樣，特別是在Webkit引擎的瀏覽器下和線性漸變的語法類似，也有新舊之法。而在其他幾大引擎的瀏覽器，其語法基本類似，只是使用的前綴不同而以。特別是在2013年04年，W3C為CSS3徑向漸變推出最新的語法格式。接下來我們一起來看看各引擎瀏覽器下的徑向漸變語法。

1. Webkit引擎的CSS3徑向漸變語法

CSS3徑向漸變在Webkit引擎下的語法和線性漸變的語法一樣，分為兩種，一種是老版本的語法，另外一種是新版本語法：

Webkit引擎下的老版本語法：

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

Webkit引擎新式語法

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

Webkit引擎中的瀏覽器Chrome4－9和Safari 4－5版本支持老式的Webkit引擎徑向語法，Chrome10.0+和Safari5.1+支持Webkit引擎新式徑向漸變。

2. Gecko引擎的CSS3的徑向漸變語法

Gecko引擎的CSS3的徑向漸變和Webkit引擎新式語法類似，只是使用的前綴不同而以：

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

Gecko引擎的Firefox瀏覽器中Firefox3.6+版本支持徑向漸變。

3. Presto引擎的CSS3徑向漸變語法

Presto引擎的CSS3徑向漸變語法和Webkit引擎的新式語法類似，只是使用的前綴不同而以：

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

Presto引擎中的Opear11.6開始支持徑向漸變。

4. Trident引擎的CSS3徑向漸變語法

Trident引擎的瀏覽器從IE10開始支持徑向漸變語法，其語法格式與Webkit引擎的新式語法類似，僅不同的是其前綴不同，需要使用“-ms-”：

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

5. W3C標準徑向漸變語法

W3C組織從2013年04月開始給徑向語法推出新的語法規(guī)則：

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);	

不過支持徑向漸變語法的瀏覽器，到寫這文稿時，僅有IE10+,Firefox16+瀏覽器支持。

二、徑向漸變的屬性參數(shù)

CSS3的徑向漸變相對于線性漸變要復(fù)雜的多，屬性參數(shù)也繁多復(fù)雜。CSS3徑向變中新老語法中的屬性參數(shù)定義如下：

<position>：主要用來定義徑向漸變的圓心位置。此值類似于CSS中background-position屬性，用于確定元素漸變的中心位置。如果這個參數(shù)省略了，其默認值為“center”。其值主要有以下幾種：

<length>：用長度值指定徑向漸變圓心的橫坐標或縱坐標。可以為負值。
<percentage>：用百分比指定徑向漸變圓心的橫坐標或縱坐標。可以為負值。
left：設(shè)置左邊為徑向漸變圓心的橫坐標值。
center：設(shè)置中間為徑向漸變圓心的橫坐標值或縱坐標。
right：設(shè)置右邊為徑向漸變圓心的橫坐標值。
top：設(shè)置頂部為徑向漸變圓心的縱標值。
bottom：設(shè)置底部為徑向漸變圓心的縱標值。

<shape>：主要用來定義徑向漸變的形狀。其主要包括兩個值“circle”和“ellipse”：

circle：如果<size>和<length>大小相等，那么徑向漸變是一個圓形，也就是用來指定圓形的徑向漸變
ellipse：如果<size>和<length>大小不相等，那么徑向漸變是一個橢圓形，也就是用來指定橢圓形的徑向漸變。

<size>：主要用來確定徑向漸變的結(jié)束形狀大小。如果省略了，其默認值為“farthest-corner”。可以給其顯式的設(shè)置一些關(guān)鍵詞，主要有：

closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角；

如果<shape>設(shè)置了為“circle”或者省略，<size>可能顯式設(shè)置為<length>。表示的是用長度值指定徑向漸變的橫向或縱向直徑長度，并根據(jù)橫向和縱向的直徑來確定徑向漸變的形狀是圓或者是橢圓。此值不不能負值。

如果<shape>設(shè)置了“ellipse”或者省略，<size>可能顯式設(shè)置為［<length>|<percentage>］。主要用來設(shè)置橢圓的大小。第一個值代表橢圓的水平半徑，第二個值代表垂直半徑。這兩個值除了使用<length>定義大小之外還可以使用<percentage>來定義這兩半徑大小。使用<percentage>定義值是相對于徑向漸變?nèi)萜鞯某叽纭Ｍ瑯硬荒転樨撝怠?/p>

<color-stop>：徑向漸變線上的停止顏色，類似于線性漸變的<color-stop>。徑向漸變的為漸變線從中心點向右擴散。其中0%表示漸變線的起始點，100%表示漸變線的與漸變?nèi)萜飨嘟唤Y(jié)束的位置。而且其顏色停止可以定義一個負值。

三、徑向漸變的基本用法

雖然徑向漸變要比線性漸變更為復(fù)雜，只要了解了其基本語法以及相關(guān)屬性參數(shù)的作用，我想并不會需要花太多的時間去適應(yīng)。接下來，我們通過實戰(zhàn)來加強徑向漸變的使用。下面的所有例子我們都在一個寬度為400像素，高為300像素的容器中實現(xiàn)。

先來看一個最簡單的徑向漸變，圓心都是容器正中間，從“hsla(120,70%,60%,.9)”顏色向“hsla(360,60%,60%,.9)”顏色實現(xiàn)徑向漸變：

div {
   400px;
  height: 300px;
  margin: 50px auto;
  border: 5px solid hsla(60,50%,80%,.8);
  background-image: -webkit-radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
  background-image: radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

如果你想制作一個圓形漸變，而不是一個橢圓形漸變，只需要添加一個關(guān)鍵詞“circle”，我們在前例的基礎(chǔ)上添加一個關(guān)鍵詞“circle”：

div {
   400px;
  height: 300px;
  margin: 50px auto;
  border: 5px solid hsla(60,50%,80%,.8);
  background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
  background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

正如你所看到的，圓形的漸變是一個特殊的橢圓漸變，水平半徑和垂直半徑具有相同的長度值。

既然圓形漸變是橢圓漸變的一種特殊情況，如果我們漸變主要半徑（水平半徑）和次要半徑（垂直半徑）不相同時就是一個橢圓形漸變。

正如上面所言，主要半徑和次要半徑不相等時，制作的徑向漸變是橢圓形漸變，在制作橢圓形漸變，可以使用關(guān)鍵詞“ellipse”：

div {
   400px;
  height: 300px;
  margin: 50px auto;
  border: 5px solid hsla(60,50%,80%,.8);
  background-image: -webkit-radial-gradient(ellipse,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
  background-image: radial-gradient(ellipse,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

除了使用關(guān)鍵詞制作不同的徑向漸變，還可以用不同的漸變參數(shù)制作徑向漸變效果，通過制作同心圓，主要半徑和次要半徑來決定徑向漸變的形狀。例如，圓心位置都在“200px,150px”處，主要半徑為50px，次要半徑為150px，從“hsla(120,70%,60%,.9)”色到“hsla(360,60%,60%,.9)”色徑向漸變：

div {
	 400px;
	height: 300px;
	margin: 50px auto;
	border: 5px solid hsla(60,50%,80%,.8);
	background-image: -webkit-radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
	background-image: radial-gradient(50px 150px at 200px  150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

上圖實現(xiàn)的是內(nèi)徑小于外徑制作的徑向漸變效果，接著我們來看看圓心相同，內(nèi)外半徑大小相同實現(xiàn)的漸變效果：

div {
	 400px;
	height: 300px;
	margin: 50px auto;
	border: 5px solid hsla(60,50%,80%,.8);
	background-image: -webkit-radial-gradient(200px 200px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
	background-image: radial-gradient(200px 200px at 200px  150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

上圖效果告訴我們，當內(nèi)外圓的圓心相同，并且主要半徑和次要半徑相等時，制作的漸變效果就等同于制作了一個圓形徑向漸變效果。接下來我們在看一個實例，圓心相同，主要半徑大于次要的半徑制作的徑向漸變：

div {
	 400px;
	height: 300px;
	margin: 50px auto;
	border: 5px solid hsla(60,50%,80%,.8);
	background-image: -webkit-radial-gradient(300px 100px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
	background-image: radial-gradient(300px 100px at 200px  150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

除了使用<length>值之外，還可以使用<percentage>值，其具體使用細節(jié)類似于的使用方法：

div {
	 400px;
	height: 300px;
	margin: 50px auto;
	border: 5px solid hsla(60,50%,80%,.8);
	background-image: -webkit-radial-gradient(80% 20% at 30% 60%, hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
	background-image: radial-gradient(80% 20% at 30% 60%, hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

除了上述方法能實現(xiàn)一些簡的徑向漸變效果之外，還可以使用漸變形狀配合圓心定位。主要使用“at”加上關(guān)鍵詞來定義徑向漸變中心位置。徑向漸變中心位置類似于background-position 屬性，可以使用一些關(guān)鍵詞來定義：

A）、center：設(shè)置徑向漸變中心位置在容器的中心點，相當于at 50％ 50％。類似于background-position:center。

/* at center*/
.center .circle {
	background-image: -webkit-radial-gradient(circle at center, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at center, rgb(220, 75, 200),rgb(0, 0, 75));
}
.center .ellipse {
	background-image: -webkit-radial-gradient(ellipse at center, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at center, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

B）、top：設(shè)置徑向圓心點在容器的頂邊中心點處，與at 50% 0%效果等效。類似于background-position的center top。

/* at top*/
.top .circle {
	background-image: -webkit-radial-gradient(circle at top, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at top, rgb(220, 75, 200),rgb(0, 0, 75));
}
.top .ellipse {
	background-image: -webkit-radial-gradient(ellipse at top, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at top, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

C）、right：設(shè)置徑向漸變圓心點在容器右邊中心點處，與at 100% 50%的效果等同。類似于background-position的right center。

/* at right */
.right .circle {
	background-image: -webkit-radial-gradient(circle at right, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at right, rgb(220, 75, 200),rgb(0, 0, 75));
}
.right .ellipse {
	background-image: -webkit-radial-gradient(ellipse at right, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at right, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

D）、bottom：設(shè)置徑向漸變圓心點在容器底邊中心點處，剛好與“top”關(guān)鍵詞位置相反，與at 50% 100%效果等同。類似于background-position中的center bottom。

.bottom .circle {
	background-image: -webkit-radial-gradient(circle at bottom, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at bottom, rgb(220, 75, 200),rgb(0, 0, 75));
}
.bottom .ellipse {
	background-image: -webkit-radial-gradient(ellipse at bottom, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at bottom, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

E）、left：設(shè)置徑向漸變圓心點在容器左邊中心點處，剛好與“right”關(guān)鍵詞位置相反，與at 0% 50%效果等同。類似于background-position的center left。

/* at left */
.left .circle {
	background-image: -webkit-radial-gradient(circle at left, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at left, rgb(220, 75, 200),rgb(0, 0, 75));
}
.left .ellipse {
	background-image: -webkit-radial-gradient(ellipse at left, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at left, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

F）、top left：設(shè)置徑向漸變圓心點在容器的左角頂點處，與關(guān)鍵詞“l(fā)et top”和at 0 0效果等同。類似于background-position的left top。

/* at top left*/
.top-left .circle {
	background-image: -webkit-radial-gradient(circle at top left, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at top left, rgb(220, 75, 200),rgb(0, 0, 75));
}
.top-left .ellipse {
	background-image: -webkit-radial-gradient(ellipse at top left, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at top left, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* at left top*/
.left-top .circle {
	background-image: -webkit-radial-gradient(circle at left top, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at left top, rgb(220, 75, 200),rgb(0, 0, 75));
}
.left-top .ellipse {
	background-image: -webkit-radial-gradient(ellipse at left top, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at left top, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

G）、top right：設(shè)置徑向漸變圓心點在容器右角頂點處，與“right top”關(guān)鍵詞與at 100% 0效果等同。類似于background-position的top right。

/*at top right*/
.top-right .circle {
	background-image: -webkit-radial-gradient(circle at top right, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at top right, rgb(220, 75, 200),rgb(0, 0, 75));
}
.top-right .ellipse {
	background-image: -webkit-radial-gradient(ellipse at top right, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at top right, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* at right top*/
.right-top .circle {
	background-image: -webkit-radial-gradient(circle at right top, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at right top, rgb(220, 75, 200),rgb(0, 0, 75));
}
.right-top .ellipse {
	background-image: -webkit-radial-gradient(ellipse at right top, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at right top, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

H）、bottom right：設(shè)置徑向漸變的圓心點在容器右下角頂點處，與關(guān)鍵詞“right bottom”和at 100% 100%效果等同。類似于background-position的bottom right。

/* at bottom right*/
.bottom-right .circle {
	background-image: -webkit-radial-gradient(circle at bottom right, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at bottom right, rgb(220, 75, 200),rgb(0, 0, 75));
}
.bottom-right .ellipse {
	background-image: -webkit-radial-gradient(ellipse at bottom right, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at bottom right, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* at right bottom*/
.right-bottom .circle {
	background-image: -webkit-radial-gradient(circle at right bottom, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at right bottom, rgb(220, 75, 200),rgb(0, 0, 75));
}
.right-bottom .ellipse {
	background-image: -webkit-radial-gradient(ellipse at right bottom, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at right bottom, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

I）、bottom left：設(shè)置徑向漸變圓心在容器左下角頂點處，與關(guān)鍵詞“l(fā)eft bottom”和 at 0% 100%效果等同。類似于background-position的bottom left。

/* at bottom left*/
.bottom-left .circle {
	background-image: -webkit-radial-gradient(circle at bottom left, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at bottom left, rgb(220, 75, 200),rgb(0, 0, 75));
}
.bottom-left .ellipse {
	background-image: -webkit-radial-gradient(ellipse at bottom left, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at bottom left, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* at left bottom*/
.left-bottom .circle {
	background-image: -webkit-radial-gradient(circle at left bottom, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(circle at left bottom, rgb(220, 75, 200),rgb(0, 0, 75));
}
.left-bottom .ellipse {
	background-image: -webkit-radial-gradient(ellipse at left bottom, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(ellipse at left bottom, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

綜合上面的實例以及對應(yīng)的效果，大家在理解徑向漸變使用關(guān)鍵詞設(shè)置徑向漸變圓心位置，可以把其當作元素背景中的background-position屬性來理解。用來設(shè)置元素徑向漸變圓心的所有可用關(guān)鍵詞對照的位置關(guān)系，可以瀏覽下圖：

前面分別給大家介紹了使用<size> 、漸變類型關(guān)鍵詞以及漸變類型配合關(guān)鍵詞制作的徑向漸變效果。除了上述方法可以制作一些徑向漸變效果之外，還可以使用<size>和漸變類型以及圓心關(guān)鍵詞結(jié)合制作一些徑向漸變效果。

當給元素顯式的設(shè)置了徑向漸變的大小，這兩個值設(shè)置了徑向漸變的水平和垂直半徑。如果一個徑向漸變包含徑向漸變類型“circle”和一個單一的大小值，您就可以實現(xiàn)一個圓形的徑向漸變。如果一個徑向漸變包含了徑向漸變類型“ellipse”和兩個值，或者只是兩個值，您就可以實現(xiàn)一個橢圓形的徑向漸變。在設(shè)置徑向半徑大小值時，您可以使用任何CSS的單位長度值都有效。例如：

A)、使用20px circle制作一個徑向半徑為20px的圓形徑向漸變：

div {
	 300px;
	height: 300px;
	border-radius: 100%;
	margin: 50px auto;
	border: 5px solid hsla(60,50%,80%,.8);
	background-image: -webkit-radial-gradient(20px circle,hsla(220,89%,100%,1),hsla(30,60%,60%,.9));
	background-image: radial-gradient(20px circle,hsla(220,89%,100%,1),hsla(30,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

B）、使用2em 4em ellipse制作橢圓形徑向漸變，其中主要半徑為2em，次要半徑為4em。

div {
	 300px;
	height: 300px;
	border-radius: 100%;
	margin: 50px auto;
	border: 5px solid hsla(60,50%,80%,.8);
	background-image: -webkit-radial-gradient(2em 4em ellipse,hsla(220,89%,100%,1),hsla(30,60%,60%,.9));
	background-image: radial-gradient(2em 4em ellipse,hsla(220,89%,100%,1),hsla(30,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

C)、使用8em circle at top配合圓心位置關(guān)鍵詞制作一個圓形徑向漸變，其半徑大小為5em，圓心在top處。

div {
	 300px;
	height: 300px;
	border-radius: 100%;
	margin: 50px auto;
	background-image: -webkit-radial-gradient(8em circle at top,hsla(220,89%,100%,1),hsla(30,60%,60%,.9));
	background-image: radial-gradient(8em circle at top,hsla(220,89%,100%,1),hsla(30,60%,60%,.9));
}	

效果如下圖所示：

CodePen的案例

除了通過<size>給徑向漸變顯式的設(shè)置大小之外，我們還可以通過關(guān)鍵詞隱式的為徑向漸變設(shè)置大小。其中的每個關(guān)鍵詞指定徑向漸變大小的算法。也就是通過圓心指向徑向漸變的邊或者角來確定徑向漸變的大小。不過在圓形和橢圓形的徑向漸變之中，他們算出來的大小略有不同。雖然最初看上去似乎有些復(fù)雜，一旦您理解了這些關(guān)鍵詞的意義，一切就變得簡單。

當使用closest-side來設(shè)置一個圓形徑向漸變大小，主要是通過徑向邊緣與離元素最近邊緣的切點到圓心之間的直線距離大決定。如下圖所示：

當使用closest-side來設(shè)置橢圓形徑向漸變大小，主要通過徑向漸變水平與垂直邊緣與離最近邊緣切點到圓心的直線距離大小決定。如下圖所示：

當使用closest-corner來設(shè)置圓形徑向漸變大小，主要通過漸變邊緣與到元素最近頂角交接點到圓心直線距離決定，如下圖所示：

當使用“closest-corner”來設(shè)置橢圓形徑向漸變大小，主要通過徑向漸變邊緣與到元素最近頂角交接點到圓心的直線距離大小決定，如下圖所示：

當使用“farthest-side”來設(shè)置圓形徑向漸變大小，主要通過徑向漸變邊緣與元素最遠邊的切點到圓心的直線距離大小決定，如下圖所示：

當使用“farthest-side”來設(shè)置橢圓形徑向漸變大小，主要通過徑向漸變與元素最遠邊切點到圓心的直線距離大小決定。如下圖所示：

當使用“farthest-corner”來設(shè)置圓形徑漸變的大小，主要通過徑向漸變邊緣與元素最遠頂角交點到圓心的直線距離決定，如下圖所示：

當使用“farthest-corner”來設(shè)置橢圓形徑向漸變，主要通過漸變邊緣與元素最遠頂點的交接點到圓心的直線距離決定，如下圖所示：

為了更好的說明這些關(guān)鍵詞的使用，下面的實例中，我們將圓心定義在“at 50% 75%”的位置，分別演示了“closest-side”、“closest-corner”、“farthest-side”和“farthest-corner”分別在圓形與橢圓形徑向漸變的效果。

/* closest-side*/
.closest-side .circle {
	background-image: -webkit-radial-gradient(closest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(closest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-side .ellipse {
	background-image: -webkit-radial-gradient(closest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(closest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* closest-corner*/
.closest-corner .circle {
	background-image: -webkit-radial-gradient(closest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(closest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-corner .ellipse {
	background-image: -webkit-radial-gradient(closest-corner at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(closest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-side */
.farthest-side .circle {
	background-image: -webkit-radial-gradient(farthest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(farthest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-side .ellipse {
	background-image: -webkit-radial-gradient(farthest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(farthest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-corner */
.farthest-corner .circle {
	background-image: -webkit-radial-gradient(farthest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(farthest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-corner .ellipse {
	background-image: -webkit-radial-gradient(farthest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
	background-image: radial-gradient(farthest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}	

效果如下圖所示：

CodePen的案例

在徑向漸變中，除了能設(shè)置徑向漸變的圓心位置、半徑大小之外，還可以設(shè)置徑向漸的顏色，前面我們演示的都是簡單的兩個顏色制作的徑向漸變，接下來通過<color-stop>屬性參數(shù)來設(shè)置徑向漸變的顏色。

下面我們在前面的基礎(chǔ)上增加一個顏色，實現(xiàn)三色漸變效果：

div {
  margin: 20px auto;
   200px;
  height: 200px;
  border-radius: 100%;
  background-image: -wekbit-radial-gradient(red,green,blue);
  background-image: radial-gradient(red,green,blue);
}	

效果如下圖所示：

CodePen的案例

上面的示例是一個簡單的三色徑向漸變，只是通過設(shè)置三個顏色，從容器的中心向外由紅色（red）、綠色（green）到藍色(blue)。這可以說是最簡單的了多色徑向漸變了，除此之外，我們還可以給每個顏色設(shè)置具體的顯示位置：

div {
	margin: 20px auto;
	 200px;
	height: 200px;
	border-radius: 100%;
	background-image: -wekbit-radial-gradient(red 20%,green 50%,blue 80%);
	background-image: radial-gradient(red 20%,green 50%,blue 80%);
}	

效果如下圖所示：

CodePen的案例

在徑向漸變中的漸變顏色，我們可以使用任何表示顏色的格式，并且確定漸變顏色的位置可以使用任何表示長度的單位值，同時顏色數(shù)量不會做任何限制，而且前面介紹有關(guān)于徑向漸變的屬性參數(shù)都可以配合多種顏色，制作出一些更特殊的徑向漸變效果：

.circle {
  background-image: -wekbit-radial-gradient(90px circle at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
  background-image: radial-gradient(90px circle at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
}
.ellipse {
  background-image: -wekbit-radial-gradient(farthest-side ellipse at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
  background-image: radial-gradient(farthest-side ellipse at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
}	

效果如下圖所示：

CodePen的案例

上面主要介紹了漸變中的徑向漸變相關(guān)語法與基礎(chǔ)使用。接下來借此機會簡單的介紹一下重復(fù)漸變的一些基礎(chǔ)知識。

重復(fù)漸變

線性漸變和徑向漸變都屬于CSS中背景屬性中的背景圖片（background-image）屬性。有時候我們希望創(chuàng)建一種在一個元素的背景上重復(fù)的漸變“模式”。在沒有重復(fù)漸變的屬性之前，主要通過重復(fù)背景圖像（使用background-repeat）創(chuàng)建線性重復(fù)漸變，但是沒有創(chuàng)建重復(fù)的徑向漸變的類似方式。幸運的是，CSS3通過“repeating-linear-gradient”和“repeating-radial-gradient”語法提供了補救方法。可以直接實現(xiàn)重復(fù)的漸變效果。

1、重復(fù)線性漸變

我們可以使用重復(fù)線性漸變“repeating-linear-gradient”屬性來代替線性漸變“l(fā)inear-gradient”。他們采取相同的值，但色標在兩個方向上都無限重復(fù)。不過使用百分比設(shè)置色標的位置沒有多大的意義，但使用像素和其他的單位，重復(fù)線性漸變可以創(chuàng)建一些很酷的效果。例如下面的實例：

div {
   400px;
  height: 300px;
  margin: 20px auto;
  background-image: -webkit-repeating-linear-gradient(red,green 40px, orange 80px);
  background-image: repeating-linear-gradient(red,green 40px, orange 80px);		
}	

在這個例子中從開始紅色（red）向40px處的綠色（green）漸變，然后向80px處的橙色（orange）漸變。因為他是一個重復(fù)的線性漸變，它不斷以這個模式從上向下重復(fù)平鋪。如下圖所示：

效果如下圖所示：

CodePen的案例

2、重復(fù)徑向漸變

以同樣的方式，你可以使用相關(guān)的屬性創(chuàng)建重復(fù)的徑向漸變。其語法和radial-gradient類似，只是以一個徑向漸變?yōu)榛A(chǔ)進行重復(fù)漸變，如下例所示：

div {
   400px;
  height: 300px;
  margin: 20px auto;
  background-image: -webkit-radial-linear-gradient(red,green 40px, orange 80px);
  background-image: repeating-radial-gradient(red,green 40px, orange 80px);
}	

效果如下圖所示：

CodePen的案例

重復(fù)漸變制作記事本紙張效果

記事本我想大家都清楚，每張紙都有橫線條，左邊有兩條豎線從頂部延伸到底部。今天我們就一起使用重復(fù)漸變來制作這樣的紙張背景效果。我們不使用任何圖片，只使用CSS3的重復(fù)漸變在body上寫效果：

body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
  background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
  background-size: 100% 30px;
  position: relative;
}	

在這個效果中，僅重復(fù)漸變屬性是無法完成的，我們還需要CSS3的另一個屬性background-size，用來指定背景圖像的大小為100% 30px。盡管CSS3漸變顯示的是顏色，實際上他是一張圖像而不是顏色。

接下來使用偽類“:before”在紙張邊添加兩條豎線：

body:before {
  content: "";
  display: inline-block;
  height: 100%;
   4px;
  border-left: 4px double #FCA1A1;
  position: absolute;
  left: 30px;
}	

我們最終看到的效果如下圖所示：

效果如下圖所示：

CodePen的案例

瀏覽器兼容性

CSS3的漸變的語法也幾經(jīng)變化，不過讓前端設(shè)計師值得慶幸的是，直到寫本文的時候，CSS3的漸變語法在除了在Webkit的Sarfari瀏覽器和IE10以下的瀏覽器沒有得到支持之外，其他瀏覽器對漸變支持都很穩(wěn)定。

注:所列的是W3C的漸變標準語法在瀏覽器兼容性

在介紹CSS3漸變屬性的時候，就知道漸變的語法版本種類有多種，而各語法版本瀏覽器的兼容性也各有不同：

線性漸變：

超老版本瀏覽器供應(yīng)商語法：Chrome4-9，Safari4-5
老版本瀏覽器供應(yīng)商語法：IE10+、Firefox3.6+、Chrome10+、Safari5.1+、Opera11.6+
新版本瀏覽器供應(yīng)商語法：Firefox10+、Opera11.6+
W3C標準語法：IE10+、Firefox19+、Chrome26+、Opear12.1+

徑向漸變

超老版本瀏覽器供應(yīng)商語法：Chrome4-9、Safari4-5
老版本瀏覽器供應(yīng)商語法：IE10+、Firfox3.6+、Chrome10+、Safari5.1+、Opera11.6
W3C標準語法：IE10+、Firefox19+、Chrome26+、Opear12.1+

IE低版本瀏覽器兼容處理

對于IE9以前的版本，眾所周知他們并不支持CSS3漸變屬性，但我們可以使用IE的專有濾鏡來創(chuàng)建簡單的漸變。IE漸變?yōu)V鏡不支持色標、漸變角度和徑向漸變。我們能做的僅能指定水平和垂直的線性漸變，以及漸變的開始顏色和漸變的結(jié)束顏色。

如果需要為這些比較舊的瀏覽器提供漸變效果，我們可以按照下面的濾鏡語法來實現(xiàn)：

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#COLOR’,endColorstr=’#COLOR’);/*IE6和IE7*/
-ms-filter:”progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#COLOR’,endColorstr=’#COLOR’)”;/*IE8*/	

語法中的GradientType參數(shù)主要用來設(shè)置漸變的方向，其中值為“1”表示的是水平線性漸變，值為“0”表示的是垂直線性漸變。

startColorstr參數(shù)主要用來設(shè)置或檢索色彩漸變的開始顏色和透明度。其值是可一個可選值。其值“#COLOR”格式為“#AARRGGBB”。AA、RR、GG、BB為十六進制正整數(shù)，取值范圍為00到FF。RR指定紅色值，GG指定綠色值，BB指定藍色值，AA指定透明度，00表示完全透明，F(xiàn)F則表示完全不透明。超出取值范圍的值將被恢復(fù)為默認值。取值范圍為“#FF000000”到“FFFFFFFF”，默認值為“#FF0000FF”。

endColorstr參數(shù)主要用來設(shè)置或檢索色彩漸變的結(jié)束顏色和透明度。其值“#COLOR”的格式和“startColorstr”取值格式一樣。默認值為“#FF000000”。

針對其他瀏覽器的兼容方案

CSS3漸變在眾多現(xiàn)代瀏覽器中都得到較好的支持，因為他為不兼容的瀏覽器提供解決方案來說，較為容易。

使用圖片。對于那些不支持CSS3漸變特性的瀏覽器來說，最簡單的方法就是按照老方法來實現(xiàn)漸變：創(chuàng)建一個半透明的PNG漸變圖片。在使用這個解決方案的時候，必須注意一點，運用的圖片要寫在CSS漸變屬性之前，只有這樣才能讓支持漸變的瀏覽器用創(chuàng)造漸變效果的background-image屬性覆蓋指定真實圖片同名規(guī)則。
使用腳本。對于IE6-8兼容CSS3的漸變效果，還可以使用PIE腳本。對于其他瀏覽器，可以試試Weston Ruter的“用Canvas模擬CSS3漸變”的腳本。
采用純色。對于不兼容的瀏覽器，設(shè)置一個background-color色，使其在瀏覽器中顯示為純色。
使用濾鏡。對于IE9以下的瀏覽器兼容CSS3的漸變效果，還可以采用IE專有的濾鏡語法。

總結(jié)

在CSS3中漸變特性主要包括了線性漸變（linear-gradient）、徑向漸變（radial-gradient）、重復(fù)線性漸變（repeating-linear-gradient）和重復(fù)徑向漸變（repeating-radial-gradient）四種。其中線性漸變和重復(fù)線性漸變語法和使用相同，而徑向漸變和重復(fù)徑向漸變的語法與使用相同。并且詳細的介紹了各種漸變的基礎(chǔ)使用，以及瀏覽器兼容的處理方案。

從本質(zhì)上來說，漸變就是背景屬性中的background-image。瀏覽器直接將漸變生成圖片，可以直接使用CSS背景屬性來控制他們，就像對待其他圖片那樣。

到這里有關(guān)于CSS3的漸變就要先告一段落。希望這兩篇文章對大家有所幫助。如果您有更好的想法，希望能在下面的評論中與我們一起分享。

如需轉(zhuǎn)載煩請注明出處：http://www.w3cplus.com/css3/new-css3-radial-gradient.html

總結(jié)

以上是生活随笔為你收集整理的再说CSS3渐变——径向渐变的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。