在网页设计中，我们经常需要为元素添加深度感和视觉强调。CSS 的 box-shadow 属性正是实现这一效果的利器。它可以在元素的边缘添加阴影，而且我们还可以通过逗号分隔来应用多个阴影。阴影的具体效果由水平和垂直偏移量（用于定位阴影）、模糊半径、扩展半径以及颜色来共同定义。
默认情况下，该属性的值为 none，即不应用任何阴影。但只要稍加配置，我们就能轻松地为页面增添立体感。
语法
box-shadow: h-offset v-offset blur-radius spread-radius color | none | inset | initial | inherit;
属性值说明
让我们详细看一下每个属性的具体含义：
描述
—
默认值；表示不向元素应用任何阴影。
设置阴影的水平位置。正值将阴影向右移动，而负值则将其向左移动。
设置阴影的垂直位置。正值将阴影移至元素下方，而负值则将其移至上方。
可选：为阴影添加模糊效果。数值越高，阴影越模糊（边缘越柔和）。
可选：定义阴影的颜色。我们可以使用颜色名称、十六进制代码或 RGB 值。
调整阴影的大小。正值会增加阴影的尺寸，而负值则会减小阴影的尺寸。
将阴影从外部（默认）更改为元素内部，从而创建内阴影效果。
将 INLINECODE9960a826 属性重置为其默认值。
从父元素继承 INLINECODE5549280d 属性。## CSS Box Shadow 实例
为了帮助我们更好地理解如何有效使用 CSS box-shadow 属性，让我们通过以下几个实例来进行探索：
实例 1：带有水平、垂直偏移和模糊效果的基础阴影
在这个例子中，我们将 CSS INLINECODEe446356c 属性应用到了两个 INLINECODE499940ea 元素上。第一个元素的阴影水平偏移量为 5px，垂直偏移量为 10px，模糊半径为 10px。第二个元素使用了类似的阴影，但将模糊半径增大到了 28px，从而产生了更柔和的效果。这种处理方式极大地增强了盒子的视觉深度。
HTML
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 10px;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 28px;
}
Welcome to GeeksforGeeks!
输出:
!Basic Box Shadow with Horizontal, Vertical Offset, and Blur- output
实例 2：带有扩展半径的阴影
这个例子在 box-shadow 属性中加入了一个扩展值。第一个盒子的阴影扩展值为 10px，而第二个盒子的阴影扩展值更大，达到了 20px。这使得阴影看起来更大、轮廓更清晰。
HTML
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset
v-offset blur spread */
box-shadow: 5px 10px 10px 10px;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset
v-offset blur spread */
box-shadow: 5px 10px 28px 20px;
}
Welcome to GeeksforGeeks!
输出:
!Box Shadow with Spread -output
实例 3：自定义颜色的阴影
在这个例子中，我们为 box-shadow 属性指定了自定义颜色（绿色）。第一个盒子的阴影扩展值为 10px 且颜色为绿色，第二个盒子的阴影更大，扩展值为 20px，同样也是绿色。这种带颜色的阴影能为设计增添独特的视觉风格。
HTML
`
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color */
box-shadow: 5px 10px 10px 10px green;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color */
box-shadow: 5px 10px 28px 20px g