在 CSS 中，可以使用 box-shadow 屬性來(lái)添加陰影效果。這個(gè)屬性可以給 HTML 元素添加一個(gè)陰影，包括上、右、下、左四個(gè)方向。下面我們來(lái)學(xué)習(xí)一下如何在四邊添加不同的陰影。

/* 上方陰影 */
.shadow-top {
box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
}
/* 右側(cè)陰影 */
.shadow-right {
box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
}
/* 下方陰影 */
.shadow-bottom {
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}
/* 左側(cè)陰影 */
.shadow-left {
box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
}

在上面的代碼中，我們通過(guò)分別為不同的方向設(shè)置了不同的陰影參數(shù)，從而實(shí)現(xiàn)了四邊不同的陰影效果。其中，box-shadow 屬性的前兩個(gè)值分別表示陰影的水平和垂直位置，第三個(gè)值表示陰影的模糊程度，第四個(gè)值表示陰影的透明度。

如果要為多個(gè)方向添加陰影，也可以將多個(gè) box-shadow 屬性寫(xiě)在一起：

/* 同時(shí)添加上下陰影 */
.shadow-top-bottom {
box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2),
0px 5px 5px rgba(0, 0, 0, 0.2);
}
/* 同時(shí)添加左右陰影 */
.shadow-left-right {
box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2),
5px 0px 5px rgba(0, 0, 0, 0.2);
}

通過(guò) box-shadow 屬性，我們可以方便地為元素添加不同的陰影效果，從而增強(qiáng)頁(yè)面的美觀性和可讀性。