css3 radial-gradient()徑向漸變
徑向漸變：從起點(diǎn)到終點(diǎn)顏色從內(nèi)到外進(jìn)行圓形漸變。（從中間向外拉）。
css3的radial-gradient()徑向漸變?cè)斀?
漸變包括徑向漸變和線性漸變，關(guān)于線性漸變可以參閱css3的linear-gradient線性漸變?cè)斀庖徽鹿?jié)。
同樣在以前對(duì)于一些瀏覽器有比較老舊的語(yǔ)法，這里就不介紹了，本人介紹的是最新的關(guān)于徑向漸變的語(yǔ)法。
從漸變的名稱我們可以得到一些關(guān)于此漸變的端倪，也就是從圓心位置沿著半徑的漸變效果。
語(yǔ)法結(jié)構(gòu):
radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )參數(shù)解析:
（1）.circle:規(guī)定徑向漸變?yōu)閳A形。
（2）.ellipse:規(guī)定徑向漸變?yōu)闄E圓形。
（3）.at <position>:規(guī)定圓心的坐標(biāo)位置。
（4）.<extent-keyword>:規(guī)定鏡像漸變半徑大小（當(dāng)然也可以使用像素或者百分比，但是圓形徑向漸變不能夠使用百分比）的關(guān)鍵詞:closest-side, closest-corner, farthest-side, farthest-corner, contain 和 cover，這里暫且不介紹，后面會(huì)有詳細(xì)的介紹。
（5）.<color-stop>:規(guī)定起止顏色。
代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:radial-gradient(#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
如果沒有規(guī)定圓心的位置，那么值都是center。
圓心的位置除了使用百分比和像素之外，還有幾個(gè)關(guān)鍵字，那就是left、top、bottom和right。
代碼實(shí)例如下:
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:radial-gradient(at left bottom,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
上面的代碼規(guī)定了徑向漸變的圓心坐標(biāo)left bottom，也就是圓心在矩形的左下角。
我們也可以顯示的規(guī)定徑向漸變的形狀，代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:radial-gradient(circle ,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
上面的代碼可以規(guī)定徑向漸變的形狀為圓形。
我們也可以規(guī)定徑向漸變半徑的尺寸，代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.closest-side{
background:radial-gradient(closest-side,#ace, #f96, #1E90FF);
}
.closest-corner{
background:radial-gradient(closest-corner,#ace, #f96, #1E90FF);
}
.farthest-side{
background:radial-gradient(farthest-side,#ace, #f96, #1E90FF);
}
.farthest-corner{
background:radial-gradient(farthest-corner,#ace, #f96, #1E90FF);
}
.contain{
background:-webkit-radial-gradient(contain,#ace, #f96, #1E90FF);
}
.cover{
background:-webkit-radial-gradient(cover,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="closest-side"></div>
<div class="closest-corner"></div>
<div class="farthest-side"></div>
<div class="farthest-corner"></div>
<div class="contain"></div>
<div class="cover"></div>
</body>
</html>
特別說(shuō)明:contain和cover在當(dāng)前需要加各自瀏覽器的前綴，這里只兼容谷歌瀏覽器。
下面介紹一下關(guān)鍵字的含義:
（1）.closest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊。?
（2）.closest-corner：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角。?
（3）.farthest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊。?
（4）.farthest-corner：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角。?
（5）.contain：包含，指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的點(diǎn)。類同于closest-side。?
（6）.cover：覆蓋，指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的點(diǎn)。類同于farthest-corner。
圖示如下:
?
相信不用多說(shuō)，通過這張圖就很容易理解。
當(dāng)然我們也可以使用自定義的徑向漸變的半徑長(zhǎng)度，代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.circle{
background:radial-gradient(circle 100px,#ace, #f96, #1E90FF);
}
.ellipse{
background:radial-gradient(ellipse 100px 50px,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="ellipse"></div>
</body>
</html>
上面的代碼認(rèn)為的設(shè)置徑向漸變的半徑尺寸，注意，圓形的只需要一個(gè)參數(shù)就可以，橢圓形需要兩個(gè)，這個(gè)顯而易見。
和線性漸變同樣的道理，我們也可以規(guī)定漸變的區(qū)域，原理是一樣的，代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:250px;
height:250px;
}
.circle{
background:radial-gradient(circle,#ace 30%, #f96 80%);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
上面的代碼規(guī)定了漸變線30%-80%之間為漸變區(qū)域，其他為實(shí)色。
