CSS3径向渐变radial-gradient

径向渐变radial-gradient:
线性渐变linear-gradient是从一个方向到另一个方向的颜色渐变效果，而径向渐变radial-gradient是从一个点向四周颜色渐变的效果。
语法：

background：radial-gradient（center中心坐标，shape形状，size大小，颜色......)

center：渐变起点的位置，可以为百分比，默认是图形的正中心。
shape：渐变的形状，ellipse表示椭圆（默认值），circle表示圆形，如果图形是正方形，那么ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，有四个值：
closest-side：最近的边；farthest-side：最远的边；closest-corner：最近的角；farthest-corner：最远的角
多颜色点均匀分布
以中心为起点，到最远的角（farthest-corner），从red到green、blue的均匀渐变，效果如下图：

代码片段如下：

div{backgroung:-webkit-radial-gradient(center,farthest-corner,red,green,blue);}

多颜色节点不均匀分布
代码片段如下：

div{backgroung:radial-gradient(red 5%, green 15%, blue 60% );}

设置渐变形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
代码片段如下：

div{backgroung:radial-gradient(circle,red,yellow,green);}
div{backgroung:radial-gradient(ellipse,red,yellow,green);}

不同尺寸的渐变
closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角
代码片段如下：

div{backgroung:radial-gradient(60% 40%，closest-side,blue,green,yellow,black);}
div{backgroung:radial-gradient(60% 40%，farthest-side,blue,green,yellow,black);}
div{backgroung:radial-gradient(60% 40%，closest-corner,blue,green,yellow,black);}
div{backgroung:radial-gradient(60% 40%，farthest-corner,blue,green,yellow,black);}

重复性径向渐变
background:repeating-radial-gradient() 重复径向渐变