首頁  >  文章  >  web前端  >  CSS3如何實現線性漸層效果

CSS3如何實現線性漸層效果

藏色散人
藏色散人原創
2018-11-28 11:17:026554瀏覽

CSS3實作線性漸變效果的方法:先建立一個HTML範例檔;然後在body中建立一個div;最後透過「linear-gradient」屬性實現線性漸變效果即可。

CSS3如何實現線性漸層效果

本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

CSS3是CSS(層疊樣式表)技術的升級版本。我們可以透過css3屬性實現更多酷炫的頁面效果,豐富網站內容,例如背景顏色呈現線性漸層的效果!

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

首先大家要知道,CSS3 定義了兩種類型的漸變(gradients):線性漸層(Linear Gradients)和徑向漸層(Radial Gradients)。

本節先重點介紹線性漸變-Linear Gradients

程式碼範例如下:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>CSS3创建CSS3如何實現線性漸層效果</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>

效果如下圖:

CSS3如何實現線性漸層效果

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

或設定顏色從#9492ff到#ccccff過渡,效果如下:

CSS3如何實現線性漸層效果

#css3中的linear-gradient屬性就是表示用線性漸層創建影像。

預設情況下,linear-gradient線性漸層是從上到下開始過渡的。

當然漸層的方向也可以是,向下/向上/向左/向右/對角方向,以及定義一個角度(angle)。

其語法為:

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

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

附註:Internet Explorer 9 及之前的版本不支援漸層。

這篇文章就是關於css3實現線性漸變效果的方法介紹,非常簡單易懂,希望對需要的朋友有所幫助!

以上是CSS3如何實現線性漸層效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn