卡片悬停阴影不生效需同时设置box-shadow和transition，缺一不可；Bootstrap默认无悬停效果，须手动添加；注意overflow: hidden防溢出；移动端需补充:active状态和-webkit-tap-highlight-color；阴影参数应依场景调整blur-radius和alpha值。
卡片悬停时阴影不生效？检查 box-shadow 和 transition 是否同时设置
Bootstrap 默认的 .card 组件本身不带悬停阴影，必须手动加 CSS。常见错误是只写 box-shadow 却漏掉 transition，导致悬停时阴影“啪”一下硬切，没有渐变效果。真正可用的组合是两者缺一不可：
-
box-shadow定义阴影大小、模糊度和颜色（例如0 4px 12px rgba(0,0,0,0.1)） -
transition控制变化过程（推荐用box-shadow 0.2s ease-in-out，避免用all） - 别忘了给
.card设overflow: hidden，否则圆角+阴影叠加时边缘可能溢出
用 Bootstrap 5 的 shadow 工具类配合自定义 hover 更省事
Bootstrap 5 内置了 shadow-sm、shadow、shadow-lg 等工具类，但它们默认不响应 hover。你可以复用这些预设值，避免重复写 CSS：
- 在 HTML 中保留基础阴影：
<div class="card shadow-sm"> - 再加一行自定义样式：
.card:hover { box-shadow: var(--bs-shadow-lg) !important; } - 注意加
!important—— 否则 Bootstrap 的shadow-sm会覆盖 hover 后的值 - 如果用了深色主题或自定义 CSS 变量，确认
--bs-shadow-lg确实存在（可通过 DevTools 查看 computed styles）
移动端点击无反馈？补上 -webkit-tap-highlight-color 和 active 状态
iOS Safari 和部分安卓浏览器对 :hover 支持有限，纯 :hover 在触摸设备上基本不触发。要让卡片在手机上也有“按下去变深”的反馈，得额外处理 :active：
- 加这条规则：
.card:active { box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important; } - 为防止点击时出现半透明灰块，顺手加：
.card { -webkit-tap-highlight-color: transparent; } - 别指望
:hover+:active能完全模拟原生按钮手感 —— 触摸延迟和视觉反馈节奏和鼠标不同，接受这点比硬调更实际
阴影太重或发虚？调整 blur-radius 和 color alpha 值最有效
很多人直接复制网上的 box-shadow: 0 10px 20px rgba(0,0,0,0.2)，结果在浅色背景上像蒙了层灰。关键不是参数多，而是匹配场景：
立即学习“前端免费学习笔记（深入）”；
- 卡片内容轻量（如用户头像卡）：用
0 2px 6px rgba(0,0,0,0.08)——blur-radius小于 8，alpha ≤ 0.1 - 需要突出主操作区（如商品卡片）：加大
spread-radius，比如0 4px 12px 2px rgba(0,0,0,0.08) - 深色模式下别硬套同一组 rgba 值，改用
rgba(255,255,255,0.06)这类高亮偏白的阴影 - 所有阴影值都建议用
px单位，避免用rem或em—— 阴影尺寸需绝对可控
