css3学习 理论之渐变
下面来一起学习下css3的渐变，激动人心啊，终于可以不用图片来做渐变背景了。。
webkit和gecko引擎对于css3的渐变实现有一定的差异，只能分开学习。
一、webkit
-webkit-gradient(<type>, <point>[, <radius>]?, <point>[, <radius>]? [,stop]*)
参数说明：
<type>：定义渐变类型，包括线性渐变（linear）和径向渐变（radial）。
<point>：定义渐变起始点和结束点坐标，可以是数值、百分比和关键字。
<radius>：当定义径向渐变时，用来设置径向渐变的长度，数值。
<stop>：定义渐变色和步长。包括三个类型值，from(color value),to(color value),color-stop(value, color value)第一个参数数值或者百分值，取值为0~1。
例如：
1、线性渐变：background:-webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(0.5, green)); background:-webkit-gradient(linear, left top, left bottom, from(blue), to(red)); background:-webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(0.5, white), color-stop(0.5, #000)); background:-webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(0.4, white), color-stop(0.6, #000));感受一下吧。。
2、径向渐变：background:-webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green)); background:-webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(80%, blue)); 注意当圆心坐标相同，内圆和外圆半径相等时，无渐变；当圆心坐标相同，内圆的半径大于外圆的半径时，相当于内圆半径和外圆半径互换位置，并且from的颜色和to的颜色也呼唤，即是开始颜色和结束颜色互换。
二、gecko
1、线性渐变
-moz-linear-gradient([<point> || <angle>,]? <stop> [, <stop>]*)
参数说明：
<point>：定义渐变起始点和结束点坐标，可以是数值、百分比和关键字。
<angle>：当定义直线渐变的角度，单位包括了deg（度）,grad（梯度）,rad（弧度）。
<stop>：定义步长。用的时候第一个参数设置颜色，第二个参数设置颜色的位置，百分比或者数值。
例如：
-moz-linear-gradient(red, blue); -moz-linear-gradient(top left, red, blue); -moz-linear-gradient(left, red, orange, yellow, green, blue); -moz-linear-gradient(top left, red, rgba(255,0,0,0)); -moz-linear-gradient(left 90deg, red, rgba(255,0,0,0)); -moz-linear-gradient(0deg, red, rgba(255,0,0,0)); -moz-linear-gradient(90deg, red, rgba(255,0,0,0)); -moz-linear-gradient(-90deg, red, rgba(255,0,0,0)); -moz-linear-gradient(top, blue, green 50%, orange);赶快试试看下效果吧。。
2、径向渐变
-moz-radial-gradient([<point> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[,<stop>]*)
参数说明：
<point>，同上。
<angle>，同上。
<shape>，定义径向渐变的形状，包括circle ellipse。
<size>，定义圆半径，或者椭圆轴长度。包含了多个关键字，closest-side,closest-corner,farthest-side,farthest-corner,contain, cover。
<stop>，同上。
例如：
-moz-radial-gradient(red, yellow, green); -moz-radial-gradient(red 20%, yellow 40%, green 50%); -moz-radial-gradient(bottom left, red, yellow, green 70%); -moz-radial-gradient(left, circle, red, yellow, green 50%); -moz-radial-gradient(ellipse cover, yellow, green);赶快实验一把吧！
3、重复渐变
-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。
例如：
-moz-repeating-linear-gradient(top left 60deg, black, black 10px, white 10px, white 20px);
-moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);
三、IE实现
IE浏览器并不支持css渐变，只能通过渐变滤镜来做。
filter: progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled, startColorStr=iWidth, endColorStr=iWidth);
enabled,滤镜是否激活，startColorStr，开始颜色和透明度，endColorStr，结束颜色和透明度。
例如：filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#9999ff, endColorStr=#fff);gradientType为0表示的是水平渐变，为1的话就代表的是垂直渐变。
