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

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

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

IT培訓(xùn)班

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

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

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

下面通過一個(gè)案例來演示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屬性

通過圖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è)置陰影疊加的方法非常簡單,我們只需設(shè)置多組陰影參數(shù),中間用逗號(hào)隔開即可。例如,想要將段落設(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è)诰€交談!