-
國家級
全民數(shù)字素養(yǎng)與技能培訓(xùn)基地 -
河南省
第一批產(chǎn)教融合型企業(yè)建設(shè)培育單位 -
鄭州市
數(shù)字技能人才（碼農(nóng)）培養(yǎng)評價聯(lián)盟
ext-shadow是CSS3新增屬性，該屬性可以為頁面中的文本添加陰影效果。text-shadow屬性的基本語法格式如下：
選擇器{text-shadow:h-shadow v-shadow blur color;}在上面的語法格式中，h-shadow用于設(shè)置水平陰影的距離，v-shadow用于設(shè)置垂直陰影的p距離，blur用于設(shè)置模糊半徑，color用于設(shè)置陰影顏色。
下面通過一個案例來演示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，陰影顏色為紅色。
運行代碼效果如下圖所示：
可以看出，文本右下方出現(xiàn)了模糊的紅色陰影效果。此外，當(dāng)設(shè)置陰影的水平距離參數(shù)或垂直距離參數(shù)為負(fù)值時，可以改變陰影的投射方向。
注意：
陰影的水平或垂直距離參數(shù)可以設(shè)為負(fù)值，但陰影的模糊半徑參數(shù)只能設(shè)置為正值，并且數(shù)值越大陰影向外模糊的范圍也就越大。
設(shè)置多個陰影疊加效果
我們可以使用text-shadow屬性給文字添加多個陰影，從而產(chǎn)生陰影疊加的效果。設(shè)置陰影疊加的方法非常簡單，我們只需設(shè)置多組陰影參數(shù)，中間用逗號隔開即可，例如，想要對段落設(shè)置紅色和綠色陰影疊加的效果，可以將p標(biāo)簽的樣式更改為：
P{
font-size:32px;
text-shadow:10px 10px 10px red,20px 20px 20px green; /*紅色和綠色的投影疊加*/
}在上面的代碼中，為文本依次指定了紅色和綠色的陰影效果，并設(shè)置了陰影的位置和模糊數(shù)值。陰影疊加效果如圖所示。
