Bootstrap 5中shadow-sm、shadow、shadow-lg三档实际值分别为：shadow-sm是0 .125rem .25rem rgba(0,0,0,.075)，shadow是0 .5rem 1rem rgba(0,0,0,.15)，shadow-lg是0 1rem 3rem rgba(0,0,0,.175)。
shadow-sm / shadow / shadow-lg 三档参数实际值是多少
Bootstrap 5 的 shadow-sm、shadow、shadow-lg 并不是模糊的“轻/中/重”描述，而是固定写死的 box-shadow 值，直接对应三组偏移、模糊、颜色组合：
-
shadow-sm：0 .125rem .25rem rgba(0, 0, 0, .075) -
shadow（无后缀）：0 .5rem 1rem rgba(0, 0, 0, .15) -
shadow-lg：0 1rem 3rem rgba(0, 0, 0, .175)
注意：所有值都用 rem 单位，受根字体大小影响；颜色统一为黑底透明度渐变，不随主题色变化。如果你在深色背景上用 shadow-lg，可能几乎看不见——这不是 bug，是设计使然。
为什么加了 shadow 类却没阴影
最常见原因不是类名写错，而是元素本身不满足渲染 box-shadow 的基本条件：
- 元素是纯
inline类型（比如<span>或未设样式的<a>），必须加d-inline-block或d-block才能生效 - 元素高度为
0（例如只含空格或未设置min-height的空<div>），阴影无处附着 - 父容器设置了
overflow: hidden，把阴影裁掉了 - 其他 CSS 覆盖了
box-shadow，比如自定义样式里写了box-shadow: none但没注意到
快速验证法：临时加上 bg-light border，看边框和背景是否正常显示——如果连边框都看不到，那阴影肯定也不会出现。
如何安全添加自定义阴影类（不破坏 Bootstrap）
别改 _variables.scss 或试图用 !important 覆盖原生类。直接新增独立类名最稳妥：
.shadow-purple {
box-shadow: 0 .5rem 1rem rgba(106, 76, 147, .3);
}
这样做的好处：
- 不依赖构建流程，纯 CSS 文件或
<style>块里就能加 - 不会干扰
shadow-sm等原生类的语义和复用逻辑 - 可自由搭配：比如
<div class="card shadow-purple">，只要确保card本身有尺寸且非 inline
若项目用 Sass，可用 @include box-shadow($shadow-md) 复用 Bootstrap 内部变量，但前提是你的自定义类也走同一套编译链路——对多数轻量项目反而没必要。
hover 时切换阴影强度要特别注意什么
Bootstrap 没提供 shadow-hover-lg 这种类，必须手写状态切换：
.card-custom {
box-shadow: var(--bs-shadow-sm);
}
.card-custom:hover {
box-shadow: var(--bs-shadow-lg);
}
关键点：
- 必须显式声明默认状态，否则 hover 时会从无阴影直接跳到大阴影，视觉突兀
- 不要只写
:hover，漏掉基础态会导致 SSR 或 JS 未加载时样式缺失 - 移动端没有 hover，所以这个效果在触摸设备上基本无效；如需反馈，得配合
focus-within或点击态 JS 切换
真正容易被忽略的是：阴影变化会触发重绘，高频 hover 下可能轻微卡顿，尤其在低端安卓 WebView 中。如果只是卡片列表，建议优先用 transform: translateY(-2px) 配合微弱阴影，比单纯放大 box-shadow 更轻量。
