/* 上方阴影 */
.shadow-top {
box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
}
/* 右侧阴影 */
.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);
}
/* 左侧阴影 */
.shadow-left {
box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
}在上面的代码中，大家通过分别为不同的方向设置了不同的阴影参数，从而实现了四边不同的阴影效果。其中，box-shadow 属性的前两个值分别表示阴影的水平和垂直位置，第三个值表示阴影的模糊程度，第四个值表示阴影的透明度。
如果要为多个方向添加阴影，也可以将多个 box-shadow 属性写在一起：
/* 同时添加上下阴影 */
.shadow-top-bottom {
box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2),
0px 5px 5px rgba(0, 0, 0, 0.2);
}
/* 同时添加左右阴影 */
.shadow-left-right {
box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2),
5px 0px 5px rgba(0, 0, 0, 0.2);
}通过 box-shadow 属性，大家可以方便地为元素添加不同的阴影效果，从而增强页面的美观性和可读性。