box-shadow通过设置水平垂直偏移、模糊与扩展半径、颜色及内外阴影，可创建立体悬浮、内凹按下等效果，结合多层叠加与透明色提升真实感，广泛用于卡片、按钮等UI元素的视觉层次构建。
box-shadow 是 CSS 中用于为元素添加阴影效果的重要属性，它不仅能增强界面的视觉层次感，还能模拟出立体、悬浮等设计效果。掌握其参数配置和使用技巧，能显著提升网页的视觉表现力。
box-shadow 基本语法与参数说明
box-shadow 属性的基本语法如下：
box-shadow: h-offset v-offset blur spread color inset;所有参数按顺序书写，用空格分隔，其中部分参数可选。具体含义如下：
- h-offset（水平偏移）：阴影在水平方向的偏移量。正值向右，负值向左。
- v-offset（垂直偏移）：阴影在垂直方向的偏移量。正值向下，负值向上。
- blur（模糊半径）：值越大，阴影越模糊。0 表示无模糊，边缘清晰。
- spread（扩展半径）：控制阴影的尺寸扩展或收缩。正值扩大阴影，负值缩小。
- color（颜色）：阴影的颜色，支持所有 CSS 颜色格式（如 #fff、rgba、hsl 等）。
- inset（可选关键字）：如果添加此值，阴影将变为内阴影，否则为外阴影。
例如：box-shadow: 2px 4px 8px 1px rgba(0,0,0,0.2); 表示一个向右偏移 2px、向下 4px、模糊 8px、扩展 1px 的黑色半透明外阴影。
立即学习“前端免费学习笔记（深入）”；
创建自然的投影效果
为了实现更接近真实光照的阴影，建议使用低透明度的黑色（如 rgba(0,0,0,0.1) 到 0.3），避免纯黑导致生硬感。
- 轻微偏移 + 适度模糊：适合按钮或卡片的轻微浮起效果，例如 box-shadow: 0 2px 6px rgba(0,0,0,0.1)。
- 多层阴影叠加：通过逗号分隔多个阴影值，模拟主影与环境光，增加真实感。例如：
这种组合能表现出近处深影与远处浅影的层次，常见于 Material Design 风格设计中。
利用内阴影实现凹陷与嵌入感
添加 inset 关键字后，阴影会出现在元素内部，常用于模拟按钮按下、输入框凹陷等效果。
- 模拟按钮按下：设置垂直偏移为正，并搭配模糊与颜色，例如： box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
- 输入框聚焦效果：可配合 border 使用，增强交互反馈： box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
注意：内阴影不会影响元素本身的布局，也不会溢出容器，适合精细修饰。
视觉层次与 UI 设计中的应用技巧
阴影是构建视觉层级的关键工具，尤其在卡片式布局、模态框、浮动菜单中广泛应用。
- 层级越高，阴影越强：通过增大模糊和偏移值，表示元素“浮”得更高，如弹窗应比背景卡片阴影更明显。
- 响应式适配：在移动端可适当减小阴影强度，避免视觉过重。
- 性能考虑：box-shadow 由 GPU 加速渲染，通常性能良好，但避免在大量动态元素上频繁更改阴影值。
合理使用 box-shadow，能让界面更具深度和交互引导性。
基本上就这些，灵活运用参数组合，就能创造出丰富而细腻的视觉效果。
