/* 基本语法 */ box-shadow: h-shadow v-shadow blur spread color; /* 解释 */ h-shadow: 必选。水平阴影的位置。可以为负值。 v-shadow: 必选。垂直阴影的位置。可以为负值。 blur: 可选。模糊距离。不能为负值。 spread: 可选。阴影的大小。可以为负值。 color: 可选。阴影的颜色。如果不填，则默认为元素的文本颜色。 /* 实例 */ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* 在右下方添加淡灰色阴影 */ box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.3); /* 在左上方添加淡灰色阴影 */ box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.5); /* 在下方添加深灰色阴影 */ box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.5); /* 在上方添加深灰色阴影 */ box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.5); /* 在右方添加深灰色阴影 */ box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5); /* 在左方添加深灰色阴影 */
通过box-shadow属性可以实现不同方向的阴影效果，同时通过调整模糊距离、阴影大小和颜色等属性，还可以得到更加丰富多彩的阴影效果。因此在网页设计中，大家可以利用CSS上下左右阴影等各种效果，为网页元素带来更加丰富的层次感和立体感，提升用户的使用体验。