关于CSS3渐变使用方法

一、线性渐变

原先各浏览器的写法标准是：
－webkit-linear-gradient ( top , #f00 , #00f ) ; // 从上边开始

－o-linear-gradient ( top , #f00 , #00f ) ;

－moz-linear-gradient ( top , #f00 , #00f ) ;

或者使用角度：
－webkit-linear-gradient ( -90deg , #f00 , #00f ) ; // 从上到下

－o-linear-gradient ( -90deg , #f00 , #00f ) ;

－moz-linear-gradient ( -90deg , #f00 , #00f ) ;
第一个参数表示起点 位置 [默认从上到下：top | -90deg ] ，
角度为 0 表示从x轴正轴方向 逆时针计算
后面的参数表示颜色的顺序，可2个及以上

标准写法：
linear-gradient ( to bottom, #f00 , #00f ) // 到下边结束
linear-gradient ( 180 deg , #f00 , #00f ) // 从上到下
第一个参数表示 到终点 的位置 [默认从上到下：to bottom | 180deg ]，
角度为 0 表示从 y轴正轴方向 顺时针计算

后面的参数表示颜色的顺序，可2个及以上

特别的：[关于均匀分布]
每个颜色值后加空格再加个百分比表示该颜色的点位，起点是0%，终点为100%
百分比值必须按从小到大分配。
如果想构造特殊效果：
background: linear-gradient(to right, red 20%,yellow 19%,yellow 40%,blue 39%,blue 60%, green 59%,green 80%, blue 79%,blue 100%);

上述样式有清晰分界线：分段叠加渐变，最开始的在最上面[这样容易理解]
举例：
构造 red 占20%宽，yellow占40%宽，blue占30%宽 green占10% 分界段：
思路：

先规定好终点 red 20% , yellow 60% , blue 90% , green 100%，
再规定第二个颜色开始的每个颜色的起点，只要百分比比上一个小即可。
如下结果：重复yellow 19<20,重复blue 59<60 重复green 89小于90

background: linear-gradient( to right, red 20%, yellow 19%, yellow 60%, blue 59%, blue 90%, green 89%, green 100%）

关于重复线性渐变 [ 标准语法 ]

background : repeating-linear-gradient (to bottom , rgba() , rgba() , ... )

二、径向渐变 [ 浏览器暂不支持径向渐变的标准写法 ]

background: radial-gradient(位置 , 形状 尺寸 , start-color , ... , last-color );
位置：center [默认值] | 30% 10% | left top

形状：ellipse [默认值] | circle

尺寸：closest-side | farthest-side | closest-corner | farthest-corner [默认值]
注意：形状和尺寸之间用空格分隔，不能用逗号分隔，否则不显示

原先各浏览器的写法标准是：
－webkit-radial-gradient ( #f00 , #00f ) ; // 支持Chrome,Firefox

－o-radial-gradient ( #f00 , #00f ) ;

－moz-radial-gradient ( #f00 , #00f ) ; // 仅支持Firefox

radial-gradient ( #f00 , #00f ) ; // 所有浏览器均不支持标准写法

例如：
div#grad {
height: 50px;
width: 150px;
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black);
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black);
background: -webkit-radial-gradient(left top,circle farthest-corner,blue,green,yellow,black);
background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /*无效*/
}

同理：关于重复径向渐变 [ 标准语法 ]

background : repeating-radial-gradient (to bottom , rgba() , rgba() , ... )