移动端:hover点一下没反应，是因为ios safari和android chrome默认不将:hover视为触控主交互模式，仅在模拟鼠标或首次点击后临时激活一次即失效；解决办法是改用语义化标签并加cursor: pointer，或用js监听touchstart添加.is-hovered类配合css实现可靠悬停效果。
移动端:hover为什么点一下没反应
因为 iOS Safari 和 Android Chrome 默认不把 :hover 当作触控主交互模式——它只在模拟鼠标（比如外接蓝牙鼠标）或首次点击后临时激活一次，之后就失效。纯 <div class="card"> 在手机上点十次，阴影大概率纹丝不动。
<p>解决办法只有两个，且必须选其一：</p>
<ul>
<li>把卡片换成 <code><button type="button" class="card"></button>，并加 cursor: pointer 和 outline: none（但要保留 focus 样式供键盘用户使用）
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 {
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover,
.card.is-hovered {
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
注意三点：
- 别用
transition: all 0.25s，会连background-color一起动，干扰视觉焦点 - 时间控制在
0.2s–0.25s，手机端再长就显迟滞 - 进效用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（接近ease-out），退效浏览器自动按反向缓动，不用额外写
父容器overflow: hidden导致阴影被裁，怎么救
卡片阴影本身不占布局空间，但会被设置了 overflow: hidden 的祖先容器直接裁掉——尤其常见于 Bootstrap 的 .row、自定义 .wrapper 或 Flex/Grid 容器。
解法优先级如下：
- 首选：删掉父容器的
overflow: hidden，改用overflow: clip（现代浏览器支持，不触发重排） - 次选：给卡片加足够
margin预留空间，比如margin: 0 -8px;（负边距抵消裁剪） - 慎用：加
position: relative+z-index: 1，仅解决遮挡问题，不解决裁剪
如果必须保留 overflow: hidden 且无法改结构，那就别依赖阴影表达“悬浮”——移动端用户真正需要的是明确的点击反馈（比如背景色微变 + 图标旋转），不是视觉深度。
