直接写 box-shadow 在 .card 上没反应，是因为 bootstrap 5+ 的 .card 默认 box-shadow 被 !important 或 utility class（如 shadow-sm）覆盖，或样式优先级不足；需用开发者工具检查、自定义 class 覆盖，或通过 scss 变量修改；悬停阴影应显式声明 transition 并保持两个合法 box-shadow 值以实现平滑动画；移动端需用 @media (hover: hover) 区分设备，避免依赖 :hover。
为什么直接写 box-shadow 在 .card 上没反应？
因为 Bootstrap 5+ 的 .card 默认带 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)，但这个值被写在 !important 规则里（尤其在某些主题或定制版 CSS 中），或者被后续的 utility class（比如 shadow-sm / shadow-lg）覆盖。更常见的是：你加的样式优先级不够，或者没用 :hover 等伪类触发动态效果。
实操建议：
- 用浏览器开发者工具检查真实生效的
box-shadow声明，看是否被其他规则覆盖 - 避免直接修改 Bootstrap 源码；优先用自定义 class 覆盖，例如
.card-hover-shadow - 如果用了 Bootstrap 的 SCSS，推荐在变量层改
$card-box-shadow，但这是静态的，不满足“动态”需求
如何让卡片悬停时阴影变深、偏移更明显？
关键不是堆叠多个 box-shadow，而是控制过渡节奏和阴影参数变化。Bootstrap 自带 transition 不会自动作用于 box-shadow，必须显式声明。
实操建议：
- 给卡片添加基础过渡：
.card { transition: box-shadow .3s ease; } - 悬停时改三个参数：水平偏移（通常保持 0）、垂直偏移（加大）、模糊半径（加大）、透明度（提高黑度）
- 示例：
.card-hover-shadow { box-shadow: 0 2px 8px rgba(0,0,0,.1); } .card-hover-shadow:hover { box-shadow: 0 12px 24px rgba(0,0,0,.25); } - 注意：不要用
box-shadow: none切换，会导致过渡中断——始终保留两个合法的box-shadow值才能平滑动画
用 JavaScript 控制阴影强度是否必要？
95% 场景不需要 JS。CSS :hover、:focus-within 或媒体查询（如 @media (prefers-reduced-motion)）已足够。JS 只在以下情况值得介入：
- 需要根据滚动位置渐变阴影（如粘性导航下的卡片）
- 响应用户交互状态（如点击后保持高亮阴影，配合
.active类） - 服务端渲染中需动态注入不同阴影值（例如按卡片重要性分级）
若真要用 JS，别直接操作 style.boxShadow，而是切换 class：
cardElement.classList.toggle('shadow-heavy');再由 CSS 定义该 class 的 box-shadow 值——这样利于维护和复用。
移动端触摸设备下 :hover 失效怎么办？
iOS 和部分 Android 浏览器对 :hover 支持有限，尤其在无 hover 能力的设备上，悬停效果可能完全不触发。这不是 Bug，是规范行为。
实操建议：
- 用
@media (hover: hover)包裹悬停样式，确保只在支持 hover 的设备上启用 - 为触摸设备提供替代反馈，比如加
transform: scale(.98)或背景色微调，而非强依赖阴影 - 若必须统一行为，可监听
touchstart给卡片临时加 class，但要注意 touch/click 事件冲突（避免重复触发）
真正麻烦的不是怎么加阴影，而是让阴影在各种设备、各种交互路径下都稳定可感——这点容易被忽略，直到 QA 提出问题才补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
