移动端:hover点一下没反应，是因为iOS Safari和Android Chrome默认不将:hover视为触控主交互模式，仅在外接鼠标或首次点击后临时激活一次，之后即失效；解决方法为改用<button>元素或通过JS监听touchstart添加.is-hovered类模拟。
移动端:hover为什么点一下没反应
因为 iOS Safari 和 Android Chrome 默认不把 :hover 当作触控主交互模式——它只在模拟鼠标（比如外接蓝牙鼠标）或首次点击后临时激活一次，之后就失效。纯 <div class="card"> 在手机上点十次，阴影大概率纹丝不动。
解决办法只有两个，且必须选其一：
- 把卡片换成
<button type="button" class="card">，并加cursor: pointer和outline: none（但要保留 focus 样式供键盘用户使用） - 用 JavaScript 监听
touchstart或pointerdown，动态加一个.is-hovered类，CSS 里写.card.is-hovered { box-shadow: ... }
别指望 @media (hover: hover) 能兜底，iOS Safari 对它的支持极不稳定，实测多数机型直接忽略。
box-shadow 参数在手机上为何显得“发灰”或“糊边”
高 DPI 屏幕（如 iPhone Retina、安卓旗舰）对亚像素渲染敏感，box-shadow: 0 0.5px 2px rgba(0,0,0,0.1) 这类写法在 Safari 下容易模糊抖动；而浅色背景上用 rgba(0,0,0,0.2)，又会让卡片像蒙了层雾，不是阴影，是脏感。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 所有数值用整数：
1px、4px、12px，避开0.5px、1.2px - 模糊半径不低于
2px，1px在 Retina 屏上几乎不可见 - 浅色背景用
rgba(0,0,0,0.08)，深色背景改用rgba(255,255,255,0.06)，别硬套 Bootstrap 的0.15 - 真要精细控制，换
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08))，它绕过盒模型限制，Safari 渲染更稳（但不支持内阴影）
transition 写在哪？为什么移出时阴影“啪”地跳回
很多人把 transition 写在 .card:hover 里，结果鼠标移入有动画，移出直接跳变——因为基础状态没声明过渡行为，浏览器默认“立刻还原”。
正确做法是：
-
transition必须写在基础选择器上，比如.card { transition: box-shadow 0.25s ease; } - 只过渡
box-shadow和必要辅助属性（比如transform: translateY(-2px)），禁用all - 如果用了
filter: drop-shadow()，别跟box-shadow混用，二者渲染路径不同，叠加会导致边缘发虚
移动端触摸反馈怎么不“粘滞”
纯 :hover 在 iOS Safari 和部分安卓浏览器上不触发，且没有“按下→释放”的状态区分，导致反馈延迟或失效。
必须补充 :active 状态：
&:active { transform: translateY(0); box-shadow: 0 2px 6px -2px rgba(0,0,0,0.1); }- 为避免点击后阴影残留，建议把悬停和激活的阴影值设为一致，或让
:active的阴影略小于:hover（模拟按压回弹感） - 不要依赖
touchstart手动加 class——CSS 原生伪类更轻量，且能被浏览器优化
真正难的不是写出一串参数，而是理解 y-offset 和 blur-radius 的比例关系，以及它们在触控场景下如何被浏览器解释和渲染。很多“卡”“假”“点不动”的问题，其实都卡在这一层隐含逻辑里。
