hover时box-shadow变深无反应，主因是overflow:hidden裁剪、CSS层叠覆盖或参数调整不当；应增大模糊半径和透明度、保持水平偏移为0、配合transform和transition优化，并针对iOS Safari改用JS触控方案。
hover时box-shadow变深但没反应？检查是否被其他样式覆盖
最常见的情况是元素本身有 box-shadow，但 :hover 里写的阴影值没生效——不是写法错，而是被父容器的 overflow: hidden 截掉了，或者被更早声明的同名规则覆盖（CSS 层叠顺序问题）。务必打开开发者工具，看 hover 状态下 box-shadow 是否真的被计算（computed 标签页），而不是只在 styles 里“显示了”。
- 确保悬停选择器权重不低于原始状态，比如原始是
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }，hover 就别写成.card:hover以外更低权重的形式 - 如果卡片有圆角（
border-radius）且父容器设了overflow: hidden，加深阴影会直接被裁掉——去掉overflow或改用clip-path替代 - 避免在 hover 中只改
box-shadow的颜色或模糊值却忘了调整偏移量，否则视觉上可能“没动”，例如从0 2px 4px到0 2px 12px才明显，只加rgba(0,0,0,0.3)不够
box-shadow参数怎么调才显得“加深”而不是“位移”
“加深”本质是增强纵深感，核心靠增大模糊半径（第三个值）和提升颜色透明度（第四个值），而不是拉长偏移（前两个值）。偏移值乱加反而让卡片像被推开，失去悬浮贴合感。
- 推荐基础对比：
box-shadow: 0 2px 4px rgba(0,0,0,0.1);→box-shadow: 0 4px 12px rgba(0,0,0,0.2); - 第二个值（垂直偏移）略增（如 2px → 4px）能强化“抬起”错觉，但别超过 6px，否则失真
- 第三个值（模糊）至少翻倍（4px → 12px），这是“变深”的主因；再配合第四个值（透明度）从 0.1 提到 0.2～0.25
- 别漏掉第一个值（水平偏移），保持为 0，否则阴影歪向一边，破坏居中悬浮感
加transition让阴影变化顺滑，但别只过渡box-shadow
只写 transition: box-shadow 0.3s; 看似合理，但实际容易卡顿或闪烁——因为浏览器对 box-shadow 的重绘优化不如 transform。更稳的做法是把阴影变化和轻微位移/缩放组合起来，利用硬件加速。
- 正确写法：
transition: box-shadow 0.3s ease, transform 0.3s ease; - hover 中同步加
transform: translateY(-2px);，能强化悬浮反馈，且比纯阴影更流畅 - 避免用
transition: all 0.3s;，它会意外触发文字、边框等无关属性动画，拖慢性能 - 如果卡片内容多或层级深，加
will-change: transform;到常态样式里（非 hover），提前提示浏览器优化
兼容性与移动端的坑：iOS Safari不触发:hover？
真机上 hover 基本无效——iOS Safari 对 :hover 的支持仅限于用户明确点击后短暂激活，不会持续响应。纯 CSS 悬停在移动端等于不存在。
立即学习“前端免费学习笔记（深入）”；
- 方案一：用 JavaScript 监听
touchstart给元素加临时 class（如.is-hovered），再用该 class 控制阴影 - 方案二：放弃 hover，改用 focus-within 或点击切换状态（适合卡片可点击场景）
- 方案三：服务端/UA 判断，PC 流量走 hover，移动端走 JS 方案，避免混合逻辑混乱
- 测试时务必用真机 Safari 打开，模拟器里的 hover 行为和真实设备差异极大
