2014-09-13

CSS各种兼容的渐变方式

我的博客页面顶部的Banner是个图片，然后我在上面覆盖了一层从透明到白色的渐变。

但是这个渐变只能在Webkit浏览器上看到。。。。。。

今天在做honoka.moe页面的时候，作为使用Feelyblog的站点，当然也出现了同样的问题。

于是我写了一段CSS解决了它：

.gradient-element {
    background:-webkit-linear-gradient(top, transparent, #fff);
    background:-moz-linear-gradient(top, transparent, #fff);
    background:-o-linear-gradient(top, transparent, #fff);
    background:-ms-linear-gradient(top, transparent, #fff);
    background:linear-gradient(top, transparent, #fff);
    background:-webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#00FFFFFF,endColorStr=#FFFFFFFF,gradientType=0);
    -ms-filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#00FFFFFF,endColorStr=#FFFFFFFF,gradientType=0);
}

嗯，大概就像这样。

从上到下分别是webkit新标准（新opera，safari），mozilla（火狐），Opera，IE， 其他浏览器兼容，老webkit（Chrome和国内一众浏览器。），IE9，IE8以下。

最后两个已经不是CSS了。。。。。

IE6，我实在是无能为力。

嗯，这样就够了。

PS. 我懒的把这个样式往这边同步。。。。这里就这样吧。。。

main