在项目中，有很多地方都用到了背景线性渐变。

如果在移动端还可以适当使用CSS3这个属性

css3：linear-gradient

比如：黑色渐变到白色，代码如下：

.gradient{

background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));

background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);

background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);

background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

}

ie 滤镜：filter

linear-gradient 在 ie9 以下是不支持的，所以对于 ie6 - ie8 我们可以使用滤镜来解决，代码如下：

.gradient{

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

}

总结：

.gradient{

background: #000000;

background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));

background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);

background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);

background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

}

:root .gradient{filter:none;}

在Mozilla 下

background: -moz-linear-gradient( top,#ccc,#000);

参数说明

1,起点位置top 是从上到下,left是从左到右,left top是左上到右下

2,开始颜色,

3,结束颜色

在Webkit下

-webkit-linear-gradient(top,#ccc,#000);

参数与mozilla一致

在 Opera 下

background: -o-linear-gradient(top,#ccc, #000);

数与mozilla一致