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

發(fā)布時(shí)間：2020-07-15 10:09:03 來(lái)源：億速云閱讀：166 作者：Leah 欄目：web開(kāi)發(fā)

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

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

下面我們就給大家介紹一個(gè)常見(jiàn)的css3漸變效果。

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

本節(jié)先重點(diǎn)介紹線性漸變-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>

效果如下圖：

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

上圖所示，就是由顏色#4b6c9c到#5ac4ed進(jìn)行過(guò)渡的線性漸變。

或者設(shè)置顏色從#9492ff到#ccccff過(guò)渡，效果如下：

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

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

默認(rèn)情況下，linear-gradient線性漸變是從上到下開(kāi)始過(guò)渡的。

當(dāng)然漸變的方向也可以是，向下/向上/向左/向右/對(duì)角方向，以及定義一個(gè)角度（angle）。

其語(yǔ)法是：

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

第一個(gè)參數(shù)表示線性漸變的方向，第二個(gè)參數(shù)表示開(kāi)始過(guò)渡的顏色即起點(diǎn)顏色，第三個(gè)參數(shù)表示過(guò)渡到的顏色。

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

上述就是小編為大家分享的如何實(shí)現(xiàn)CSS3線性漸變效果了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽