css3-gradient实现背景颜色线性渐变–兼容：IE7+,Chrome,Friefox

css3-gradient实现背景颜色线性渐变--兼容：IE7+,Chrome,Friefox
前几天有人问怎么使用CSS3背景颜色产生渐变，要求必须兼容IE7，IE8,这就有点头疼了，现代浏览器IE9+，Chrome,Friefox均都支持CSS3属性gradient，这就好办多了，针对ie7&ie8做文章了：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css3-gradient实现背景颜色线性渐变--兼容：IE7+,Chrome,Friefox</title>
    <style type="text/css">
        .container{width:500px;margin:50px auto 0 auto;}
        .box { 
            width:500px;
            height:250px;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); /** Chrome Safari **/
            background: -moz-linear-gradient(top, #eee, #aaa); /** FireFox **/
            background: -o-linear-gradient(top, #eee, #aaa);/** Opear **/ 
            background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);/** IE9 IE10 **/ 
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE7 **/ 
            -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE8 **/ }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>
</html>

兼容性：IE7+,Chrome,Friefox

评论