下面来一起学习下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的话就代表的是垂直渐变。