Bootstrap 5 的 shadow- 类不能叠加或微调，因其底层为固定 box-shadow 声明，非 CSS 变量；shadow-sm 与 shadow-lg 同时使用时后者完全覆盖前者，所有档位值（如 shadow 对应 0 .5rem 1rem rgba(0,0,0,.15)）均硬编码在 CSS 中。
Bootstrap 5 的 shadow- 类为什么不能直接叠加或微调
因为这些类底层是单一 box-shadow 声明，不是 CSS 变量或自定义属性；后写的 shadow-lg 会完全覆盖先写的 shadow-sm，浏览器不支持“合并多个工具类的阴影值”。
你看到的 shadow（无后缀）其实是中等强度预设，对应 0 .5rem 1rem rgba(0,0,0,.15)，所有档位都固定写死在 Bootstrap 的 CSS 文件里。
常见误操作包括：
• 给同一个元素加 class="shadow-sm shadow-lg"，结果只有后者生效
• 在 Sass 中改了 $shadows map 却没重新编译 CSS，导致新值不落地
• 用 !important 强行覆盖，却忘了它会影响所有用到该类的地方，破坏一致性
扩展阴影最稳妥的两种方式：纯 CSS 类 vs Sass 变量
如果你只是偶尔需要一个特殊阴影（比如轮播图用的 0 6px 20px -4px rgba(0,0,0,.12)），直接写个自定义类就行：
.shadow-custom { box-shadow: 0 6px 20px -4px rgba(0,0,0,.12); }确保它在 Bootstrap CSS 之后加载（检查
<link> 顺序），否则会被覆盖。如果项目长期维护、多处需统一管理阴影层级（比如设计系统要求新增
shadow-xl），才值得走 Sass 路线：• 修改
_variables.scss 中的 $shadows map，加入新键值对• 重新编译整个 Bootstrap CSS，或只导出
shadow 工具类部分• 注意：Bootstrap 官方不提供
shadow-2xl 这类命名，得自己定义并维护
移动端和低端设备上容易被忽略的性能坑
大模糊值（如 blur: 2rem 或 24px）在 iOS Safari 和旧款 Android 浏览器中滚动时可能明显掉帧，尤其配合 transform 动画（比如轮播图切换）时，浏览器合成层容易丢帧。
实操建议：
• 移动端优先用 box-shadow: 0 4px 8px rgba(0,0,0,.08)，模糊值控制在 8px 以内
• 避免正向 spread-radius（第四个参数为正值），它会让阴影膨胀，在圆角容器（如 .card）边缘产生硬边
• 不要用 inset 阴影配 overflow: hidden 容器（如 .carousel），阴影会直接消失——这不是 Bug，是 CSS 渲染规则
为什么给 .btn-group 加 shadow- 类经常没反应
根本原因是 .btn-group 默认带 overflow: hidden，子按钮的阴影属于“溢出内容”，被直接裁剪掉了。
解决方法很简单但必须手动：
• 外层容器加 overflow: visible（推荐用 utility class overflow-visible）
• 或者换容器：用 <div class="d-flex"> 替代 <code><div class="btn-group">，再自行控制按钮间距和圆角<br>• 别指望靠 <code>z-index 拉高就能让阴影“露出来”——overflow: hidden 是渲染层面的裁剪，z-index 无效
同理，.card-group 也会裁剪阴影，应改用 .row > .col > .card 或 .card-deck
