教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

text-shadow屬性怎么用?【CSS3新特性】

更新時(shí)間:2023年04月10日11時(shí)41分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑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

陰影疊加效果

0 分享到:
和我們?cè)诰€交談!