css線性漸變的

發(fā)布時(shí)間：2020-09-26 13:46:50 來源：億速云閱讀：170 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css線性漸變的，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

線性漸變簡(jiǎn)介

在CSS3中，線性漸變指的是一條直線上進(jìn)行的漸變。在網(wǎng)頁中，大多數(shù)漸變效果都是線性漸變。

語法：

background:linear-gradient（方向，開始顏色，結(jié)束顏色）；

說明：

線性漸變的方向取值有2種，一種是使用角度（deg），另外一種是使用關(guān)鍵字：

css線性漸變的第2個(gè)參數(shù)和第3個(gè)參數(shù)，表示開始顏色和結(jié)束顏色，取值可以為關(guān)鍵字、十六進(jìn)制顏色值、RGBA顏色等。你可以使用在線調(diào)色板來獲取顏色值。線性漸變可以有多個(gè)顏色值。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3線性漸變</title>
    <style type="text/css">
        div
        {
            width:200px;
            height:150px;
            background:linear-gradient(to right,blue,yellow);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下：

css線性漸變的

分析：

“background:linear-gradient（to right,blue,yellow）；”表示線性漸變方向?yàn)椤皬淖蟮接摇?，開始顏色為藍(lán)色（blue），結(jié)束顏色為黃色（yellow）。

如果使用“background:linear-gradient（to left,blue,yellow）；”，在瀏覽器預(yù)覽效果如下：

css線性漸變的

這里要特別注意一下線性漸變的方向問題，顏色值相同，由于漸變方向不同，實(shí)際得到的效果也會(huì)不一樣。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3線性漸變</title>
    <style type="text/css">
        div
        {
            width:200px;
            height:150px;
            background:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下：

css線性漸變的

關(guān)于css線性漸變的就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

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

css線性漸變的

猜你喜歡

最新資訊

相關(guān)推薦

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