CSS3 漸變

2023-01-06 16:37 更新

CSS漸變是CSS3圖像模塊中添加的新類型的圖像。

CSS漸變?cè)试S您在兩個(gè)或多個(gè)指定顏色之間顯示平滑過渡。

瀏覽器支持兩種類型的漸變：

  • linear, 用linear-gradient()函數(shù)定義,
  • radial, 用radial-gradient()函數(shù)定義.

CSS3線性漸變

要?jiǎng)?chuàng)建線性漸變，我們將起點(diǎn)和方向設(shè)置為角度。

我們還定義顏色停止。顏色停止是渲染平滑過渡的顏色。我們必須指定至少兩個(gè)停止顏色。

這里是一個(gè)線性漸變，從中心（水平）和頂部（垂直）開始，并開始藍(lán)色，過渡到白色。


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    width: 100px; 
    height: 100px; 
    border: 1px solid rgb(51, 51, 51); 
    background: -moz-linear-gradient(top, red, white); 
    background: -moz-linear-gradient(to bottom, red, white); 
    background: -ms-linear-gradient(top, red, white); 
    background: -o-linear-gradient(top, red, white); 
    background: -webkit-linear-gradient(top, red, white);
}
</style>
</head>
<body>
    <div id="grad1"></div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

線性漸變

例2

更改相同的漸變從左到右運(yùn)行：


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    width: 100px; 
    height: 100px; 
    border: 1px solid rgb(51, 51, 51); 
    background: -moz-linear-gradient(left, red, white); 
    background: -moz-linear-gradient(to right, red, white); 
    background: -ms-linear-gradient(left, red, white); 
    background: -o-linear-gradient(left, red, white); 
    background: -webkit-linear-gradient(left, red, white);
}
</style>
</head>
<body>
    <div id="grad1"></div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

從左到右漸變

例3

要使?jié)u變沿對(duì)角線運(yùn)行，請(qǐng)指定水平和垂直起始位置。

例如：


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    width: 100px; 
    height: 100px; 
    border: 1px solid rgb(51, 51, 51); 
    background: -moz-linear-gradient(left top, red, white); 
    background: -moz-linear-gradient(to bottom right, red, white); 
    background: -ms-linear-gradient(left top, red, white); 
    background: -o-linear-gradient(left top, red, white); 
    background: -webkit-linear-gradient(left top, red, white);
}
</style>
</head>
<body>
    <div id="grad1"></div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

沿對(duì)角漸變

使用線性漸變的角度

沒有角度，瀏覽器將根據(jù)給定的方向自動(dòng)確定值。

我們可以專門設(shè)置角度來控制漸變的方向。以下代碼顯示如何設(shè)置角度。

background: linear-gradient(70deg, black, white);

例如，這里是兩個(gè)梯度，第一個(gè)具有朝向右邊的方向，第二個(gè)具有70度的角度。


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    width: 100px; 
    height: 100px; 
    border: 1px solid rgb(51, 51, 51); 
    background: linear-gradient(70deg, black, white);
}
#grad2 {
    width: 100px; 
    height: 100px; 
    border: 1px solid rgb(51, 51, 51); 
    background: linear-gradient(black, white);
}

</style>
</head>
<body>
    <div id="grad1"></div>
    <div id="grad2"></div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

線性漸變的角度


例4

上面的代碼呈現(xiàn)如下：


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, red, white);
    background: -o-linear-gradient(0deg, red, white);
    background: -moz-linear-gradient(0deg, red, white);
    background: linear-gradient(0deg, red, white);
}
#grad2 {
    height: 100px;
    background: -webkit-linear-gradient(90deg, red, white);
    background: -o-linear-gradient(90deg, red, white);
    background: -moz-linear-gradient(90deg, red, white);
    background: linear-gradient(90deg, red, white);
}

#grad3 {
    height: 100px;
    background: -webkit-linear-gradient(180deg, red, white);
    background: -o-linear-gradient(180deg, red, white);
    background: -moz-linear-gradient(180deg, red, white);
    background: linear-gradient(180deg, red, white);
}

#grad4 {
    height: 100px;
    background: -webkit-linear-gradient(-90deg, red, white);
    background: -o-linear-gradient(-90deg, red, white);
    background: -moz-linear-gradient(-90deg, red, white);
    background: linear-gradient(-90deg, red, white);
}
</style>
</head>
<body>
    <div id="grad1" style="color:white;text-align:center;">0deg</div><br>
    <div id="grad2" style="color:white;text-align:center;">90deg</div><br>
    <div id="grad3" style="color:white;text-align:center;">180deg</div><br>
    <div id="grad4" style="color:white;text-align:center;">-90deg</div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

0deg

90deg

180deg

-90deg


顏色停止

顏色停止沿著漸變線定義在該位置具有特定顏色的點(diǎn)。

位置可以指定為線的長(zhǎng)度的百分比，或絕對(duì)長(zhǎng)度。

您可以指定與您一樣多的停止點(diǎn)。

要以百分比形式指定位置，0％表示起點(diǎn)，而100％表示結(jié)束點(diǎn)。

要?jiǎng)?chuàng)建效果，我們可以在必要時(shí)使用該范圍之外的值。

此示例指定三個(gè)停止點(diǎn)：


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    width: 100px; 
    height: 100px; 
    border: 1px solid rgb(51, 51, 51); 
    background: -moz-linear-gradient(center top , blue, white 60%, red); 
    background: -moz-linear-gradient(to bottom, blue, white 60%, red); 
    background: -ms-linear-gradient(center top , blue, white 60%, red); 
    background: -o-linear-gradient(center top , blue, white 60%, red); 
    background: -webkit-linear-gradient(top , blue, white 60%, red); 
    background: linear-gradient(to bottom, blue, white 60%, red);
}     
</style>
</head>
<body>
    <div id="grad1"></div>
    <div id="grad2"></div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

顏色停止


例5

這里有一個(gè)使用各種顏色的示例，所有顏色均勻分布：


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    width: 100px; 
    height: 100px; 
    border: 1px solid rgb(51, 51, 51); 
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent; 
    background: -moz-linear-gradient(to right, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent; 
    background: -ms-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent; 
    background: -o-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent; 
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;
}     
</style>
</head>
<body>
    <div id="grad1"></div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

均勻間隔


透明度和梯度

CSS漸變支持透明度。

為了增加透明度，我們使用 rgba()函數(shù)定義顏色停止。

rgba()函數(shù)中的最后一個(gè)參數(shù)可以是從0到1的值。它定義顏色的透明度：0表示完全透明，1表示完全不透明。


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

透明度和梯度


徑向梯度

徑向梯度使用 radial-gradient()函數(shù)來指定。

它的語(yǔ)法與線性漸變類似，只不過您可以指定漸變的結(jié)束形狀，圓形或橢圓形以及其大小。

默認(rèn)情況下，結(jié)束形狀是一個(gè)橢圓，其比例與容器的框相同。

以下代碼顯示了具有均勻間隔的色彩停止的徑向漸變。


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, yellow);
    background: -o-radial-gradient(red, green, yellow);
    background: -moz-radial-gradient(red, green, yellow); 
    background: radial-gradient(red, green, yellow);
}
</style>
</head>
<body>
    <div id="grad1"></div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

徑向梯度

例6

以下代碼顯示了如何創(chuàng)建具有不同間隔色停的徑向梯度。


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green 15%, yellow 60%);
    background: -o-radial-gradient(red 5%, green 15%, yellow 60%);
    background: -moz-radial-gradient(red 5%, green 15%, yellow 60%);
    background: radial-gradient(red 5%, green 15%, yellow 60%);
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

同間隔色停的徑向梯度

設(shè)置徑向漸變的形狀

shape參數(shù)定義徑向梯度的形狀。

它可以取值 circle 或 ellipse 。默認(rèn)值為 ellipse 。


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, yellow, green);
    background: -o-radial-gradient(red, yellow, green);
    background: -moz-radial-gradient(red, yellow, green);
    background: radial-gradient(red, yellow, green);
}

#grad2 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(circle, red, yellow, green);
    background: -o-radial-gradient(circle, red, yellow, green);
    background: -moz-radial-gradient(circle, red, yellow, green);
    background: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<p>Ellipse (this is default):</p>
<div id="grad1"></div>

<p>Circle:</p>
<div id="grad2"></div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

橢圓（這是默認(rèn)值）：

橢圓


圓：

圓


徑向梯度大小

我們可以使用size參數(shù)定義徑向漸變的大小。

徑向漸變的大小可以取四個(gè)值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 150px;
    width: 150px;
    background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,red);
}

#grad2 {
    height: 150px;
    width: 150px;
    background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,red);
}

#grad3 {
    height: 150px;
    width: 150px;
    background: radial-gradient(closest-corner at 60% 55%,blue,green,yellow,red);
}

#grad4 {
    height: 150px;
    width: 150px;
    background: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,red);
}
</style>
</head>
<body>

<p><strong>closest-side:</strong></p>
<div id="grad1"></div>

<p><strong>farthest-side:</strong></p>
<div id="grad2"></div>

<p><strong>closest-corner:</strong></p>
<div id="grad3"></div>

<p><strong>farthest-corner (this is default):</strong></p>
<div id="grad4"></div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

closest-side:
closest-side:

farthest-side:
farthest-side:

closest-corner:

farthest-corner (this is default):
farthest-corner (this is default):

重復(fù)的梯度

linear-gradient()和 radial-gradient()不要重復(fù)停止。

repeating-linear-gradient()和 repeating-radial-gradient()可以重復(fù)梯度。

此示例使用 repeating-linear-gradient()創(chuàng)建漸變：


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: repeating-linear-gradient(-45deg, yellow, yellow 5px, white 5px, white 10px);
}

</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

重復(fù)的梯度

例7

此示例使用 repeating-radial-gradient()創(chuàng)建漸變：


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: repeating-radial-gradient(red, red 5px, white 5px, white 10px);
}

</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

repeating-radial-gradient()

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)