在CSS中,可以通過(guò)使用box-shadow
屬性來(lái)實(shí)現(xiàn)凹陷下去的效果。box-shadow
屬性可以添加多個(gè)陰影,包括水平陰影、垂直陰影、模糊半徑和擴(kuò)展半徑等,從而實(shí)現(xiàn)凹陷效果。
下面是一個(gè)示例代碼,展示如何使用box-shadow
屬性實(shí)現(xiàn)凹陷效果:
.div { width: 200px; height: 200px; background-color: #f0f0f0; border: 1px solid #000; padding: 20px; box-shadow: 0 8px 8px -6px #000, 0 16px 16px -6px #000, 0 24px 24px -6px #000, 0 32px 32px -6px #000, 0 40px 40px -6px #000, 0 48px 48px -6px #000, 0 56px 56px -6px #000, 0 64px 64px -6px #000; }
在這個(gè)示例中,我們添加了一個(gè)div
元素,并設(shè)置了其寬度、高度、背景色和邊框樣式,我們使用box-shadow
屬性添加了多個(gè)陰影,從而實(shí)現(xiàn)凹陷效果,每個(gè)陰影的水平和垂直偏移量分別為0,模糊半徑和擴(kuò)展半徑分別為8px、16px、24px、32px、40px、48px、56px和64px,顏色為黑色。
通過(guò)調(diào)整陰影的數(shù)量和樣式,可以實(shí)現(xiàn)不同程度的凹陷效果,也可以結(jié)合其他CSS屬性來(lái)實(shí)現(xiàn)更豐富的樣式效果。