css3渐变之径向渐变radial-gradient

css3径向渐变radial-gradient

• 01

  径向渐变用于表现从中心向外发散的色彩渐变效果。 径向渐变基本语法： 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> 效果如图：

  

• 02

  颜色结点分布不均匀的径向渐变 注意，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）设置

• 01

  径向渐变的形状（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> 效果如图：

  

• 02

  形状为圆形的径向渐变 例子： 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> 效果如图：

  

径向渐变不同尺寸大小关键字的使用

• 01

  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> 效果如图：