DIV背景色渐变

http://www.zhangxinxu.com/wordpress/?p=743

IE下：

filter: alpha(opacity=100 finishopacity=100 style=1,startx=0,starty=0,finishx=100,finishy=50)
progid:DXImageTransform.Microsoft.gradient(startcolorstr=green,endcolorstr=red,gradientType=0);

opacity:开始颜色透明度，100为不透明，0为透明

finishopacity:结束透明度（这里我们要让绿色转化成完全红色，所以结束时候也要不透明)

style:0 代表统一形状 1 代表线形 2 代表放射状 3 代表矩形。

startx:颜色起始X点
starty：颜色起始Y点

finishx：颜色结束X点（要细调：0-100）

finishY：颜色结束Y点（要细调：0-100）

startcolorstr：起始颜色

endcolorstr：结束颜色

gradientType：0为Y轴，1为X轴渲染

 

webkit核心浏览器下的的基本语法如下：

http://www.zhangxinxu.com/wordpress/?p=734

-webkit-gradient(type, start_point, end_point, / stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)

type	渐变的类型，可以是线性渐变(linear)或是径向渐变(radial)
start_point	渐变图像中渐变的起始点
end_point	渐变图像中渐变的结束点
stop	color-stop()方法，指定渐变进程中特定的颜色
inner_center	内部中心点，径向渐变起始圆环
inner_radius	内部半径，径向渐变起始圆
outer_center	外部渐变结束圆的中心点
outer_radius	外部渐变结束圆的半径

 firefox

http://www.zhangxinxu.com/wordpress/?p=727

要创建一个线性渐变，您需要设置一个起点和一个渐变的方向（或角度），并定义起止颜色。

Firefox支持两种类型的CSS渐变：线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。

 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )