css3渐变之径向渐变radial-gradient
1、径向渐变用于表现从中心向外发散的色彩渐变效果。
径向渐变基本语法：
background: radial-gradient(center, shape size, start-color, ..., last-color);
径向渐变由它的中心定义，创建一个径向渐变，必须至少定义两种颜色结点；
center：渐变的中心的位置
shape：形状（圆形或椭圆形）
size：大小。
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）
例子：
css部分：
.radial1{
margin:50px auto;
width:200px;
height:200px;
background:-webkit-radial-gradient(sandybrown,orangered);/* Safari 5.1 - 6.0 */
background:-moz-radial-gradient(sandybrown,orangered);/* Firefox 3.6 - 15 */
background:-o-radial-gradient(sandybrown,orangered);/* Opera 11.6 - 12.0 */
background:radial-gradient(sandybrown,orangered);/* 标准 */
color:#fff;
text-align: center;
line-height: 200px;
/*border-radius: 50%;*/
}
html部分：
<div class="radial1">径向渐变示例</div>
效果如图：
2、颜色结点分布不均匀的径向渐变
注意，radial-gradient的兼容性，具体代码如下：
例子：
css部分：
.radial2{
margin:50px auto;
width:200px;
height:200px;
background:-webkit-radial-gradient(sandybrown 10%,darkslateblue 30%,darkcyan 60%);/*webkit核心浏览器兼容代码 */
background:-moz-radial-gradient(sandybrown 10%,darkslateblue 30%,darkcyan 60%);/* Firefox 浏览器兼容代码 */
background:-o-radial-gradient(sandybrown 10%,darkslateblue 30%,darkcyan 60%);/* Opera 浏览器兼容代码 */
background:radial-gradient(sandybrown 10%,darkslateblue 30%,darkcyan 60%);/* 标准 */
color:#fff;
text-align: center;
}
html部分：
<div class="radial2">颜色结点分布不均匀的径向渐变</div>
效果如图：
1、径向渐变的形状（shape）设置
shape 参数定义了形状，它可以是值 circle 或 ellipse。
其中，circle 表示圆形；ellipse 表示椭圆形；默认值是 ellipse。
例子：
形状为椭圆形的径向渐变
css部分：
.radial4{
margin:50px auto;
width:300px;
height:200px;
background:-webkit-radial-gradient(ellipse,red,blue,green);
background:-moz-radial-gradient(ellipse,red,blue,green);
background:-o-radial-gradient(ellipse,red,blue,green);
background:radial-gradient(ellipse,red,blue,green);
color:#fff;
text-align: center;
}
html部分：
<div class="radial4">形状为椭圆形的径向渐变</div>
效果如图：
2、形状为圆形的径向渐变
例子：
css部分：
.radial3{
margin:50px auto;
width:300px;
height:200px;
background:-webkit-radial-gradient(circle,red,blue,green);
background:-moz-radial-gradient(circle,red,blue,green);
background:-o-radial-gradient(circle,red,blue,green);
background:radial-gradient(circle,red,blue,green);
color:#fff;
text-align: center;
}
html部分：
<div class="radial3">形状为圆形的径向渐变</div>
效果如图：
1、size 参数定义了渐变的大小。它可以是以下四个值：
closest-side：径向渐变的半径长度为从圆心到离圆心最近的边
farthest-side：径向渐变的半径长度为从圆心到离圆心最远的边
closest-corner：径向渐变的半径长度为从圆心到离圆心最近的角
farthest-corner：径向渐变的半径长度为从圆心到离圆心最远的角
例子：
css部分：
.size1{
margin:50px auto;
width:200px;
height:200px;
background:-webkit-radial-gradient(60% 55%, closest-side,red,yellow,green,blue);/*webkit核心浏览器兼容代码 */
background:-moz-radial-gradient(60% 55%,closest-side,red,yellow,green,blue);/* Firefox 浏览器兼容代码 */
background:-o-radial-gradient(60% 55%,closest-side,red,yellow,green,blue);/* Opera 浏览器兼容代码 */
background:radial-gradient(60% 55%, closest-side,red,yellow,green,blue);/* 标准 */
color:#fff;
text-align: center;
}
.size2{
margin:50px auto;
width:200px;
height:200px;
background:-webkit-radial-gradient(60% 55%, farthest-side,red,yellow,green,blue);/*webkit核心浏览器兼容代码 */
background:-moz-radial-gradient(60% 55%,farthest-side,red,yellow,green,blue);/* Firefox 浏览器兼容代码 */
background:-o-radial-gradient(60% 55%,farthest-side,red,yellow,green,blue);/* Opera 浏览器兼容代码 */
background:radial-gradient(60% 55%, farthest-side,red,yellow,green,blue);/* 标准 */
color:#fff;
text-align: center;
}
.size3{
margin:50px auto;
width:200px;
height:200px;
background:-webkit-radial-gradient(60% 55%, closest-corner,red,yellow,green,blue);/*webkit核心浏览器兼容代码 */
background:-moz-radial-gradient(60% 55%,closest-corner,red,yellow,green,blue);/* Firefox 浏览器兼容代码 */
background:-o-radial-gradient(60% 55%,closest-corner,red,yellow,green,blue);/* Opera 浏览器兼容代码 */
background:radial-gradient(60% 55%, closest-corner,red,yellow,green,blue);/* 标准 */
color:#fff;
text-align: center;
}
.size4{
margin:50px auto;
width:200px;
height:200px;
background:-webkit-radial-gradient(60% 55%, farthest-corner,red,yellow,green,blue);/*webkit核心浏览器兼容代码 */
background:-moz-radial-gradient(60% 55%,farthest-corner,red,yellow,green,blue);/* Firefox 浏览器兼容代码 */
background:-o-radial-gradient(60% 55%,farthest-corner,red,yellow,green,blue);/* Opera 浏览器兼容代码 */
background:radial-gradient(60% 55%, farthest-corner,red,yellow,green,blue);/* 标准 */
color:#fff;
text-align: center;
}
html部分：
<div class="size1">closest-side</div>
<div class="size2">farthest-side</div>
<div class="size3">closest-corner</div>
<div class="size4">farthest-corner</div>
效果如图：
