CSS3 中的凹進去效果可以使用 box-shadow 屬性來實現。通過設置一個內部的陰影,使得元素形成凹進去的效果。
具體實現方式如下:
.box { background-color: #fff; width: 300px; height: 150px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px #ccc inset; }
在上述代碼中,box-shadow 屬性的值為:
box-shadow: 0 0 10px #ccc inset;
其中,第一個參數為水平偏移量,第二個參數為垂直偏移量,第三個參數為模糊半徑,第四個參數為陰影顏色。最后一個參數設置為 inset,則表示內陰影。
通過調整這些參數可以實現不同樣式的凹進去效果,如下:
.box2 { box-shadow: 0 0 10px #ccc inset; } .box3 { box-shadow: -2px -2px 5px #ccc inset; } .box4 { box-shadow: -2px -2px 5px #ccc, 2px 2px 5px #ccc inset; }
上述代碼中的 box3 和 box4 實現了不同樣式的凹進去效果。box3 的陰影向左上偏移了 2px,表示元素左上角有一個凹進去的效果;而 box4 則同時設置了左上角和右下角的陰影,形成一個類似于沉降的效果。
通過使用 box-shadow 屬性,可以實現多種樣式的凹進去效果,使得網頁的視覺效果更加豐富多彩。