bootstrap 5.3+ 通过 css 变量（如 --bs-box-shadow）全局定制阴影最高效，配合深色模式选择器或语义化 class 可精准控制；sass 项目应重定义 $box-shadow 并调用 generate-shadow-utilities 生成工具类。
bootstrap 5 的 shadow-sm、shadow、shadow-lg 工具类覆盖范围太窄，真要匹配设计稿的 z-index 层级、深色模式适配或单向投影，必须脱离工具类体系，用 css 自定义。
直接改 CSS 自定义属性最省事
Bootstrap 5.3+ 把阴影值抽成了 CSS 变量，改它们就能全局生效，不用碰每个元素：
-
--bs-box-shadow-sm、--bs-box-shadow、--bs-box-shadow-lg这三个变量控制对应工具类的值 - 在
:root或.dark/[data-bs-theme="dark"]下重写，比如：.dark { --bs-box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08); } - 别用
!important覆盖单个 class，那样会破坏工具类复用逻辑 - 改完后所有用了
shadow的卡片、按钮、模态框都会自动更新，包括第三方组件（只要它没硬编码 box-shadow）
新增语义化 class 比覆盖更安全
只在局部用新阴影？加一个带含义的 class，比如 shadow-card-heavy 或 shadow-bottom：
- 避免污染全局变量，适合中后台项目里某类业务卡片专用
- 写法要完整：
.shadow-bottom { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }不要只写box-shadow: 0 4px 12px，缺颜色和透明度会继承默认值，导致深色模式下糊成一片 - 如果要兼容深色模式，必须手动加
@media (prefers-color-scheme: dark)块，Bootstrap 不会自动切换box-shadow颜色 - 用
filter: drop-shadow()替代时注意：它不响应border-radius，圆角图片边缘可能发虚，iOS Safari 旧版还有性能抖动
Sass 项目就扩写 $box-shadow map
你用 Sass 编译 Bootstrap，且长期维护——这时手写一堆 class 是下策，应该接入原生工具系统：
- 在引入 Bootstrap 后重定义
$box-shadow变量，例如：$box-shadow: ( xs: 0 .125rem .25rem rgba(0, 0, 0, .075), card-heavy: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) );
- 再调用 Bootstrap 提供的
@include generate-shadow-utilities($box-shadow)（5.3+ 支持） - 别漏掉
card-heavy这种多层阴影写法：CSS 允许逗号分隔多个box-shadow值，但工具类生成器必须按语法传入字符串数组 - 旧版 Bootstrap（如 5.2）没
generate-shadow-utilities，得自己写@each循环生成 class，容易拼错命名空间
阴影不是“加了就行”，它受父容器 overflow: hidden、元素 display 类型、深色模式下 rgba 基色选择、甚至 Safari 对 :active 的瞬时处理共同影响。最常被忽略的是：你改了变量或加了 class，却没检查父级是否切掉了溢出部分——比如 .card-group 或 .navbar 默认就带 overflow: hidden。
