css3渐变之径向渐变radial-gradient

css3渐变之径向渐变radial-gradient

CSS3新增渐变（gradients）属性，可以让两个或多个指定的颜色之间显示平稳的过渡。通过使用 CSS3 渐变（gradients）替代使用图像来实现这些效果，减少下载的事件和宽带的使用，大大提高工作效率。

CSS3 定义了两种类型的渐变（gradients）：

1、线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向；

2、径向渐变（Radial Gradients）： 由它们的中心定义；

注意：渐变（gradients）的兼容性

ie10支持gradients属性（IE9 及之前的版本不支持渐变）；

chrome 、Safari、Firefox、Opera 支持替代的-webkit-渐变类型、-moz-渐变类型、-o-渐变类型属性；

径向渐变用于表现从中心向外发散的色彩渐变效果。

径向渐变基本语法：

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部分：

效果如图：

颜色结点分布不均匀的径向渐变

注意，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部分：

效果如图：

径向渐变的形状（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部分：

效果如图：

形状为圆形的径向渐变

例子：

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部分：

效果如图：

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部分：

效果如图：