1.linear-gradient:线性渐变

默认从上到下，用to指定渐变方向；

当然也可以直接写入角度，效果见下图七

后面色值可以跟多个，例如：linear-gradient(to bottom,#333,#999,#fff,#111)，效果见下图五

色值可以用RGB,RGBA,HSLA

linear-gradient( angle | to 方向 ， color-stop, color-stop，...)
color-stop = color  length | percentage

兼容写法：

background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

追加-线性重复渐变：repeating-linear-gradient,见图8

2.radial-gradient:径向渐变

形状：circle圆形，默认就是圆形, 如图二；ellipse是椭圆渐变，如图三,最好用矩形测试，在正方形里面，二者形状没啥区别！

线性渐变有区域面积比例的方法，径向渐变一样，色值后面加百分比即可，注意：比例数后面的比前面的大，否则颜色会被后面层次的覆盖遮挡,图五——美国队长盾牌

size:渐变到哪停止。closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

radial-gradient(半径 at 圆心位置, start-color, ..., last-color);

追加-径向重复渐变：repeating-radial-gradient，见图10

3.conic-gradient:圆锥渐变

conic-gradient( [ from angle ]? [ at position ]?, angular-color-stop-list )

用法：conic-gradient: color %0,color %0....;百分比可以省略，饼状图必须规定起始位置，图三有起始位置，图四没有，就又变成了色盘模式

饼状图：conic-gradient: color 0% 5%,...;从0到5%,用color填充

追加-圆锥重复渐变：repeating-conic-gradient，见图5