CSS3徑向漸變，是一種從起點到終點顏色從內到外進行圓形漸變（從中間向外拉，像圓一樣）。CSS3徑向漸變是圓形或橢圓形漸變，顏色不再沿著一條直線漸變，而是從一個起點向所有方向漸變。
這一節建議使用chrome浏覽器學習，這樣站長不用寫一大堆兼容代碼。因為太多的兼容代碼也不利於新手流暢的學習思路。不過實際開發中，兼容代碼大家還是得做到位。
語法：
background:radial-gradient(position ,shape size,start-color,stop-color)
說明：
position：定義圓心位置；
shape size：由2個參數組成，shape定義形狀（圓形或橢圓），size定義大小；
start-color：定義開始顏色值；
stop-color：定義結束顏色值；
position、shape size都是可選參數，如果省略，則表示該項參數采用默認值。大家要非常清楚這一點，不然這一節的代碼你有可能看不懂。
start-color和stop-color為必選參數，並且徑向漸變可以有多個顏色值。
position用於定義徑向漸變的圓心位置，屬性值跟background-position屬性值相似，也有2種情況：（1）長度值，如px、em或百分比等；（2）關鍵字。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3徑向漸變</title>
<style type="text/css">
/*設置div公共樣式*/
div
{
width:200px;
height:150px;
line-height:150px;
text-align:center;
color:white;
}
#div1
{
margin-bottom:10px;
background:-webkit-radial-gradient(orange,blue);
}
#div2
{
background:-webkit-radial-gradient(top,orange,blue);
}
</style>
</head>
<body>
<div id="div1">默認值（center）</div>
<div id="div2">top</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
大家可以嘗試改變圓心位置的屬性值，看看實際效果是如何？
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3徑向漸變</title>
<style type="text/css">
/*設置div公共樣式*/
div
{
width:200px;
height:150px;
line-height:150px;
text-align:center;
color:white;
}
#div1
{
margin-bottom:10px;
background:-webkit-radial-gradient(orange,blue);
}
#div2
{
background:-webkit-radial-gradient(circle,orange,blue);
}
</style>
</head>
<body>
<div id="div1">默認值（ellipse）</div>
<div id="div2">circle</div>
</body>
</html>
在浏覽器預覽效果如下：
size主要用於定義徑向漸變的結束形狀大小。
從定義不知道咋回事？這樣不是你的錯，來個例子先吧。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3徑向漸變</title>
<style type="text/css">
/*設置div公共樣式*/
div
{
width:120px;
height:80px;
line-height:80px;
text-align:center;
color:white;
}
div+div
{
margin-top:10px;
}
#div1{background:-webkit-radial-gradient(circle closest-side,orange,blue);}
#div2{background:-webkit-radial-gradient(circle closest-corner,orange,blue);}
#div3{background:-webkit-radial-gradient(circle farthest-side,orange,blue);}
#div4{background:-webkit-radial-gradient(circle farthest-corner,orange,blue);}
</style>
</head>
<body>
<div id="div1">closest-side</div>
<div id="div2">closest-corner</div>
<div id="div3">farthest-side</div>
<div id="div4">farthest-corner
</div>
</body>
</html>
在浏覽器預覽效果如下：
參數start-color用於定義開始顏色，參數stop-color用於定義結束顏色。顏色可以為關鍵詞、十六進制顏色值、RGBA顏色值等。
徑向漸變也接受一個顏色值列表，用於同時定義多種顏色的徑向漸變。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3徑向漸變</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:-webkit-radial-gradient(red,orange,yellow,green,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
默認情況下，徑向漸變顏色節點是均勻分布的，不過我們也可以為每一種顏色添加百分比，來使得各個顏色節點不均勻分布。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3徑向漸變</title>
<style type="text/css">
div
{
width:200px;
height:150px;
line-height:150px;
text-align:center;
color:white;
}
#div1{background:-webkit-radial-gradient(red,green,blue);margin-bottom:10px;}
#div2{background:-webkit-radial-gradient(red 5%,green 30%,blue 60%);}
</style>
</head>
<body>
<div id="div1">顏色均勻分布</div>
<div id="div2">顏色不均勻分布</div>
</body>
</html>
在浏覽器預覽效果如下：