CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

最近越来越喜欢用css写渐变背景效果，在做pc页面时，遇到了不兼容IE浏览器，以下算读书笔记。

效果都是同样的效果，就是利用background作一个垂直渐变，起始颜色#b8c4cb，结束颜色#f6f6f8。

IE浏览器下渐变背景的使用需要使用IE的渐变滤镜

如下代码：

FILTER:?progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);?

上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。 其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。background:?-ms-linear-gradient(top,?#fff,??#0000ff);????????

Firefox浏览器下的渐变背景 background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);

chrome/Safari浏览器下的渐变背景实现 background:-webkit-gradient(linear,?0%?0%,?0%?100%,from(#b8c4cb),?to(#f6f6f8)); background:?-webkit-gradient(linear,?0%?0%,?0%?100%,?from(#fff),?to(#0000ff));?????? background:?-webkit-linear-gradient(top,?#fff,?#0000ff);???

Opera浏览器下的渐变背景实现 background:?-o-linear-gradient(top,?#fff,?#0000ff);??上述的语法：