再说CSS3渐变——径向渐变
CSS3徑向漸變
CSS3徑向漸變是圓形或橢圓形漸變。顏色不再沿著一條直線軸變化，而是從一個(gè)起點(diǎn)朝所有方向混合。但相對(duì)線性漸變要比徑向漸變復(fù)雜的多。
一、徑向漸變的語(yǔ)法
CSS3的徑向漸變已得到眾多瀏覽器引擎的支持，只不過(guò)其語(yǔ)法的版本根據(jù)不同的引擎瀏覽器，其語(yǔ)法也不一樣，特別是在Webkit引擎的瀏覽器下和線性漸變的語(yǔ)法類似，也有新舊之法。而在其他幾大引擎的瀏覽器，其語(yǔ)法基本類似，只是使用的前綴不同而以。特別是在2013年04年，W3C為CSS3徑向漸變推出最新的語(yǔ)法格式。接下來(lái)我們一起來(lái)看看各引擎瀏覽器下的徑向漸變語(yǔ)法。
1. Webkit引擎的CSS3徑向漸變語(yǔ)法
CSS3徑向漸變?cè)赪ebkit引擎下的語(yǔ)法和線性漸變的語(yǔ)法一樣，分為兩種，一種是老版本的語(yǔ)法，另外一種是新版本語(yǔ)法：
Webkit引擎下的老版本語(yǔ)法：
-webkit-gradient([<type>],[<position> || <angle>,]?[<shape> ||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
Webkit引擎新式語(yǔ)法
-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
Webkit引擎中的瀏覽器Chrome4－9和Safari 4－5版本支持老式的Webkit引擎徑向語(yǔ)法，Chrome10.0+和Safari5.1+支持Webkit引擎新式徑向漸變。
2. Gecko引擎的CSS3的徑向漸變語(yǔ)法
Gecko引擎的CSS3的徑向漸變和Webkit引擎新式語(yǔ)法類似，只是使用的前綴不同而以：
-moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
Gecko引擎的Firefox瀏覽器中Firefox3.6+版本支持徑向漸變。
3. Presto引擎的CSS3徑向漸變語(yǔ)法
Presto引擎的CSS3徑向漸變語(yǔ)法和Webkit引擎的新式語(yǔ)法類似，只是使用的前綴不同而以：
-o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
Presto引擎中的Opear11.6開始支持徑向漸變。
4. Trident引擎的CSS3徑向漸變語(yǔ)法
Trident引擎的瀏覽器從IE10開始支持徑向漸變語(yǔ)法，其語(yǔ)法格式與Webkit引擎的新式語(yǔ)法類似，僅不同的是其前綴不同，需要使用“-ms-”：
-ms-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
5. W3C標(biāo)準(zhǔn)徑向漸變語(yǔ)法
W3C組織從2013年04月開始給徑向語(yǔ)法推出新的語(yǔ)法規(guī)則：
radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);
不過(guò)支持徑向漸變語(yǔ)法的瀏覽器，到寫這文稿時(shí)，僅有IE10+,Firefox16+瀏覽器支持。
二、徑向漸變的屬性參數(shù)
CSS3的徑向漸變相對(duì)于線性漸變要復(fù)雜的多，屬性參數(shù)也繁多復(fù)雜。CSS3徑向變中新老語(yǔ)法中的屬性參數(shù)定義如下：
<position>：主要用來(lái)定義徑向漸變的圓心位置。此值類似于CSS中background-position屬性，用于確定元素漸變的中心位置。如果這個(gè)參數(shù)省略了，其默認(rèn)值為“center”。其值主要有以下幾種：
<length>：用長(zhǎng)度值指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)?？梢詾樨?fù)值。
<percentage>：用百分比指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)?？梢詾樨?fù)值。
left：設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值。
center：設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值或縱坐標(biāo)。
right：設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值。
top：設(shè)置頂部為徑向漸變圓心的縱標(biāo)值。
bottom：設(shè)置底部為徑向漸變圓心的縱標(biāo)值。
<shape>：主要用來(lái)定義徑向漸變的形狀。其主要包括兩個(gè)值“circle”和“ellipse”：
circle：如果<size>和<length>大小相等，那么徑向漸變是一個(gè)圓形，也就是用來(lái)指定圓形的徑向漸變
ellipse：如果<size>和<length>大小不相等，那么徑向漸變是一個(gè)橢圓形，也就是用來(lái)指定橢圓形的徑向漸變。
<size>：主要用來(lái)確定徑向漸變的結(jié)束形狀大小。如果省略了，其默認(rèn)值為“farthest-corner”?？梢越o其顯式的設(shè)置一些關(guān)鍵詞，主要有：
closest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊；
farthest-corner：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角；
如果<shape>設(shè)置了為“circle”或者省略，<size>可能顯式設(shè)置為<length>。表示的是用長(zhǎng)度值指定徑向漸變的橫向或縱向直徑長(zhǎng)度，并根據(jù)橫向和縱向的直徑來(lái)確定徑向漸變的形狀是圓或者是橢圓。此值不不能負(fù)值。
如果<shape>設(shè)置了“ellipse”或者省略，<size>可能顯式設(shè)置為［<length>|<percentage>］。主要用來(lái)設(shè)置橢圓的大小。第一個(gè)值代表橢圓的水平半徑，第二個(gè)值代表垂直半徑。這兩個(gè)值除了使用<length>定義大小之外還可以使用<percentage>來(lái)定義這兩半徑大小。使用<percentage>定義值是相對(duì)于徑向漸變?nèi)萜鞯某叽?。同樣不能為?fù)值。
<color-stop>：徑向漸變線上的停止顏色，類似于線性漸變的<color-stop>。徑向漸變的為漸變線從中心點(diǎn)向右擴(kuò)散。其中0%表示漸變線的起始點(diǎn)，100%表示漸變線的與漸變?nèi)萜飨嘟唤Y(jié)束的位置。而且其顏色停止可以定義一個(gè)負(fù)值。
三、徑向漸變的基本用法
雖然徑向漸變要比線性漸變更為復(fù)雜，只要了解了其基本語(yǔ)法以及相關(guān)屬性參數(shù)的作用，我想并不會(huì)需要花太多的時(shí)間去適應(yīng)。接下來(lái)，我們通過(guò)實(shí)戰(zhàn)來(lái)加強(qiáng)徑向漸變的使用。下面的所有例子我們都在一個(gè)寬度為400像素，高為300像素的容器中實(shí)現(xiàn)。
先來(lái)看一個(gè)最簡(jiǎn)單的徑向漸變，圓心都是容器正中間，從“hsla(120,70%,60%,.9)”顏色向“hsla(360,60%,60%,.9)”顏色實(shí)現(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的案例
如果你想制作一個(gè)圓形漸變，而不是一個(gè)橢圓形漸變，只需要添加一個(gè)關(guān)鍵詞“circle”，我們?cè)谇袄幕A(chǔ)上添加一個(gè)關(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的案例
正如你所看到的，圓形的漸變是一個(gè)特殊的橢圓漸變，水平半徑和垂直半徑具有相同的長(zhǎng)度值。
既然圓形漸變是橢圓漸變的一種特殊情況，如果我們漸變主要半徑（水平半徑）和次要半徑（垂直半徑）不相同時(shí)就是一個(gè)橢圓形漸變。
正如上面所言，主要半徑和次要半徑不相等時(shí)，制作的徑向漸變是橢圓形漸變，在制作橢圓形漸變，可以使用關(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ù)制作徑向漸變效果，通過(guò)制作同心圓，主要半徑和次要半徑來(lái)決定徑向漸變的形狀。例如，圓心位置都在“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的案例
上圖實(shí)現(xiàn)的是內(nèi)徑小于外徑制作的徑向漸變效果，接著我們來(lái)看看圓心相同，內(nèi)外半徑大小相同實(shí)現(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的案例
上圖效果告訴我們，當(dāng)內(nèi)外圓的圓心相同，并且主要半徑和次要半徑相等時(shí)，制作的漸變效果就等同于制作了一個(gè)圓形徑向漸變效果。接下來(lái)我們?cè)诳匆粋€(gè)實(shí)例，圓心相同，主要半徑大于次要的半徑制作的徑向漸變：
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>值，其具體使用細(xì)節(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的案例
除了上述方法能實(shí)現(xiàn)一些簡(jiǎn)的徑向漸變效果之外，還可以使用漸變形狀配合圓心定位。主要使用“at”加上關(guān)鍵詞來(lái)定義徑向漸變中心位置。徑向漸變中心位置類似于background-position 屬性，可以使用一些關(guān)鍵詞來(lái)定義：
A）、center：設(shè)置徑向漸變中心位置在容器的中心點(diǎn)，相當(dāng)于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è)置徑向圓心點(diǎn)在容器的頂邊中心點(diǎn)處，與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è)置徑向漸變圓心點(diǎn)在容器右邊中心點(diǎn)處，與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è)置徑向漸變圓心點(diǎn)在容器底邊中心點(diǎn)處，剛好與“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è)置徑向漸變圓心點(diǎn)在容器左邊中心點(diǎn)處，剛好與“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è)置徑向漸變圓心點(diǎn)在容器的左角頂點(diǎn)處，與關(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è)置徑向漸變圓心點(diǎn)在容器右角頂點(diǎn)處，與“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è)置徑向漸變的圓心點(diǎn)在容器右下角頂點(diǎn)處，與關(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è)置徑向漸變圓心在容器左下角頂點(diǎn)處，與關(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的案例
綜合上面的實(shí)例以及對(duì)應(yīng)的效果，大家在理解徑向漸變使用關(guān)鍵詞設(shè)置徑向漸變圓心位置，可以把其當(dāng)作元素背景中的background-position屬性來(lái)理解。用來(lái)設(shè)置元素徑向漸變圓心的所有可用關(guān)鍵詞對(duì)照的位置關(guān)系，可以瀏覽下圖：
前面分別給大家介紹了使用<size> 、漸變類型關(guān)鍵詞以及漸變類型配合關(guān)鍵詞制作的徑向漸變效果。除了上述方法可以制作一些徑向漸變效果之外，還可以使用<size>和漸變類型以及圓心關(guān)鍵詞結(jié)合制作一些徑向漸變效果。
當(dāng)給元素顯式的設(shè)置了徑向漸變的大小，這兩個(gè)值設(shè)置了徑向漸變的水平和垂直半徑。如果一個(gè)徑向漸變包含徑向漸變類型“circle”和一個(gè)單一的大小值，您就可以實(shí)現(xiàn)一個(gè)圓形的徑向漸變。如果一個(gè)徑向漸變包含了徑向漸變類型“ellipse”和兩個(gè)值，或者只是兩個(gè)值，您就可以實(shí)現(xiàn)一個(gè)橢圓形的徑向漸變。在設(shè)置徑向半徑大小值時(shí)，您可以使用任何CSS的單位長(zhǎng)度值都有效。例如：
A)、使用20px circle制作一個(gè)徑向半徑為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)鍵詞制作一個(gè)圓形徑向漸變，其半徑大小為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的案例
除了通過(guò)<size>給徑向漸變顯式的設(shè)置大小之外，我們還可以通過(guò)關(guān)鍵詞隱式的為徑向漸變?cè)O(shè)置大小。其中的每個(gè)關(guān)鍵詞指定徑向漸變大小的算法。也就是通過(guò)圓心指向徑向漸變的邊或者角來(lái)確定徑向漸變的大小。不過(guò)在圓形和橢圓形的徑向漸變之中，他們算出來(lái)的大小略有不同。雖然最初看上去似乎有些復(fù)雜，一旦您理解了這些關(guān)鍵詞的意義，一切就變得簡(jiǎn)單。
當(dāng)使用closest-side來(lái)設(shè)置一個(gè)圓形徑向漸變大小，主要是通過(guò)徑向邊緣與離元素最近邊緣的切點(diǎn)到圓心之間的直線距離大決定。如下圖所示：
當(dāng)使用closest-side來(lái)設(shè)置橢圓形徑向漸變大小，主要通過(guò)徑向漸變水平與垂直邊緣與離最近邊緣切點(diǎn)到圓心的直線距離大小決定。如下圖所示：
當(dāng)使用closest-corner來(lái)設(shè)置圓形徑向漸變大小，主要通過(guò)漸變邊緣與到元素最近頂角交接點(diǎn)到圓心直線距離決定，如下圖所示：
當(dāng)使用“closest-corner”來(lái)設(shè)置橢圓形徑向漸變大小，主要通過(guò)徑向漸變邊緣與到元素最近頂角交接點(diǎn)到圓心的直線距離大小決定，如下圖所示：
當(dāng)使用“farthest-side”來(lái)設(shè)置圓形徑向漸變大小，主要通過(guò)徑向漸變邊緣與元素最遠(yuǎn)邊的切點(diǎn)到圓心的直線距離大小決定，如下圖所示：
當(dāng)使用“farthest-side”來(lái)設(shè)置橢圓形徑向漸變大小，主要通過(guò)徑向漸變與元素最遠(yuǎn)邊切點(diǎn)到圓心的直線距離大小決定。如下圖所示：
當(dāng)使用“farthest-corner”來(lái)設(shè)置圓形徑漸變的大小，主要通過(guò)徑向漸變邊緣與元素最遠(yuǎn)頂角交點(diǎn)到圓心的直線距離決定，如下圖所示：
當(dāng)使用“farthest-corner”來(lái)設(shè)置橢圓形徑向漸變，主要通過(guò)漸變邊緣與元素最遠(yuǎn)頂點(diǎn)的交接點(diǎn)到圓心的直線距離決定，如下圖所示：
為了更好的說(shuō)明這些關(guān)鍵詞的使用，下面的實(shí)例中，我們將圓心定義在“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è)置徑向漸的顏色，前面我們演示的都是簡(jiǎn)單的兩個(gè)顏色制作的徑向漸變，接下來(lái)通過(guò)<color-stop>屬性參數(shù)來(lái)設(shè)置徑向漸變的顏色。
下面我們?cè)谇懊娴幕A(chǔ)上增加一個(gè)顏色，實(shí)現(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的案例
上面的示例是一個(gè)簡(jiǎn)單的三色徑向漸變，只是通過(guò)設(shè)置三個(gè)顏色，從容器的中心向外由紅色（red）、綠色（green）到藍(lán)色(blue)。這可以說(shuō)是最簡(jiǎn)單的了多色徑向漸變了，除此之外，我們還可以給每個(gè)顏色設(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的案例
在徑向漸變中的漸變顏色，我們可以使用任何表示顏色的格式，并且確定漸變顏色的位置可以使用任何表示長(zhǎng)度的單位值，同時(shí)顏色數(shù)量不會(huì)做任何限制，而且前面介紹有關(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)語(yǔ)法與基礎(chǔ)使用。接下來(lái)借此機(jī)會(huì)簡(jiǎn)單的介紹一下重復(fù)漸變的一些基礎(chǔ)知識(shí)。
重復(fù)漸變
線性漸變和徑向漸變都屬于CSS中背景屬性中的背景圖片（background-image）屬性。有時(shí)候我們希望創(chuàng)建一種在一個(gè)元素的背景上重復(fù)的漸變“模式”。在沒(méi)有重復(fù)漸變的屬性之前，主要通過(guò)重復(fù)背景圖像（使用background-repeat）創(chuàng)建線性重復(fù)漸變，但是沒(méi)有創(chuàng)建重復(fù)的徑向漸變的類似方式。幸運(yùn)的是，CSS3通過(guò)“repeating-linear-gradient”和“repeating-radial-gradient”語(yǔ)法提供了補(bǔ)救方法。可以直接實(shí)現(xiàn)重復(fù)的漸變效果。
1、重復(fù)線性漸變
我們可以使用重復(fù)線性漸變“repeating-linear-gradient”屬性來(lái)代替線性漸變“l(fā)inear-gradient”。他們采取相同的值，但色標(biāo)在兩個(gè)方向上都無(wú)限重復(fù)。不過(guò)使用百分比設(shè)置色標(biāo)的位置沒(méi)有多大的意義，但使用像素和其他的單位，重復(fù)線性漸變可以創(chuàng)建一些很酷的效果。例如下面的實(shí)例：
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);
}
在這個(gè)例子中從開始紅色（red）向40px處的綠色（green）漸變，然后向80px處的橙色（orange）漸變。因?yàn)樗且粋€(gè)重復(fù)的線性漸變，它不斷以這個(gè)模式從上向下重復(fù)平鋪。如下圖所示：
效果如下圖所示：
CodePen的案例
2、重復(fù)徑向漸變
以同樣的方式，你可以使用相關(guān)的屬性創(chuàng)建重復(fù)的徑向漸變。其語(yǔ)法和radial-gradient類似，只是以一個(gè)徑向漸變?yōu)榛A(chǔ)進(jìn)行重復(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ù)漸變來(lái)制作這樣的紙張背景效果。我們不使用任何圖片，只使用CSS3的重復(fù)漸變?cè)赽ody上寫效果：
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;
}
在這個(gè)效果中，僅重復(fù)漸變屬性是無(wú)法完成的，我們還需要CSS3的另一個(gè)屬性background-size，用來(lái)指定背景圖像的大小為100% 30px。盡管CSS3漸變顯示的是顏色，實(shí)際上他是一張圖像而不是顏色。
接下來(lái)使用偽類“:before”在紙張邊添加兩條豎線：
body:before {
content: "";
display: inline-block;
height: 100%;
4px;
border-left: 4px double #FCA1A1;
position: absolute;
left: 30px;
}
我們最終看到的效果如下圖所示：
效果如下圖所示：
CodePen的案例
瀏覽器兼容性
CSS3的漸變的語(yǔ)法也幾經(jīng)變化，不過(guò)讓前端設(shè)計(jì)師值得慶幸的是，直到寫本文的時(shí)候，CSS3的漸變語(yǔ)法在除了在Webkit的Sarfari瀏覽器和IE10以下的瀏覽器沒(méi)有得到支持之外，其他瀏覽器對(duì)漸變支持都很穩(wěn)定。
注:所列的是W3C的漸變標(biāo)準(zhǔn)語(yǔ)法在瀏覽器兼容性
在介紹CSS3漸變屬性的時(shí)候，就知道漸變的語(yǔ)法版本種類有多種，而各語(yǔ)法版本瀏覽器的兼容性也各有不同：
線性漸變：
超老版本瀏覽器供應(yīng)商語(yǔ)法：Chrome4-9，Safari4-5
老版本瀏覽器供應(yīng)商語(yǔ)法：IE10+、Firefox3.6+、Chrome10+、Safari5.1+、Opera11.6+
新版本瀏覽器供應(yīng)商語(yǔ)法：Firefox10+、Opera11.6+
W3C標(biāo)準(zhǔn)語(yǔ)法：IE10+、Firefox19+、Chrome26+、Opear12.1+
徑向漸變
超老版本瀏覽器供應(yīng)商語(yǔ)法：Chrome4-9、Safari4-5
老版本瀏覽器供應(yīng)商語(yǔ)法：IE10+、Firfox3.6+、Chrome10+、Safari5.1+、Opera11.6
W3C標(biāo)準(zhǔn)語(yǔ)法：IE10+、Firefox19+、Chrome26+、Opear12.1+
IE低版本瀏覽器兼容處理
對(duì)于IE9以前的版本，眾所周知他們并不支持CSS3漸變屬性，但我們可以使用IE的專有濾鏡來(lái)創(chuàng)建簡(jiǎn)單的漸變。IE漸變?yōu)V鏡不支持色標(biāo)、漸變角度和徑向漸變。我們能做的僅能指定水平和垂直的線性漸變，以及漸變的開始顏色和漸變的結(jié)束顏色。
如果需要為這些比較舊的瀏覽器提供漸變效果，我們可以按照下面的濾鏡語(yǔ)法來(lái)實(shí)現(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*/
語(yǔ)法中的GradientType參數(shù)主要用來(lái)設(shè)置漸變的方向，其中值為“1”表示的是水平線性漸變，值為“0”表示的是垂直線性漸變。
startColorstr參數(shù)主要用來(lái)設(shè)置或檢索色彩漸變的開始顏色和透明度。其值是可一個(gè)可選值。其值“#COLOR”格式為“#AARRGGBB”。AA、RR、GG、BB為十六進(jìn)制正整數(shù)，取值范圍為00到FF。RR指定紅色值，GG指定綠色值，BB指定藍(lán)色值，AA指定透明度，00表示完全透明，F(xiàn)F則表示完全不透明。超出取值范圍的值將被恢復(fù)為默認(rèn)值。取值范圍為“#FF000000”到“FFFFFFFF”，默認(rèn)值為“#FF0000FF”。
endColorstr參數(shù)主要用來(lái)設(shè)置或檢索色彩漸變的結(jié)束顏色和透明度。其值“#COLOR”的格式和“startColorstr”取值格式一樣。默認(rèn)值為“#FF000000”。
針對(duì)其他瀏覽器的兼容方案
CSS3漸變?cè)诒姸喱F(xiàn)代瀏覽器中都得到較好的支持，因?yàn)樗麨椴患嫒莸臑g覽器提供解決方案來(lái)說(shuō)，較為容易。
使用圖片。對(duì)于那些不支持CSS3漸變特性的瀏覽器來(lái)說(shuō)，最簡(jiǎn)單的方法就是按照老方法來(lái)實(shí)現(xiàn)漸變：創(chuàng)建一個(gè)半透明的PNG漸變圖片。在使用這個(gè)解決方案的時(shí)候，必須注意一點(diǎn)，運(yùn)用的圖片要寫在CSS漸變屬性之前，只有這樣才能讓支持漸變的瀏覽器用創(chuàng)造漸變效果的background-image屬性覆蓋指定真實(shí)圖片同名規(guī)則。
使用腳本。對(duì)于IE6-8兼容CSS3的漸變效果，還可以使用PIE腳本。對(duì)于其他瀏覽器，可以試試Weston Ruter的“用Canvas模擬CSS3漸變”的腳本。
采用純色。對(duì)于不兼容的瀏覽器，設(shè)置一個(gè)background-color色，使其在瀏覽器中顯示為純色。
使用濾鏡。對(duì)于IE9以下的瀏覽器兼容CSS3的漸變效果，還可以采用IE專有的濾鏡語(yǔ)法。
總結(jié)
在CSS3中漸變特性主要包括了線性漸變（linear-gradient）、徑向漸變（radial-gradient）、重復(fù)線性漸變（repeating-linear-gradient）和重復(fù)徑向漸變（repeating-radial-gradient）四種。其中線性漸變和重復(fù)線性漸變語(yǔ)法和使用相同，而徑向漸變和重復(fù)徑向漸變的語(yǔ)法與使用相同。并且詳細(xì)的介紹了各種漸變的基礎(chǔ)使用，以及瀏覽器兼容的處理方案。
從本質(zhì)上來(lái)說(shuō)，漸變就是背景屬性中的background-image。瀏覽器直接將漸變生成圖片，可以直接使用CSS背景屬性來(lái)控制他們，就像對(duì)待其他圖片那樣。
到這里有關(guān)于CSS3的漸變就要先告一段落。希望這兩篇文章對(duì)大家有所幫助。如果您有更好的想法，希望能在下面的評(píng)論中與我們一起分享。
如需轉(zhuǎn)載煩請(qǐng)注明出處：http://www.w3cplus.com/css3/new-css3-radial-gradient.html
總結(jié)
以上是生活随笔為你收集整理的再说CSS3渐变——径向渐变的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： POJ 2054 Color a Tre
- 下一篇： 数据库服务器有哪些功能