CSS中的"四周都有陰影"通常指的是一個(gè)元素在四個(gè)方向(上、下、左、右)上都有陰影效果,在CSS中,可以使用box-shadow
屬性來實(shí)現(xiàn)這種效果。box-shadow
屬性接受四個(gè)值,分別代表陰影的水平和垂直偏移量、陰影的模糊半徑以及陰影的顏色。
如果你想要一個(gè)元素在四個(gè)方向上都有相同的陰影效果,你可以這樣寫CSS:
.element { box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.7); }
這個(gè)例子中,10px
是陰影的水平偏移量,10px
是陰影的垂直偏移量,5px
是陰影的模糊半徑,0px
是陰影的擴(kuò)展半徑(在這個(gè)例子中不需要擴(kuò)展陰影,所以設(shè)置為0),rgba(0, 0, 0, 0.7)
是陰影的顏色(黑色,不透明度為0.7)。
如果你想要在不同的方向上設(shè)置不同的陰影效果,你可以使用多個(gè)box-shadow
屬性,每個(gè)屬性對(duì)應(yīng)一個(gè)方向的陰影:
.element { box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.7); /* 上方陰影 */ box-shadow: -10px -10px 5px 0px rgba(0, 0, 0, 0.7); /* 下方陰影 */ box-shadow: -10px 10px 5px 0px rgba(0, 0, 0, 0.7); /* 左方陰影 */ box-shadow: 10px -10px 5px 0px rgba(0, 0, 0, 0.7); /* 右方陰影 */ }
這樣,你的元素在四個(gè)方向上都有不同的陰影效果,你可以根據(jù)需要調(diào)整每個(gè)方向的陰影偏移量、模糊半徑和顏色。