在CSS中,我們可以使用border-radius屬性來實現圓角效果,它可以設置四個角的圓角半徑,也可以單獨設置每個角的半徑。但是如何實現圓角內凹的效果呢?
.box { border-radius: 20px; background: #ccc; padding: 20px; box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); }
上面的代碼可以實現一個有圓角的矩形盒子,并且添加了陰影。其中box-shadow屬性用來設置陰影效果,我們可以利用它來實現內凹效果,原理就是將陰影向內部移動,使它看起來像是凹陷進去了。
inset關鍵詞表示將陰影內嵌到元素中,而0px 0px表示不偏移陰影的位置,10px表示陰影的模糊半徑,這樣設置就可以使陰影覆蓋整個元素。rgba(0, 0, 0, 0.5)表示陰影的顏色及透明度。