本文介绍了css背景色渐变的实现方法，网页经常会用到线性渐变，比如：表单提交按钮的背景，数据展示的标题背景等等，本例使用css3：linear-gradient及ie 滤镜：filter来实现背景色渐变，感兴趣的朋友参考下。
如何使用背景线性渐变，比如：表单提交按钮的背景，数据展示的标题背景等，按照以前的做法是切 1px 图片然后 repeat-x。
复制代码 代码示例:
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 );
}
由于 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;}
说明：
实际项目中，往往会碰到圆角和渐变的组合，如果使用上面的写法，那么在 ie9 下会有 bug（在 ie9 下背景色不能完全切完），解决方法是SVG，感兴趣的朋友可以研究下。
