在CSS中,可以使用box-shadow
屬性為元素添加陰影。box-shadow
屬性接受四個值,分別是水平偏移、垂直偏移、模糊半徑和擴展半徑。
以下代碼可以為元素添加向右偏移20像素、向下偏移10像素、模糊半徑為5像素的陰影:
element { box-shadow: 20px 10px 5px; }
如果想要添加更復(fù)雜的陰影效果,可以使用多個box-shadow
屬性,每個屬性可以定義不同的陰影效果,以下代碼可以為元素添加兩個陰影效果:
element { box-shadow: 20px 10px 5px #000, 30px 20px 10px #333; }
在這個例子中,***個陰影效果向右偏移20像素、向下偏移10像素、模糊半徑為5像素,顏色為黑色,第二個陰影效果向右偏移30像素、向下偏移20像素、模糊半徑為10像素,顏色為深灰色。
需要注意的是,box-shadow
屬性的值必須按照指定的順序排列,即水平偏移、垂直偏移、模糊半徑和擴展半徑,如果缺少某個值,瀏覽器可能會忽略該屬性。
box-shadow
屬性的值還可以接受其他參數(shù),例如color
參數(shù)可以定義陰影的顏色,具體可以參考CSS文檔中關(guān)于box-shadow
屬性的說明。