CSS3 凹陷圓角是CSS3中的一種樣式效果,該效果通過設置CSS3的box-shadow屬性來實現。當我們為圓角元素設置陰影時,將會在元素的邊緣產生凹陷的效果,這時,我們就可以實現CSS3 凹陷圓角的效果了。
.box { width: 200px; height: 100px; background-color: #fff; border-radius: 10px; box-shadow: inset 0px 0px 10px #000; }
上面的代碼就是實現 CSS3 凹陷圓角效果的示例。其中,box屬性中的inset代表陰影元素在容器內顯示,0px 0px 10px代表陰影的水平方向為0像素,垂直方向為0像素,模糊半徑為10像素,#000代表陰影的顏色。當我們為元素設置這個樣式時,就可以看到一個凹陷的圓角效果。
需要注意的是,設置CSS3凹陷圓角時,我們需要將陰影的顏色設置為和元素背景顏色相同,這樣才能達到凹陷的效果。如果顏色不同,則會產生不協調的效果。
下一篇$和 $在php