CSS3怎么设置渐变的背景颜色

在网站制作过程中，有很多地方都用到了背景线性渐变。在手机网站制作课程中，我们还讲了可以适当使用CSS3设置渐变的背景颜色。

css3：linear-gradient

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

简写：

.gradient{background: linear-gradient(-50deg, #f00 0, #00f 100%);};//倾斜角度，起始色，终止色

兼容写法：

.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 );

}

由于 filter 是 ie 的私有属性，所以我们需要针对 ie9 单独处理滤镜效果，代码如下：

:root {filter:none;}

总结：

综上所述，线性渐变的兼容写法如下：

.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;}

PS：

在实际的CSS教程和项目中，往往会碰到圆角和渐变的组合，如果使用上面的写法，那么在 ie9 下会有 bug（在 ie9 下背景色不能都切完），解决方法是SVG。