我们都知道CSS3 的渐变属性Gradient，分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。这一次我们学习的是CSS3的径向渐变属性radial-gradient。关于径向渐变属性radial-gradient，它的语法如下所示：

语法：

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

具体示例：

background:-moz-radial-gradient(#f00, #000, #666);
background:-webkit-radial-gradient(#f00, #000, #666);
background:radial-gradient(#f00, #000, #666);

background:-moz-radial-gradient(left top,circle cover,#f00 20%,#ff0 50%,#080 80%);
background:-webkit-radial-gradient(left top,circle cover,#f00 20%,#ff0 50%,#080 80%);
取值：

<bg-position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
<shape>：circle | ellipse
<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover
<color-stop>：<color> [ <length> | <percentage> ]

<bg-position>
<percentage>①：用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①：用长度值指定径向渐变圆心的横坐标值。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center①：设置中间为径向渐变圆心的横坐标值。
right：设置右边为径向渐变圆心的横坐标值。
<percentage>②：用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②：用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top：设置顶部为径向渐变圆心的纵坐标值。
center②：设置中间为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
<shape>
circle：指定圆形的径向渐变
ellipse：指定椭圆形的径向渐变。
<size>
用来定义圆或椭圆大小的点:值说明如下
closest-side：指定径向渐变的半径长度为从圆心(center)到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心(center)到离圆心最近的角
farthest-side：指定径向渐变的半径长度为从圆心(center)到离圆心最远的边
farthest-corner：指定径向渐变的半径长度为从圆心(center)到离圆心最远的角
contain：包含，指定径向渐变的半径长度为从圆心(center)到离圆心最近的点。类同于closest-side
cover：覆盖，指定径向渐变的半径长度为从圆心(center)到离圆心最远的点。类同于farthest-corner
<percentage>：用百分比指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length>：用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<color-stop>

指定起止和结束的颜色
<color>：指定颜色。请参阅颜色值
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。

下面来看具体的例子：以下例子我们是在chrome和firefox中测试
所有demo的公用样式为： 


.com{
    width:200px;
    height:200px;
}

1、例子一：默认的<shape>和<size>

html：
<div class=”com demo”></div>
css:  

.demo{
    background:-moz-radial-gradient(#f00, #000, #666);
    background:-webkit-radial-gradient(#f00, #000, #666);
    background:radial-gradient(#f00, #000, #666);
}
效果：


 


2、例子二：

html：
<div class=”com demo1″></div>
css:  

.demo1{
    background:-moz-radial-gradient(#f00 10%, #000 30%, #666 60%);
    background:-webkit-radial-gradient(#f00 10%, #000 30%, #666 60%);
    background:radial-gradient(#f00 10%, #000 30%, #666 60%);
}
效果：


 

从这个例子我们可以看出于上面例子的区别，第二个例子和第一个例子的区别主要是：我们用百分比指定了起止色位置。 因为在径向渐变中，如果没有设置位置时，其默认颜色为均匀间隔， 这一点和css3的线性渐变是一样的，如果设置了渐变位置就会按照渐变位置去渐变， 这就是我们示例一和示例二的区别之处： 虽然圆具有相同的起止颜色， 但在示例一为默认的颜色间隔均匀的渐变，而示例二每种颜色都有特定的位置。这种写法，经过自己测试（最新版本浏览器），其实只写标准的，在opera、chrome、firefox表现是一致的。


3、例子三：加上的<bg-position>和<shape> ：指定圆形的径向渐变

html：
<div class=”com demo2″></div>
css: 

.demo2{
    width:400px;
    background:-moz-radial-gradient(left top, circle, #f00, #000, #666);
    background:-webkit-radial-gradient(left top, circle, #f00, #000, #666);
}
效果：


 

但是这种写法，经过自己测试，必须加私有前缀才可以。


4、例子四：指定椭圆形的径向渐变

html：
<div class=”com demo3″></div>
css:  

.demo3{
    width:400px;
    background:-moz-radial-gradient(left top, ellipse, blue, #f00, #1d90FF);
    background: -webkit-radial-gradient(left top, ellipse, blue, #f00, #1d90FF);
}
效果：


 

html：
<div class=”com closest-side”></div>
<div class=”com closest-corner”></div>
<div class=”com farthest-side”></div>
<div class=”com farthest-corner”></div>
<div class=”com contain”></div>
<div class=”com cover”></div>
css:  


.closest-side{
	width:400px;
	background:-moz-radial-gradient(circle closest-side,#f00,#ff0,#070);
	background:-webkit-radial-gradient(circle closest-side,#f00,#ff0,#070);
} 
.closest-corner{
	width:400px;
	background:-moz-radial-gradient(circle closest-corner,#f00,#ff0,#070);
	background:-webkit-radial-gradient(circle closest-corner,#f00,#ff0,#070);
} 
.farthest-side{
	width:400px;
	background:-moz-radial-gradient(circle farthest-side,#f00,#ff0,#070);
	background:-webkit-radial-gradient(circle farthest-side,#f00,#ff0,#070);
} 
.farthest-corner{
	width:400px;
	background:-moz-radial-gradient(circle farthest-corner,#f00,#ff0,#070);
	background:-webkit-radial-gradient(circle farthest-corner,#f00,#ff0,#070);
} 
.contain{
	width:400px;
	background:-moz-radial-gradient(circle contain,#f00,#ff0,#070);
	background:-webkit-radial-gradient(circle contain,#f00,#ff0,#070);
} 
.cover{
	width:400px;
	background:-moz-radial-gradient(circle cover,#f00,#ff0,#070);
	background:-webkit-radial-gradient(circle cover,#f00,#ff0,#070);
}
效果：


closest-side效果：（指定径向渐变的半径长度为从圆心(center)到离圆心最近的边）

 

 

closest-corner效果：（指定径向渐变的半径长度为从圆心(center)到离圆心最近的角）

 

 

farthest-side效果：（指定径向渐变的半径长度为从圆心(center)到离圆心最远的边）

 

 

farthest-corner效果：（指定径向渐变的半径长度为从圆心(center)到离圆心最远的角）

 

 

contain效果：（包含，指定径向渐变的半径长度为从圆心(center)到离圆心最近的点。类同于closest-side）

 

 

 

cover效果：（覆盖，指定径向渐变的半径长度为从圆心(center)到离圆心最远的点。类同于farthest-corner）