欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何實現(xiàn)CSS3線性漸變效果-創(chuàng)新互聯(lián)

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)如何實現(xiàn)CSS3線性漸變效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務那曲,十余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18982081108

CSS3是CSS（層疊樣式表）技術(shù)的升級版本。我們可以通過css3屬性實現(xiàn)更多炫酷的頁面效果，豐富網(wǎng)站內(nèi)容，比如背景顏色呈線性漸變的效果！

下面我們就給大家介紹一個常見的css3漸變效果。

首先大家要知道，CSS3 定義了兩種類型的漸變（gradients）：線性漸變（Linear Gradients）和徑向漸變（Radial Gradients）。

本節(jié)先重點介紹線性漸變-Linear Gradients。

代碼示例如下：

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>CSS3創(chuàng)建線性漸變示例</title>
    <style type="text/css">
        .container{
            text-align:center;
            padding:20px 0;
            width:960px;
            margin: 0 auto;
        }

        .container div{
            width:200px;
            height:150px;
            display:inline-block;
            margin:2px;
            color:#ec8007;
            vertical-align: top;
            line-height: 230px;
            font-size: 20px;
        }

        .linear{
            background:linear-gradient(to bottom, #4b6c9c , #5ac4ed);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="linear">Linear線性漸變</div>
</div>
</body>
</html>

效果如下圖：

如何實現(xiàn)CSS3線性漸變效果

上圖所示，就是由顏色#4b6c9c到#5ac4ed進行過渡的線性漸變。

或者設置顏色從#9492ff到#ccccff過渡，效果如下：

如何實現(xiàn)CSS3線性漸變效果

css3中的linear-gradient屬性就是表示用線性漸變創(chuàng)建圖像。

默認情況下，linear-gradient線性漸變是從上到下開始過渡的。

當然漸變的方向也可以是，向下/向上/向左/向右/對角方向，以及定義一個角度（angle）。

其語法是：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

第一個參數(shù)表示線性漸變的方向，第二個參數(shù)表示開始過渡的顏色即起點顏色，第三個參數(shù)表示過渡到的顏色。

注：Internet Explorer 9 及之前的版本不支持漸變。

上述就是小編為大家分享的如何實現(xiàn)CSS3線性漸變效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

分享名稱：如何實現(xiàn)CSS3線性漸變效果-創(chuàng)新互聯(lián)
標題路徑：http://chinadenli.net/article36/pdpsg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、關(guān)鍵詞優(yōu)化、手機網(wǎng)站建設、定制網(wǎng)站、網(wǎng)站導航、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化