（轉）css 背景色漸變兼容寫法

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%);
}

說明：linear-gradient 具體用法點此進入。

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：

在實際的項目中，每每會碰到圓角和漸變的組合，若是使用上面的寫法，那麼在 ie9 下會有 bug（在 ie9 下背景色不能徹底切完），解決方法是SVG，具體點此查看。