css3实现渐变效果

首先说明：

-moz-针对ff

-webkit-针对chrome、saf4+
（Mozilla和webkit内核浏览器）

渐变分为：
   1】线性渐变：linear
   2】径向渐变：radial

1）
webkit内核浏览器（基本语法）：

 background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

第一个参数：渐变类型
第二个参数:起始点的x y坐标
第三个参数：结束点的x y坐标
第四个参数：起始点的颜色
第五个参数：结束点的颜色

 background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red)）;
2）
Mozilla内核浏览器（基本语法）：

background: -moz-linear-gradient(top, red, blue);

第一个参数：渐变方向
第二个参数:起始点的颜色

第三个参数：结束点的颜色

background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
3）
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ff0000"); /* IE6,IE7 */