最常见原因是卡片未声明transition属性，需在.card常态规则中添加transition: box-shadow 0.2s ease-in-out；同时注意父容器overflow: hidden裁切、移动端hover失效及阴影值合理性等问题。
为什么加了 .card:hover { box-shadow: ... } 没反应
最常见原因是卡片本身没声明 transition。Bootstrap 5 的 .card 默认不带任何过渡行为，所以即使你写了 box-shadow 变化，浏览器要么“啪”一下跳变，要么在 Safari 等旧引擎里直接忽略。必须显式加上过渡声明，且只针对 box-shadow：
-
.card { transition: box-shadow 0.2s ease-in-out; }—— 写在常态规则里，不是:hover里 - 别用
transition: all，否则边框、背景色等也会动，干扰视觉焦点 - 选择器权重不够时，写成
.card:hover而非泛泛的:hover，避免被 Bootstrap 默认样式压制
阴影加深值该抄 Bootstrap 原生的还是自己调
推荐复用 Bootstrap 5 默认的 shadow 类所用值：0 0.5rem 1rem rgba(0, 0, 0, 0.15)。它已在大量组件中验证过层次感和可读性。如果想“加深”，微调 alpha 值比乱改模糊半径更安全：
- 轻度加深：把
0.15改成0.2，保持其他参数不变 - 深色背景上慎用
rgba(0,0,0,0.2)——会糊成一块灰，改用rgba(0,0,0,0.08)或配合var(--bs-gray-800) - 别直接套
shadow-lg的值（0 1rem 3rem），它在卡片上容易显得浮夸，尤其移动端
父容器 overflow: hidden 导致阴影被砍掉怎么办
这是实际项目里最高频的“阴影消失”原因。卡片放在 .row、.container-fluid，甚至某些自定义 wrapper 里，只要祖先元素设了 overflow: hidden，阴影就会被硬裁切——因为 box-shadow 是绘制在盒模型外部的，不受自身尺寸约束，但受祖先 overflow 限制。
- 临时排查：给父容器加
outline: 1px solid red，看阴影是否刚好卡在 outline 边上 - 稳妥解法：删掉或改成
overflow: visible；若不能改结构，给卡片加position: relative; z-index: 1;并确保没有兄弟元素用更高z-index盖住它 - 注意
.card-group：它内部强制overflow: hidden，想保留阴影就得换布局，用.row + .col或 Flex
移动端真机点按不触发 :hover 怎么办
iOS Safari 和 Android Chrome 在真机上不把单次点击当 hover，这是规范行为，不是 bug。如果你的设计依赖“点一下显阴影”来暗示可交互，纯 CSS :hover 就不可靠。
- 底线方案：加
tabindex="0"让卡片可聚焦，再写.card:focus { box-shadow: ... }，兼顾键盘与触摸 - 别信
@media (hover: hover)—— iOS Safari 对这个媒体查询支持极不稳定，真机常返回 false - 如需强反馈，用 JS 切换类：
element.classList.toggle('shadow-active')，并在 CSS 中定义该类
transition、overflow、z-index、设备交互模型都耦合。漏掉其中任一环，效果就断掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
