css3漸變屬性有哪些?css3漸變屬性用法詳解

更新時(shí)間:2021-09-29 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

在CSS3之前如果需要添加漸變效果，通常要設(shè)置背景圖像來(lái)實(shí)現(xiàn)。而CSS3中增加了漸變屬性，通過(guò)漸變屬性可以輕松實(shí)現(xiàn)漸變效果。CSS3的漸變屬性主要包括線性漸變和徑向漸變，下面我們?cè)敿?xì)介紹。

CSS3線性漸變

在線性漸變過(guò)程中，起始顏色會(huì)沿著一條直線按順序過(guò)渡到結(jié)束顏色。運(yùn)用CSS3中的“background-image: linear-gradient（參數(shù)值）;”樣式可以實(shí)現(xiàn)線性漸變效果，其基本語(yǔ)法格式如下。

background-image: linear-gradient(漸變角度，顏色值1，顏色值2...，顏色值n);

在上面的語(yǔ)法格式中，linear-gradient用于定義漸變方式為線性漸變，括號(hào)內(nèi)用于設(shè)定漸變角度和顏色值，具體解釋如下。

● 漸變角度

漸變角度指水平線和漸變線之間的夾角，可以是以deg為單位的角度數(shù)值或“to”加“l(fā)eft”“right”“top”和“bottom”等關(guān)鍵詞。在使用角度設(shè)定漸變起點(diǎn)的時(shí)候，0deg對(duì)應(yīng)“to top”， 90deg對(duì)應(yīng)“to right”，180deg對(duì)應(yīng)“to bottom”，270deg對(duì)應(yīng)“to left”，整個(gè)過(guò)程就是以 bottom為起點(diǎn)順時(shí)針旋轉(zhuǎn)，具體如下圖所示。

● 顏色值

顏色值用于設(shè)置漸變顏色，其中“顏色值 1”表示起始顏色，“顏色值 n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個(gè)顏色值，各顏色值之間用“,”隔開(kāi)。

下面通過(guò)案例來(lái)展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3線性漸變用法-黑馬程序員web前端開(kāi)發(fā)高手班http://web.itheima.com</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-image: linear-gradient(30deg, #0f0, #00F); */
            background-image: linear-gradient(30deg, #0f0 50%, #00F 80%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

1632898456571_CSS3線性漸變.jpg

上面圖中實(shí)現(xiàn)了綠色到藍(lán)色的線性漸變。值得一提的是，在每一個(gè)顏色值后面還可以書(shū)寫(xiě)一個(gè)百分比數(shù)值，用于標(biāo)示顏色漸變的位置，具體示例代碼如下：

background-image: linear-gradient(30deg，#0f0 50%，#00F 80%);

在上面的示例代碼中，可以看做綠色（#0f0）由50%的位置開(kāi)始出現(xiàn)漸變至藍(lán)色（#00f）位于80%的位置結(jié)束漸變?？梢杂肞hotoshop中的漸變色塊進(jìn)行類比，如下圖所示。

1632898468539_CSS3線性漸變2.jpg

CSS3徑向漸變

徑向漸變是網(wǎng)頁(yè)中另一種常用的漸變，在徑向漸變過(guò)程中，起始顏色會(huì)從一個(gè)中心點(diǎn)開(kāi)始，依據(jù)橢圓或圓形形狀進(jìn)行擴(kuò)張漸變。運(yùn)用CSS3中的“background-image: radial-gradient（參數(shù)值）;”樣式可以實(shí)現(xiàn)徑向漸變效果，其基本語(yǔ)法格式如下。

background-image: radial-gradient(漸變形狀 圓心位置，顏色值1，顏色值2...，顏色值n);

在上面的語(yǔ)法格式中，radial-gradient用于定義漸變的方式為徑向漸變，括號(hào)內(nèi)的參數(shù)值用于設(shè)定漸變形狀、圓心位置和顏色值，對(duì)各參數(shù)的具體介紹如下。

1.漸變形狀

漸變形狀用來(lái)定義徑向漸變的形狀，其取值既可以是定義水平和垂直半徑的像素值或百分比，也可以是相應(yīng)的關(guān)鍵詞。其中關(guān)鍵詞主要包括兩個(gè)值“circle”和“ellipse”，具體解釋如下。

● 像素值/百分比：用于定義形狀的水平和垂直半徑，如“80px 50px”表示一個(gè)水平半徑為80px，垂直半徑為50px的橢圓形。

● circle：指定圓形的徑向漸變。

● ellipse：指定橢圓形的徑向漸變。

2.圓心位置

圓心位置用于確定元素漸變的中心位置，使用“at”加上關(guān)鍵詞或參數(shù)值來(lái)定義徑向漸變的中心位置。該屬性值類似于CSS中background-position屬性值，如果省略則默認(rèn)為“center”。該屬性值主要有以下幾種。

● 像素值/百分比：用于定義圓心的水平和垂直坐標(biāo)，可以為負(fù)值。

● left：設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值。

● center：設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值或縱坐標(biāo)。

● right：設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值。

● top：設(shè)置頂部為徑向漸變圓心的縱標(biāo)值。

● bottom：設(shè)置底部為徑向漸變圓心的縱標(biāo)值。

3.顏色值

“顏色值1”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個(gè)顏色值，各顏色值之間用“,”隔開(kāi)。

下面運(yùn)用徑向漸變來(lái)制作一個(gè)小球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3徑向漸變用法-黑馬程序員web前端開(kāi)發(fā)高手班http://web.itheima.com</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* 設(shè)置徑向漸變 */
            background-image: radial-gradient(ellipse at center, #0f0, #030);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

上面案例中為div定義了一個(gè)漸變形狀為橢圓形，徑向漸變位置在容器中心點(diǎn)，綠色（#0f0）到深綠色（#030）的徑向漸變；同時(shí)使用“border-radius”屬性將容器的邊框設(shè)置為圓角。值得一提的是，同“線性漸變”類似，在“徑向漸變”的顏色值后面也可以書(shū)寫(xiě)一個(gè)百分比數(shù)值，用于設(shè)置漸變的位置。

1632898479432_徑向漸變.jpg

CSS3重復(fù)漸變

在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常會(huì)遇到在一個(gè)背景上重復(fù)應(yīng)用漸變模式的情況，這時(shí)就需要使用重復(fù)漸變。重復(fù)漸變包括重復(fù)線性漸變和重復(fù)徑向漸變，具體解釋如下。

1.重復(fù)線性漸變

在CSS3中，通過(guò)“background-image: repeating-linear-gradient（參數(shù)值）;”樣式可以實(shí)現(xiàn)重復(fù)線性漸變的效果，其基本語(yǔ)法格式如下。

background-image: repeating-linear-gradient(漸變角度，顏色值1，顏色值2...，顏色值n);

在上面的語(yǔ)法格式中，“repeating-linear-gradient（參數(shù)值）”用于定義漸變方式為重復(fù)線性漸變，括號(hào)內(nèi)的參數(shù)取值和線性漸變相同，分別用于定義漸變角度和顏色值。

下面通過(guò)一個(gè)案例對(duì)重復(fù)線性漸變進(jìn)行演示，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3線性漸變用法-黑馬程序員web前端開(kāi)發(fā)高手班http://web.itheima.com</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-image: linear-gradient(30deg, #0f0, #00F); */
            background-image: linear-gradient(30deg, #0f0 50%, #00F 80%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

為div定義了一個(gè)漸變角度為90deg，紅黃綠三色的重復(fù)線性漸變，效果如下所示。

1632898488726_重復(fù)漸變.jpg

2.重復(fù)徑向漸變

在CSS3中，通過(guò)“background-image: repeating-radial-gradient（參數(shù)值）;”樣式可以實(shí)現(xiàn)重復(fù)線性漸變的效果，其基本語(yǔ)法格式如下。

background-image: repeating-radial-gradient(漸變形狀圓心位置，顏色值1，顏色值2...，顏色值n);

在上面的語(yǔ)法格式中，“repeating-radial-gradient（參數(shù)值）”用于定義漸變方式為重復(fù)徑向漸變，括號(hào)內(nèi)的參數(shù)取值和徑向漸變相同，分別用于定義漸變形狀、圓心位置和顏色值。

下面通過(guò)一個(gè)案例對(duì)重復(fù)徑向漸變進(jìn)行演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3重復(fù)徑向漸變用法-黑馬程序員web前端開(kāi)發(fā)高手班http://web.itheima.com</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: repeating-radial-gradient(circle at 50% 50%, #E50743, #E8ED30 10%, #3FA62E 15%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
</html>

為div定義了一個(gè)漸變形狀為圓形，徑向漸變位置在容器中心點(diǎn)，紅、黃、綠三色徑向漸變。

1632898497305_重復(fù)徑向漸變.jpg