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

分类:HTML5+CSS3 浏览:5,461次
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

暂时木有评论啊,等您坐沙发呢!

发表感言