CSS中的字體陰影讓文本看上去更加生動,有時候甚至可以幫助文本更好地融入背景,提高可讀性。
要想在CSS中使用字體陰影,需要使用text-shadow
屬性。其語法如下:
selector { text-shadow: h-shadow v-shadow blur color; }
其中,h-shadow
表示水平方向陰影的距離,可以是負值(向左)或正值(向右)。v-shadow
表示垂直方向陰影的距離,也可以是負值(向上)或正值(向下)。blur
表示模糊半徑,用像素值表示,可以為0,表示無模糊效果。最后一個參數是color
,表示陰影的顏色。
例如,下面代碼可以讓文本產生3像素向右、3像素向下、模糊半徑為5像素、顏色為灰色的陰影效果:
p { text-shadow: 3px 3px 5px #ccc; }
需要注意,text-shadow
屬性可以設置多個陰影效果,用逗號分隔。例如,下面的代碼產生兩個陰影效果:
p { text-shadow: 3px 3px 5px #ccc, -3px -3px 5px #aaa; }
此時,文本將同時產生一層向右向下、模糊半徑為5像素、顏色為灰色的陰影,以及一層向左向上、模糊半徑為5像素、顏色為深灰色的陰影。
總之,通過使用text-shadow
屬性,可以為文本增加陰影效果,使其更加生動。您可以自己嘗試不同的參數組合,創造出多種不同的效果。