最常见原因是缺少transition声明或父容器overflow:hidden裁剪阴影；必须在常态规则中添加.card{transition:box-shadow 0.2s ease-in-out}，并确保父容器不截断阴影。
直接加 shadow-sm 或写 .card:hover { box-shadow: ... } 没反应，大概率是缺了 transition 声明，或被父容器的 overflow: hidden 硬裁掉了阴影。
为什么写了 .card:hover { box-shadow } 却没效果
最常见原因：Bootstrap 的 .card 默认不带任何 transition，浏览器看到属性突变，要么跳变、要么在 Safari 里直接忽略。必须在常态规则里显式补上：
-
.card { transition: box-shadow 0.2s ease-in-out; }—— 这行必须写，且不能放在:hover里 - 别用
transition: all，否则边框、背景色也会动，干扰焦点 - 选择器权重不够时，写成
.card:hover而不是泛泛的:hover，避免被 Bootstrap 默认样式压制 - 临时验证是否为优先级问题？加
!important测试，但上线前应改用更具体类名，比如.card-hover-shadow:hover
怎么让阴影“浮起来”，而不是单纯变深
纯加大 box-shadow 模糊值只会像发光；要模拟上浮感，必须同步改两个属性：
- 用
transform: translateY(-4px)抬升卡片位置（比margin-top更高效，不触发重排） - 同时增强
box-shadow：垂直偏移加大（如从0 0.5rem到0 1rem），模糊半径扩大（1rem → 2rem），alpha 值微调（0.15 → 0.2） - 两个属性必须共用同一
transition声明：transition: transform 0.3s ease, box-shadow 0.3s ease; - 深色背景建议把 alpha 提到
0.3，否则阴影看不清
阴影被砍掉、周围元素乱跳怎么办
这是上线后最高频的视觉崩坏点——本地 OK，一部署就出问题。根本原因是祖先容器设置了 overflow: hidden，而 box-shadow 不属于文档流，会被硬裁切：
- 检查父容器是否是
.row、轮播外层、自定义wrapper，它们常带overflow: hidden - 别用
.card-group—— 它内部强制overflow: hidden，阴影必然被切，改用.row + .col - 解决方案：给卡片直接父容器加
overflow: visible；或统一给所有.card设margin-bottom: 1rem预留空间 - 如果无法改结构，给卡片加
position: relative; z-index: 1;，确保它不被兄弟元素遮挡
移动端点一下没效果，是不是代码错了
不是代码错，是规范行为。iOS Safari 和多数安卓浏览器不触发 :hover，真机点击不会“悬停”，所以纯 CSS :hover 在手机上本就不该指望它稳定工作：
- 底线方案：给卡片加
tabindex="0"，再写.card:focus { transform: translateY(-2px); box-shadow: ...; }，兼顾键盘和触摸反馈 - 更稳妥：用 JS 在
touchstart时加is-hovered类，touchend清除，CSS 写.card.is-hovered规则 - 别信
@media (hover: hover)—— iOS Safari 对这个支持极不稳定，真机常返回 false
真正容易被忽略的是：阴影不是“加个值”就完事，它受过渡声明、父容器溢出、设备交互模型三重约束。哪怕参数全对，只要漏掉其中一环，效果就断在生产环境里。
