CSS3技術給我們帶來了很多方便的樣式屬性,其中內凹角便是其中的一項。內凹角,即box-shadow屬性,是CSS3中提供的一項新的陰影屬性。它可以使一個元素的某個角或邊產生內凹的效果,給人一種立體的感覺,與普通的border-radius屬性不同,內凹角可以讓元素變得更加立體、有層次感。
要給一個元素添加內凹角,可以使用box-shadow屬性。box-shadow屬性可以接收四個值,它們分別為水平偏移量、垂直偏移量、模糊半徑和陰影的擴散半徑。我們可以通過調整這些值,來控制元素產生的內凹角。
.box { width: 200px; height: 200px; background-color: #ccc; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5) inset; }
上述代碼是一個示例,我們可以看到,我們給.box這個元素添加了一條內凹的陰影。其中水平偏移量為10px,垂直偏移量也為10px,模糊半徑為10px,擴散半徑為0,陰影的顏色為黑色并帶有一定的透明度,因此產生的效果便是一個右下角有內凹效果的方形。
在使用內凹角的過程中還需要注意,box-shadow屬性兼容性不夠好,如果要兼容老版本的瀏覽器,則需要添加其他的兼容性CSS屬性來實現內凹角效果。