CSS3新增渐变（gradients）属性，可以让两个或多个指定的颜色之间显示平稳的过渡。通过使用 CSS3 渐变（gradients）替代使用图像来实现这些效果，减少下载的事件和宽带的使用，大大提高工作效率。CSS3 定义了两种类型的渐变（gradients）：1、线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向；2、径向渐变（Radial Gradients）： 由它们的中心定义；注意：渐变（gradients）的兼容性ie10支持gradients属性（IE9 及之前的版本不支持渐变）；chrome 、Safari、Firefox、Opera 支持替代的-webkit-渐变类型、-moz-渐变类型、-o-渐变类型属性；
工具/原料
网页编辑器
浏览器
css3径向渐变radial-gradient
1、径向渐变用于表现从中心向外发散的色彩渐变效果。径向渐变基本语法：background: radial-gradient(center, shape siz髫潋啜缅e, 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>效果如图：
径向渐变的形状（shape）设置
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>效果如图：
