OBJUI

在CSS中，我们可以使用box-shadow属性来为元素添加阴影效果。这个属性允许你添加多个阴影，每个阴影由逗号分隔。下面我将详细解释如何使用box-shadow属性。

基本语法

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

h-shadow（必需）：水平阴影的位置。正值会将阴影向右移动，负值则向左。
v-shadow（必需）：垂直阴影的位置。正值会将阴影向下移动，负值则向上。
blur（可选）：模糊距离。值越大，阴影边缘越模糊。
spread（可选）：阴影的大小。正值会使阴影变大，负值则会使阴影缩小。
color（可选）：阴影的颜色。如果省略，浏览器会使用与color属性相同的颜色。
inset（可选）：将外部阴影（outset）改为内部阴影。默认是outset，但如果你添加inset关键字，阴影将显示在元素内部。

示例
基本外部阴影

div {
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

这将为<div>元素添加一个向右下方偏移10px的阴影，模糊距离为5px，并且使用半透明的黑色。

内部阴影

div {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

这将为<div>元素添加一个内部阴影，没有偏移，模糊距离为10px，并使用半透明的黑色。

多个阴影

div {
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75),
-10px -10px 5px 0px rgba(255,0,0,0.5);
}

这将为<div>元素添加两个阴影：一个向右下方偏移，另一个向左上方偏移，并使用不同的颜色和模糊距离。

使用渐变阴影
虽然CSS的box-shadow属性本身不支持渐变阴影，但你可以通过叠加多个阴影或使用SVG滤镜等方法来模拟渐变阴影效果。

注意事项
box-shadow不会影响到布局，因为它不会占用实际的空间。
阴影会叠加在元素的边框之上，但在背景图片和背景色之下。
如果你的元素使用了border-radius属性，那么阴影也会应用相同的圆角效果。
在使用box-shadow时，确保你的元素有足够的空间来显示阴影，否则阴影可能会被裁剪或隐藏。