1、radial-gradient() 原理
CSS radial-gradient()函数创建一个由原点（渐变中心）辐射开的颜色渐变的图片，边缘形状只能为为circle或者ellipse，其结果属于<gradient>数据类型，是一种特别的<image>数据类型。
径向渐变（radial-gradient）由其中心点、边缘形状轮廓及位置、色值的结束点（color-stop）定义。
为了创建平滑的渐变，radial-gradient()函数从中心点到边缘形状以及其延伸部分，是由一系列同心轮廓构成，这个形状由有设定的边缘形状决定。
色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧（如图）。色值结束点由百分比设定时，则是相对于终点为渐变射线和边缘形状相交点的渐变半径，渐变点半径的终点位置即为100%，每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。
2、语法
radial-gradient(circle at center, red 0, blue, green 100%)
/* 从元素中心点渐变,起始色为red，渐变到blue，终止色为green*/形式语法
radial-gradient(
[ [ circle || <length> ] [ at <position> ]? , |
[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
at <position> ,
]?
<color-stop> [ , <color-stop> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
and <color-stop> = <color> [ <percentage> | <length> ]? 即
background: radial-gradient(shape extend-keyword at position, start-color, ..., last-color);值
<position>
渐变的<position> ，与background-position或者transform-origin类似。如果缺省，则默认为center。
<shape>
渐变的<shape>，圆形（渐变的形状是一个形状不变的正圆）或者椭圆形（周堆成椭圆）。默认值是椭圆。
<extend-keyword> 即size
渐变的尺寸大小。包含值如下：
| 值 | 描述 |
|---|---|
| closest-side | 指定渐变的半径长度为从圆心到离圆形最近的边（圆形）或者垂直和水平离中心最近（椭圆） |
| closest-corner | 指定渐变的半径长度为从圆形到离圆心最近的角 |
| farthest-side | 指定径向渐变的半径长度为从圆心到离圆心最远的边 |
| farthest-corner | 指定径向渐变的半径长度为从圆心到离圆心最远的角 |
<color-stop>
表示某个确定位置的固定色值，包含一个<color> 值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。百分比值为0%或者长度值为0表示渐变中心；百分比为100%表示渐变射线与边缘形状相交的点。期间的百分比值线性对应渐变射线上的点。
3、浏览器兼容性
浏览器支持
兼容写法
background: -webkit-radial-gradient(circle farthest-side at center,red,blue);/* Safari 5.1-6.0 */
background: -o-radial-gradient(circle farthest-side at center,red,blue); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(circle farthest-side at center,red,blue);/* Firefox 3.6-15 */
background: radial-gradient(circle farthest-side at center,red,blue);/* 标准语法 */4、尝试
示例1
background: radial-gradient(cyan 0%,transparent 20%,salmon 40%);
示例2
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid rgba(255,255,255,0.6);
background: radial-gradient(circle,#fff 30%,transparent 0),#00caf5;
background-size: 30px 30px;
示例3
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid rgba(255,255,255,0.6);
background: radial-gradient(circle,#fff 30%,transparent 0) 0 0,
radial-gradient(circle,#fff 30%,transparent 0) 15px 15px,
#00caf5;
background-size: 30px 30px;
示例4
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #00caf5;
box-shadow: 0 0 0 10px rgba(255,255,255,0.8) inset;
background: radial-gradient(circle,#00caf5 9px,transparent 10px),
repeating-radial-gradient(ellipse,#00caf5 0,#00caf5 4px,transparent 5px,transparent 20px,#00caf5 21px,#00caf5 25px,transparent 26px, transparent 50px),
#fff;
background-size: 30px 30px,90px 90px;
示例5
background: radial-gradient(#00caf7 4%, #00b7e0 9%, rgba(0, 187, 229, 0) 9%) 0 0,
radial-gradient(#00caf7 4%, #00b7e0 8%, rgba(0, 187, 229, 0) 10%) 50px 50px,
radial-gradient(rgba(0, 208, 255, 0.8) 20%, rgba(0, 187, 229, 0)) 50px 0,
radial-gradient(rgba(0, 208, 255, 0.8) 20%, rgba(0, 187, 229, 0)) 0 50px,
radial-gradient(rgba(0, 187, 229, 1) 35%, rgba(0, 187, 229, 0) 60%) 50px 0,
radial-gradient(rgba(0, 187, 229, 1) 35%, rgba(0, 187, 229, 0) 60%) 100px 50px,
radial-gradient(rgba(0, 177, 217, 0.7), rgba(0, 187, 229, 0)) 0 0,
radial-gradient(rgba(0, 177, 217, 0.7), rgba(0, 187, 229, 0)) 50px 50px,
linear-gradient(45deg, rgba(0, 187, 229, 0) 49%, #0092b3 50%, rgba(0, 187, 229, 0) 70%) 0 0,
linear-gradient(-45deg, rgba(0, 187, 229, 0) 49%, #0092b3 50%, rgba(0, 187, 229, 0) 70%) 0 0,
#00bbe5;
background-size: 100px 100px;
本文示例部分参考自：
http://lea.verou.me/css3patterns/#