CSS3 的文本陰影屬性可以為文字添加陰影效果,使其更加生動。文本陰影屬性有四個值,分別是:陰影的橫向位置、陰影的縱向位置、陰影的模糊距離和陰影的顏色。
.box { text-shadow: 2px 2px 2px #ccc; }
上面的代碼表示給框內的文字添加了一個水平2像素、垂直2像素、模糊距離2像素的黑色陰影。陰影的位置可以使用負值,表示陰影相反的方向。
.box { text-shadow: -2px -2px 2px #ccc; }
上面的代碼表示給框內的文字添加了一個水平-2像素、垂直-2像素、模糊距離2像素的黑色陰影。
同一段文字也可以同時添加多個陰影效果,用逗號隔開即可。
.box { text-shadow: 2px 2px #ccc, -2px -2px #333; }
上面的代碼表示給框內的文字分別添加了一個水平2像素、垂直2像素的#ccc陰影和一個水平-2像素、垂直-2像素的#333陰影。
除了文本陰影,CSS3 還有其他的陰影效果,比如盒陰影和文本描邊等,可以為頁面添加更加美觀的效果。