在CSS中,可以使用box-shadow
屬性來制作陰影。box-shadow
屬性接受四個(gè)值,分別是水平偏移、垂直偏移、模糊半徑和顏色。
以下代碼將在元素上添加一個(gè)向右偏移20像素、向下偏移10像素、模糊半徑為5像素的藍(lán)色陰影:
element { box-shadow: 20px 10px 5px blue; }
如果只想在元素的底部添加陰影,可以將水平偏移設(shè)置為0:
element { box-shadow: 0 10px 5px blue; }
如果想要添加內(nèi)陰影,可以使用inset
關(guān)鍵字:
element { box-shadow: 0 0 5px blue inset; }
這將給元素內(nèi)部添加模糊半徑為5像素的藍(lán)色內(nèi)陰影。
除了box-shadow
屬性,CSS還提供了text-shadow
屬性,用于給文本添加陰影。text-shadow
屬性接受三個(gè)值,分別是水平偏移、垂直偏移和顏色。
p { text-shadow: 2px 2px 4px #333; }
這將給段落文本添加向右偏移2像素、向下偏移2像素、模糊半徑為4像素的黑色陰影。