CSS中的內上陰影效果可讓元素看起來更加立體化和有深度感,許多網頁設計師都喜歡使用這種效果來提升頁面的美觀度。通過以下代碼,我們可以輕松實現這種效果:
.box { box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.5); }
在box-shadow屬性中,我們需要設置四個值,分別是:
1. 內陰影inset
2. 橫向偏移量0px
3. 縱向偏移量0px
4. 模糊程度10px,半徑越大陰影越模糊
5. 陰影擴散范圍5px,數值越大,陰影范圍越大
最后一個參數rgba(0,0,0,0.5)代表陰影顏色,可自由替換為其他顏色。
下面是一個示例,展示了一個帶有內上陰影效果的純色盒子:
.box { width: 200px; height: 200px; background-color: #fff; box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.5); }