加了shadow-sm/shadow/shadow-lg没反应，大概率是元素无尺寸或被裁剪：inline元素需加d-inline-block，父容器overflow:hidden会裁剪阴影，且必须确保元素有宽高、z-index足够、未被其他样式覆盖。
shadow-sm / shadow / shadow-lg 类为什么加了没反应
大概率是元素没尺寸或被裁剪了。Bootstrap 的 shadow- 类依赖 box-shadow，而该属性只对“能渲染出物理空间”的元素生效——display: inline 元素（比如纯 <span>）默认不占块空间，阴影自然不可见。
快速验证方法：临时给元素加上 bg-light d-inline-block，看阴影是否立刻出现。如果出现了，说明问题就出在 display 或尺寸上。
- 确保元素有明确宽高，或设置了
d-block/d-inline-block/position: relative - 检查父容器是否带
overflow: hidden（常见于.card-group、.container-fluid），它会直接把阴影“砍掉” -
shadow-none是用!important覆盖其他阴影的，别指望它和别的shadow-类共存——后写的会完全覆盖前写的
hover 时想让卡片阴影变强，但加了 class 没动画
Bootstrap 默认不给 .card 设 transition，所以哪怕你写了 .card:hover { box-shadow: ... }，效果也是“啪”一下跳变，甚至在旧版 Safari 里直接不触发。
必须显式声明过渡行为：
- 给卡片加
transition: box-shadow 0.2s ease-in-out，不能只靠:hover里改值 - 选择器权重要够，推荐写成
.card:hover而不是泛泛的:hover，避免被 Bootstrap 默认样式压制 - 移动端真机点按不会触发
:hover，如果交互逻辑依赖阴影变化，得配合tabindex+:focus或 JS 切换 class
想调深一点/浅一点/换个颜色，还能用 shadow- 类吗
不能。Bootstrap 5 的 shadow-sm、shadow、shadow-lg 全是固定值，硬编码了偏移、模糊半径和 rgba 颜色（比如 rgba(0,0,0,.075)），不支持响应式、不支持深色模式自动适配、也不支持内阴影或多层。
需要定制，就老老实实自己写类：
- 最简方式：
.shadow-custom { box-shadow: 0 4px 12px rgba(0,0,0,.15); }，确保这段 CSS 在 Bootstrap CSS 之后加载 - 优先级冲突时，加选择器权重（如
.my-card .shadow-custom），慎用!important - 深色模式下阴影发糊？别硬写
rgba(0,0,0,.2)，改用语义变量：box-shadow: 0 4px 12px var(--bs-gray-800, rgba(0,0,0,.15));，再补一句@media (prefers-color-scheme: dark) { ... }
性能和兼容性上容易被忽略的点
大模糊值（比如 blur: 2rem）在低端 Android 或 iOS Safari 上可能明显卡顿，尤其滚动时频繁重绘。这不是小题大做——实测 shadow-lg 在部分中低端设备上已接近临界点。
-
shadow-lg在模态框或悬浮按钮上效果好，但在列表项或密集卡片流里慎用，视觉负担和性能开销都会上升 - 别试图叠加多个
shadow-类来“增强”，CSS 不合并它们，只会以后写的为准 - 如果你项目用了 PurgeCSS，注意它可能误删自定义阴影类（比如
.shadow-purple），需在配置里显式保留
真正难的不是加阴影，而是判断什么时候不该加——比如在深色背景上用默认黑影、在窄列卡片里堆 shadow-lg、或在触摸主场景里只靠 :hover 做反馈。这些地方一不留神，视觉就失焦，体验就断层。
