卡片阴影失效需手动添加css类并加!important覆盖；触屏设备应改用:active+transition模拟反馈；图片需用card-img-top或object-fit确保阴影对齐；堆叠卡片要增大gap或提升z-index。
卡片阴影在不同设备上失效怎么办
Bootstrap 默认的 shadow-* 工具类（如 shadow-sm、shadow、shadow-lg）只作用于元素自身，不随悬停动态增强；且部分旧版 Bootstrap（v4.6 及更早）未提供 shadow-hover 类。直接写 class="card shadow hover:shadow-lg" 在非 Tailwind 环境下无效——Bootstrap 本身不支持 CSS 的 :hover 工具类。
真正起效的方式是手动补一层自定义 CSS，或利用 Bootstrap 5.3+ 新增的 shadow-hover（仅限官方 alpha 版本，生产环境慎用）。稳妥做法是自己加：
.card-hover-shadow:hover {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
注意：必须加 !important 覆盖 Bootstrap 原有 box-shadow 声明；否则移动端 Safari 或某些 Android WebView 会因层叠优先级问题不生效。
响应式悬浮阴影如何适配移动设备
用户手指点击无法触发 :hover，但部分安卓浏览器和 iOS Safari 仍会短暂模拟 hover 效果（尤其在「快速点击」后），导致阴影闪一下就消失，体验割裂。不能依赖纯 :hover 实现“响应式交互”。
- 对触屏设备，改用
:active+transition模拟按下反馈：.card-hover-shadow:active { transform: translateY(-2px); } - 用
@media (hover: hover) and (pointer: fine)区分鼠标设备，只对这类设备启用:hover阴影 - 避免在
col-12或col-md-6卡片上设过重阴影（如shadow-xl），小屏下会挤压内容边距，实际可用shadow-sm配合hover:shadow-md
卡片内图片拉伸导致阴影错位
常见错误是给 <img> 直接设 width: 100%，但未设 height: auto 或 object-fit: cover，造成图片高度塌陷或比例失真，阴影区域与视觉主体脱节。
正确做法：
- 用 Bootstrap 内置的
card-img-top类，并确保父容器<div class="card"> 未设固定 <code>height - 若需裁剪图片，加
style="object-fit: cover; height: 200px;"到<img>标签，而非靠max-height控制 - 阴影由
.card元素渲染，所以务必让卡片内容撑开高度——如果内部只有文字没换行，加min-height: 180px防止阴影“贴地” - 加大网格间距：
row g-4或row gap-6（Bootstrap 5.3+） - 给卡片加
position: relative和z-index: 1，确保悬浮时层级提升：.card-hover-shadow:hover { z-index: 2; } - 禁用卡片默认圆角（
rounded-0）可减少阴影边缘锯齿感，尤其在高 DPI 屏幕上
多个卡片堆叠时阴影被遮挡
Bootstrap 默认卡片使用 position: relative，z-index 为 0。当卡片并列排布（如 row + 多个 col），相邻卡片的阴影会互相覆盖，尤其在 gap 小于阴影扩散半径时（例如 shadow-lg 扩散约 1rem，而 gap-3 仅 0.75rem）。
解决方法：
阴影不是装饰细节，是视觉层级信号。卡片之间没有足够空间呼吸，再精细的 box-shadow 参数也救不回信息密度问题。
