在CSS中,可以使用box-shadow
屬性來(lái)設(shè)置陰影效果。box-shadow
屬性接受四個(gè)值,分別是水平偏移、垂直偏移、模糊半徑和顏色。
以下代碼可以將一個(gè)元素的陰影設(shè)置為水平偏移10px、垂直偏移5px、模糊半徑20px,顏色為灰色:
element { box-shadow: 10px 5px 20px gray; }
水平偏移和垂直偏移的值可以是正數(shù)或負(fù)數(shù),表示陰影在水平和垂直方向上的偏移距離,模糊半徑的值表示陰影的模糊程度,值越大,陰影越模糊,顏色值可以是任何合法的CSS顏色值。
除了box-shadow
屬性,CSS還提供了text-shadow
屬性來(lái)設(shè)置文本陰影。text-shadow
屬性接受三個(gè)值,分別是水平偏移、垂直偏移和顏色,以下代碼可以將文本的陰影設(shè)置為水平偏移2px、垂直偏移2px,顏色為黑色:
text { text-shadow: 2px 2px black; }
需要注意的是,text-shadow
屬性只對(duì)文本元素有效,對(duì)于其他元素?zé)o效。text-shadow
屬性的值不能包含模糊半徑,因?yàn)槲谋娟幱安恍枰:Ч?/p>
CSS中的陰影效果可以通過(guò)box-shadow
和text-shadow
兩個(gè)屬性來(lái)實(shí)現(xiàn),在實(shí)際應(yīng)用中,可以根據(jù)需要選擇使用哪個(gè)屬性來(lái)設(shè)置陰影效果。