卡片悬停无阴影是因bootstrap 5默认box-shadow为透明且优先级低，需用更具体选择器或!important覆盖；须添加transition实现平滑过渡，并注意父容器overflow裁剪问题。
卡片悬停时阴影不出现？检查是否覆盖了 box-shadow 的默认值
Bootstrap 5 的卡片（.card）默认没有悬停阴影，必须手动添加。很多人直接写 .card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); } 却没效果，常见原因是 Bootstrap 自带的 .card 已设 box-shadow: 0 0 0 rgba(0,0,0,0);（即“透明阴影”），而 CSS 优先级导致自定义样式被忽略。
实操建议：
- 用
!important临时验证是否为优先级问题（仅调试用，上线前应改用更具体的选择器） - 推荐写成
.card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important; }确认效果后，再优化为：.card.hover-shadow:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }并在 HTML 中加class="hover-shadow" - 注意：Bootstrap 4 和 5 的 shadow 工具类（如
shadow-sm、shadow）是静态的，无法响应:hover，不能直接靠 class 切换
想复用 Bootstrap 的 shadow 类值？提取其 CSS 变量或源码值
Bootstrap 5 定义了 --bs-box-shadow、--bs-box-shadow-sm 等 CSS 变量，但这些变量**不作用于 :hover 伪类**，且默认未在 .card 上应用。想保持风格统一，就得抄它的数值。
实操建议：
- 查 Bootstrap 5 源码或 DevTools：其
.shadow对应的是box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) - 若项目已引入 Bootstrap SCSS，可直接引用变量：
$box-shadow: var(--bs-box-shadow);（需在支持 CSS 变量的环境下） - 更稳妥的做法是复制值并微调，例如增强悬停效果：
box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.2);—— 比默认.shadow更明显，又不突兀
移动端触摸设备上 hover 不触发？需要兼容 :focus-within 或 JS fallback
纯 CSS :hover 在 iOS Safari 和部分安卓浏览器中，对无焦点元素（如普通 div.card）可能完全不响应，尤其当卡片内无可聚焦子元素时。
实操建议：
- 给卡片加
tabindex="0"，使其可获得焦点，再用.card:focus-within或.card:focus触发阴影（注意：这会改变键盘导航行为） - 更通用的做法是加一个透明的
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="stretched-link"></a>（Bootstrap 内置）包裹卡片内容，它自带tabindex且不影响布局 - 若需精确控制，用轻量 JS 监听
touchstart并临时加 class：element.classList.add('is-hovered')，再配 CSS.card.is-hovered { box-shadow: ... }
阴影过渡生硬？必须显式声明 transition 属性
即使写了 :hover { box-shadow: ... }，阴影也不会淡入——因为 box-shadow 默认无过渡动画。用户会感觉“啪一下就变深”，体验割裂。
实操建议：
- 务必补上过渡声明：
.card { transition: box-shadow 0.2s ease-in-out; } - 避免写
transition: all 0.2s;，它会把所有属性都过渡，可能引发意外重绘（比如边框、背景色） - 时间值选 0.15s–0.3s 较自然；
ease-out比ease-in更适合阴影入场，视觉上更轻盈
.container-fluid 或有 overflow: hidden 的父容器里时，阴影会被裁剪——得检查父级是否设置了 overflow: hidden 或缺少 position: relative。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
