首頁技術(shù)文章正文

CSS3中怎樣為文本疊加單個(gè)或多個(gè)陰影效果?

更新時(shí)間:2022-12-29 來源:黑馬程序員 瀏覽量:

text-shadow是CSS3新增屬性，該屬性可以為頁面中的文本添加陰影效果。text-shadow屬性的基本語法格式如下：

選擇器{text-shadow:h-shadow v-shadow blur color;}

在上面的語法格式中，h-shadow用于設(shè)置水平陰影的距離，v-shadow用于設(shè)置垂直陰影的p距離，blur用于設(shè)置模糊半徑，color用于設(shè)置陰影顏色。

下面通過一個(gè)案例來演示text-shadow屬性的用法，如例所示。

example.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow屬性</title>
<style type="text/css">
P{
  font-size: 50px;
  text-shadow:10px 10px 10px red; /*設(shè)置文字陰影的距離、模糊半徑和顏色*/
}
</style>
</head>
<body>
<p>Hello CSS3</p>
</body>
</html>

上述代碼中，第9行代碼用于為文字添加陰影效果，設(shè)置陰影的水平和垂直偏移距離為10px，模糊半徑為10px，陰影顏色為紅色。

運(yùn)行代碼效果如下圖所示：

1672285506398_62.png

可以看出，文本右下方出現(xiàn)了模糊的紅色陰影效果。此外，當(dāng)設(shè)置陰影的水平距離參數(shù)或垂直距離參數(shù)為負(fù)值時(shí)，可以改變陰影的投射方向。

注意：

陰影的水平或垂直距離參數(shù)可以設(shè)為負(fù)值，但陰影的模糊半徑參數(shù)只能設(shè)置為正值，并且數(shù)值越大陰影向外模糊的范圍也就越大。

設(shè)置多個(gè)陰影疊加效果

我們可以使用text-shadow屬性給文字添加多個(gè)陰影，從而產(chǎn)生陰影疊加的效果。設(shè)置陰影疊加的方法非常簡單，我們只需設(shè)置多組陰影參數(shù)，中間用逗號(hào)隔開即可，例如，想要對段落設(shè)置紅色和綠色陰影疊加的效果，可以將p標(biāo)簽的樣式更改為：

P{
  font-size:32px;
  text-shadow:10px 10px 10px red,20px 20px 20px green; /*紅色和綠色的投影疊加*/
}

在上面的代碼中，為文本依次指定了紅色和綠色的陰影效果，并設(shè)置了陰影的位置和模糊數(shù)值。陰影疊加效果如圖所示。

1672285746121_63.png

分享到：
在線咨詢 我要報(bào)名
和我們在線交談！