1. 基础语法与参数解析
1.1 box-shadow 的基本语法结构
在 CSS 中，box-shadow 用于在元素周围绘制阴影。语法形式是盒阴影的一组参数，按一定顺序出现：水平偏移量 (offset-x)、垂直偏移量 (offset-y)、模糊半径 (blur-radius)、扩散半径 (spread-radius) 以及颜色。颜色可以是 rgba、hsla、十六进制、关键字，最后一个可选项是 inset，表示阴影是否在元素内部。
通过 顺序固定，浏览器能够正确解析阴影的形状与位置。若省略某些参数，浏览器会按默认值处理：offset-x、offset-y 取 0，blur-radius 取 0，spread-radius 取 0，颜色使用当前元素的颜色。这些特性使 box-shadow 既可实现简单的边框阴影，也能构建复杂的视觉层次。
/* 基本阴影示例：平移+模糊 */
.box { box-shadow: 4px 6px 12px rgba(0,0,0,.25);
}
1.2 阴影参数的强度与视觉效果要点
offset-x 和 offset-y 控制阴影的水平与垂直位置，通常用于模拟光源方向。blur-radius 决定阴影的边缘柔化程度，spread-radius 提供阴影的大小扩展。颜色影响对比度与层次感，常用半透明黑色 rgba(0,0,0,.3) 来保留背景细节。
设计时应关注 性能与可读性，避免过多的高模糊阴影叠加在复杂页面上。对于高 DPI/高分辨率屏幕，微小的数值变化也会带来显著的视觉差异。下面给出一个常见的设计场景示例。
/* 柔和卡片阴影，保持背景可读性 */
.card {box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
2. 阴影颜色、透明度与可访问性设计
2.1 颜色格式与对比度
颜色格式有 rgba、hsla、十六进制和关键词。使用 rgba 能独立控制阴影的透明度，与背景分离。对于深色背景，更高的对比度 有助于阴影的识别度。
同时，应注意 无障碍对比度，避免阴影完全淹没文本。应用透明度时，要结合底色与文本色，确保在不同设备上的可读性。
/* 半透明阴影与背景的对比示例 */
.panel {background: #fff;box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
2.2 颜色层次的组合策略
在复杂界面中，多色阴影往往用于分层，同时避免混乱。常见策略是让阴影颜色接近黑色或灰度，透明度在 0.15-0.4 区间波动，以确保阴影深浅随距离变化。
如果需要更“软”的效果，可以叠加多个阴影：多阴影叠加提供更柔和的边界和更丰富的光线反射。下面给出一个多阴影组合的示例。
/* 复合阴影示例：多层次阴影提高层次感 */
.card {box-shadow:0 2px 4px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.08);
}
3. inset 阴影与外部阴影：对比与应用
3.1 外部阴影的典型用途
外部阴影常用于模拟光照投影，使元素在页面上浮动，提升可用性与层级分辨度。典型应用包括卡片、弹出菜单、和按钮等。
在实现时，偏移量与模糊半径的组合需要与页面背景及其他控件的阴影相协调，确保整体视觉和谐。
/* 外部阴影示例 */
.button {box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
3.2 内部阴影（inset）的使用场景
inset 阴影把阴影绘制在元素内部，常用于按钮的按下状态、输入框的凹陷效果或文本框的内嵌边界。内部阴影与背景颜色的对比需要仔细调试，以避免视觉混乱。
使用 inset 时，阴影看起来像是“被压下去”的效果，通常与渐变背景或高光区域搭配，以增强交互感。
/* inset 阴影示例：内部凹陷效果 */
.input {background: #f5f5f5;box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}
4. 多重阴影与卡片设计的实战案例
4.1 多阴影在层级表达中的应用
多重阴影能在同一元素周围创造多层次的边缘，提升 视觉层级，让卡片、模态框或浮动按钮更具分离感。需要注意的是，不要让阴影堆叠过重，透明度与偏移的组合要合理。
在实践中，可以将最弱的阴影用于背景层，较强的阴影用于前景层，确保整体的可读性。
/* 多阴影应用于卡片示例 */
.card {box-shadow: 0 2px 6px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.08);
}
4.2 实战案例：悬浮卡片与导航短夜间
在交互设计中，悬浮卡片和导航项通常使用阴影来增强可点击性。悬停状态下的阴影应轻微加深，以提示用户交互；聚焦时再增加轮廓或阴影等级，提升可访问性。
下面给出一个简单的悬浮与聚焦阴影的组合，兼顾可用性与美观性。
/* 悬浮与聚焦阴影示例 */
.card:hover {box-shadow: 0 4px 14px rgba(0,0,0,.20);
}
.card:focus-visible {outline: 2px solid #5b9bd5;outline-offset: 2px;box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
5. 兼容性、性能与响应式阴影优化
5.1 浏览器兼容性与前缀
现代浏览器普遍支持 box-shadow，但在历史版本或老旧浏览器上，-webkit-box-shadow 仍有必要作为兼容性兜底。
为确保一致性，常见做法是同时提供两者： prefixed 与 unprefixed 的组合书写。
/* 兼容性写法（古老浏览器也能呈现阴影） */
.box {-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.25);box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
5.2 性能要点与渲染优化
阴影渲染涉及光栅化和合成，过多阴影与高模糊半径会增加 GPU 负载，影响滚动与动画流畅性。因此，在复杂页面上，限制阴影数量和模糊半径，以及尽量使用简单渐变背景与阴影。
对比强度和阴影边缘的示例可以帮助评估性能，使用测试页面 评估不同分辨率下的渲染成本。
/* 限制阴影成本的小示例 */
.card {box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
