CSS 實現(xiàn)內(nèi)凹圓角是一個常見的需求。具體實現(xiàn)方式是通過使用box-shadow屬性來實現(xiàn),這里我們介紹兩種實現(xiàn)方法。
第一種方法是通過設置陰影來實現(xiàn)內(nèi)凹效果,代碼如下:
.box { width: 200px; height: 100px; background-color: #fff; border-radius: 10px; box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.7); }
這段代碼中,我們定義了一個.box類,設置了寬度、高度以及背景色和圓角。重點是box-shadow屬性,在其中我們使用了inset來表示陰影在邊框內(nèi)部,大小為10像素,顏色為黑色,透明度為0.7。
第二種方法是通過使用偽元素來實現(xiàn)效果,代碼如下:
.box { width: 200px; height: 100px; background-color: #fff; border-radius: 10px; position: relative; } .box::before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-color: #fff; border-radius: 10px; box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.7); }
這段代碼中,我們同樣定義了一個.box類,并設置了寬度、高度、背景色和圓角。接下來,我們使用偽元素::before來創(chuàng)建一個白色背景,大小比.box類更大,并將其定位到.box類的邊緣。最后,我們再次使用box-shadow屬性來創(chuàng)建黑色背景,并將其設置在白色背景的內(nèi)部。
以上兩種方法都可以實現(xiàn)內(nèi)凹圓角的效果,具體使用哪種方式還要根據(jù)具體情況來判斷??梢愿鶕?jù)自己的喜好和需求進行選擇。