css的box-shadow属性

CSS的box-shadow属性用于在元素的框模型周围创建一个或多个阴影效果。它允许你为元素添加阴影，使其在页面上脱颖而出。

box-shadow属性的语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中：
- h-shadow：表示水平阴影的位置。可以是正值（向右）或负值（向左）。
- v-shadow：表示垂直阴影的位置。可以是正值（向下）或负值（向上）。
- blur：表示模糊距离。可以是0（无模糊）或更大的值。
- spread：表示阴影的尺寸扩展。可以是0（无扩展）或更大的值。
- color：表示阴影的颜色。可以使用具体的颜色值，如#000000（黑色），或使用rgba()函数设置透明度。
- inset（可选）：表示是否将阴影设置为内部阴影。如果使用inset关键字，则阴影将被绘制在元素内部。

你还可以通过逗号分隔来添加多个阴影效果，每个阴影效果都按照上述语法进行设置。

下面是一个示例：

.box {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这个示例会在元素的右下方添加一个2像素的水平和垂直阴影，模糊距离为4像素，颜色为半透明的黑色。

通过调整box-shadow属性的值，你可以创建各种不同的阴影效果，使元素在页面上具有更加生动和立体的外观。