.card:hover无效果主因是bootstrap 5默认box-shadow为透明且无transition，叠加父容器overflow:hidden裁剪及优先级冲突；需用自定义类、显式声明transition、检查祖先溢出并兼顾触摸设备兼容性。
直接加 .card:hover { box-shadow: ... } 大概率没反应，核心原因是 Bootstrap 5 的 .card 默认阴影被重置为透明、优先级不足、且缺 transition；真正生效的路径是：用自定义 class 覆盖 + 显式声明过渡 + 检查父容器裁剪。
为什么 .card:hover 写了 box-shadow 却没效果
Bootstrap 5 的 .card 默认带 box-shadow: 0 0 0 rgba(0,0,0,0)（即“隐形阴影”），它会挡住你写的值；同时，很多项目还加载了 shadow-sm 等工具类，它们内部用了 !important，进一步覆盖你的样式。
- 用浏览器开发者工具检查真实生效的
box-shadow声明，看是否被!important或更高权重的选择器压制 - 别写
.card:hover { box-shadow: 0 6px 12px rgba(0,0,0,.2); }—— 它大概率被忽略 - 改用更具体的选择器，例如
.card.custom-shadow:hover，并在 HTML 中加class="custom-shadow" - 临时加
!important验证是否为优先级问题（仅调试用）
必须显式加 transition: box-shadow
Bootstrap 5 的 .card 默认没有 transition，所以即使阴影值变了，也会“啪”一下跳变，甚至在旧版 Safari 中直接不触发动画。
- 过渡声明必须写在常态规则里，不是只写在
:hover中：.card.custom-shadow { transition: box-shadow .2s ease-out; } - 两个
box-shadow值都得合法，不能一边是none一边是具体值——否则动画中断。示例：.card.custom-shadow { box-shadow: 0 2px 6px rgba(0,0,0,.08); }<br>.card.custom-shadow:hover { box-shadow: 0 8px 16px rgba(0,0,0,.15); } - 避免用过长的延迟（如
.5s），移动端触感反馈会滞后
父容器 overflow: hidden 是最高频“阴影消失”原因
卡片放在 .row、.card-group 或自定义 wrapper 里时，只要祖先元素设了 overflow: hidden，box-shadow 就会被硬裁掉——因为阴影绘制在盒模型外部，但受祖先 overflow 约束。
- 临时加
outline: 1px solid red到父容器，看阴影是否刚好卡在 outline 边缘 - 删掉或改成
overflow: visible（若结构允许） - 若不能改父容器，给卡片加
position: relative; z-index: 1;，并确保兄弟元素没更高z-index - 特别注意
.card-group：它默认禁用阴影拼接，想保留悬停阴影就得换布局，用.row > .col > .card
移动端真机点按不触发 :hover 是规范行为，不是 bug
iOS Safari 和 Android Chrome 在真机上不会把单次点击当 hover，这是 CSS 规范明确允许的行为。纯靠 :hover 实现的悬停阴影，在触摸设备上基本不可见。
- 底线方案：给卡片加
tabindex="0"，再写.card.custom-shadow:focus { box-shadow: ... }，兼顾键盘与触摸 - 别依赖
@media (hover: hover)做判断——iOS 真机常返回false，白写 - 如需强反馈（比如点一下立刻加深阴影），用 JS 切换类：
element.classList.toggle('is-hovered')，并在 CSS 中定义.card.is-hovered - 注意快速连点时状态残留问题，建议用
touchend+setTimeout清理
最常被忽略的不是怎么写阴影，而是阴影在哪失效——overflow: hidden、display: inline、height: 0、CSS 加载顺序错位，这些比调参数更致命。先用 outline 和 DevTools 确认渲染条件满足，再动 box-shadow 值本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
