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

text-shadow屬性為文字添加單個(gè)或多個(gè)陰影效果

更新時(shí)間:2023-04-07 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

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

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

下面通過(guò)一個(gè)案例來(lái)演示text-shadow屬性的用法

<!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，陰影顏色為紅色。
上述代碼，效果如圖所示。

1680851391172_陰影效果.png

text-shadow屬性

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

注意：

陰影的水平或垂直距離參數(shù)可以設(shè)為負(fù)值，但陰影的模糊半徑參數(shù)只能設(shè)置為正值，并且數(shù)值越大陰影向外模糊的范圍也就越大。
設(shè)置多個(gè)陰影疊加效果
我們可以使用text-shadow屬性給文字添加多個(gè)陰影，從而產(chǎn)生陰影疊加的效果。設(shè)置陰影疊加的方法非常簡(jiǎn)單，我們只需設(shè)置多組陰影參數(shù)，中間用逗號(hào)隔開(kāi)即可。例如，想要將段落設(shè)置紅色和綠色陰影疊加的效果，可以將p標(biāo)簽的樣式更改為：

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

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

1680852909844_多重陰影.png

陰影疊加效果

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