利用css3属性gradient实现背景颜色线性渐变

时间 2020-02-04

标签利用 css3 css 属性 gradient 实现背景颜色线性渐变栏目 CSS 繁體版

原文原文链接

前几天群里有同窗在咨询利用CSS怎么使背景颜色产生渐变，要求必须兼容IE7，IE8,这就有点头疼了，现代浏览器IE9+，Chrome,Friefox均都支持CSS3属性gradient，实现起来就很简单，通过一翻调试，终于帮这位同窗解决了问题，下边给出完整的解决方案。
在线DEMO
兼容性：IE7+，Chrome,Friefox
完整代码以下：php

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>利用css属性gradient实现背景颜色线性渐变</title>
    <style type="text/css">
        .container1{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="container1">
        <div class="box">
        </div>
    </div>
</body>
</html>

我的观点：为了要一个通用的背景渐变要写六行代码，不见得比图片省事，要么也能够结合后端语言作一个功能，输入渐变的起始颜色与结束颜色后生成以上代码。各有所长，看项目须要吧！css

转载请注明：前端录»利用css3属性gradient实现背景颜色线性渐变
转载于猿2048:➤《利用css3属性gradient实现背景颜色线性渐变》html