移动端:hover点一下没反应，因ios safari和android chrome默认不将:hover视为主交互模式，仅在模拟鼠标或首次点击后临时激活一次即失效；须改用标签加cursor: pointer，或js监听touchstart添加.is-hovered类实现可靠悬停。
移动端:hover为什么点一下没反应
因为 iOS Safari 和 Android Chrome 默认不把 :hover 当作触控主交互模式——它只在模拟鼠标（比如外接蓝牙鼠标）或首次点击后临时激活一次，之后就失效。纯 <div class="card"> 在手机上点十次，阴影大概率纹丝不动。
<p>必须二选一：<br>• 把卡片换成 <code><button type="button" class="card"></button>，并加 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 里，结果鼠标移入有动画，移出直接跳变——因为基础状态没声明过渡行为，浏览器默认“立刻还原”。
正确做法：
• 必须在默认状态（即 .card）里声明 transition
• 只过渡必要属性：box-shadow 和 transform，禁用 all
• 示例：
.card {<br> transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),<br> transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);<br>}
• 不要对
filter: drop-shadow() 做过渡——它不支持硬件加速，移动端易掉帧
移动端点击反馈怎么不“粘滞”
纯 :hover 在 iOS Safari 和部分安卓浏览器上不触发，且没有“按下→释放”的状态区分，导致反馈延迟或失效。
必须补上 :active 状态：
• &:active { transform: translateY(0); box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1); }
• 建议把 :hover 和 :active 的阴影值设为一致，或让 :active 的略小（模拟按压回弹感）
• 不要依赖 touchstart 手动加 class——CSS 原生伪类更轻量，且能被浏览器优化
真正难的不是写出一串参数，而是理解 y-offset、blur-radius、spread-radius 三者如何协同模拟物理高度——漏掉任意一层，用户都会觉得“卡”“假”或者“点不动”。尤其是 transition 列表写宽了，比写少了更难排查。
