背景渐变色

背景渐变色

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

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

一般写法：

/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

常用：对角

background: -webkit-linear-gradient(top right, #98f3e1 , #1583e6); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(top right, #98f3e1 , #1583e6); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(top right, #98f3e1 , #1583e6); /* Firefox 3.6 - 15 */
background: linear-gradient(to top right, #98f3e1 , #1583e6); /* 标准的语法 */