必须显式添加 transition: box-shadow 0.2s ease-in-out 到 .card 常态规则，否则悬停时阴影突变或不生效；同时需确保选择器权重足够（如用 .card:hover），避免被 Bootstrap 默认的 box-shadow: none 或 !important 规则覆盖。
Bootstrap 5 默认的 .card 不带悬停阴影动画，必须手动覆盖或增强样式 —— 直接加 box-shadow 不够，关键在过渡时机和层级控制。
为什么直接写 box-shadow 悬停没反应？
常见原因是缺少过渡声明或被 Bootstrap 的默认样式压制。Bootstrap 5 的 .card 本身没有 transition，且其 box-shadow 值为空（none），导致 CSS 悬停无法平滑变化。
- 必须显式添加
transition: box-shadow 0.2s ease-in-out到.card - 确保选择器权重足够高（比如用
.card:hover而非泛泛的div:hover） - 避免被
!important或其他框架样式覆盖（检查 DevTools 中 computed 样式）
推荐的阴影值与响应式适配
Bootstrap 5 使用 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.15) 作为其 .shadow-sm 基础，但悬停建议增强：更明显、略偏下、保持自然感。
- 常规悬停：
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) - 稍强效果（适合产品卡片）：
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18) - 移动端可降级：用媒体查询减小
rem值，避免视觉过重
如何避免 z-index 层叠错乱？
当卡片相邻排列、且父容器有 overflow: hidden（如轮播图容器），悬停阴影可能被裁剪 —— 这不是阴影问题，是层叠上下文缺失。
立即学习“前端免费学习笔记（深入）”；
- 给卡片父容器加
position: relative和z-index: 1 - 卡片自身加
position: relative（确保z-index生效） - 不要依赖
z-index: auto，显式设为z-index: 2或更高（但别滥用，避免全局冲突）
最易忽略的是过渡属性写法：只写 transition: all .2s 会拖慢整个卡片重绘；务必限定为 transition: box-shadow .2s ease-in-out，否则字体、边框等微小变化也会触发过渡，造成卡顿感。
