移动端:hover失效是因触控无悬停状态，需同时声明:hover和:active；box-shadow须用整数参数、统一过渡写在默认态、高DPI屏避小数、深色背景改浅色透明阴影。
移动端带模糊阴影的悬浮按钮，box-shadow 能实现，但直接照搬桌面写法大概率失效：点一下没反应、阴影发灰、移出时“啪”地跳回、高DPI屏上糊边抖动——问题不在语法，而在触控逻辑和渲染机制。
为什么移动端 :hover 点一下就失效
iOS Safari 和 Android Chrome 默认不把 :hover 当作触控主交互模式。它只在首次点击后临时激活一次（模拟鼠标悬停），松手即失；后续再点，:hover 样式不会持续生效。这不是 bug，是规范行为。
- 别指望
@media (hover: hover)兜底——iOS Safari 对它的支持极不稳定，多数机型直接忽略 - 必须同时声明
:hover和:active，例如：button:hover, button:active { box-shadow: ... } - 语义化优先：用
<button>标签而非<div>，并加cursor: pointer，部分安卓浏览器会因此启用更可靠的伪类触发
box-shadow 参数在手机上怎么配才不发灰、不糊边
高DPI 屏（iPhone Retina、安卓旗舰、Mac 缩放 125%+）对亚像素敏感，box-shadow 的小数数值或过浅透明度会直接导致渲染失真。
- 所有值必须用整数：
0 4px 12px -2px✅，禁用0 0.5px 2px❌ - 模糊半径至少设
4px，1px或2px在 Retina 屏上几乎不可见 - 浅色背景用
rgba(0,0,0,0.12)，深色背景改用hsla(0,0%,100%,0.1)或rgba(255,255,255,0.1)，别硬套桌面端的0.15 - 若 Safari 下仍糊边，可退而求其次用
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12))，它绕过盒模型限制，渲染更稳（但不支持inset）
阴影动画“移出时跳变”的根本原因
很多人把 transition 写在 :hover 里，结果鼠标移入有缓动，移出却立刻还原——因为基础状态没声明过渡行为，浏览器默认“立刻执行”，不是动画中断。
立即学习“前端免费学习笔记（深入）”；
- 必须把
transition: box-shadow 0.25s ease写在默认状态（如.fab类），而不是.fab:hover - 别用
transition: all 0.25s，否则background-color或transform变化会干扰阴影焦点 - 如果按钮还用了
transform: scale()，确保它和box-shadow的transition时长、缓动函数一致，否则视觉脱节
固定定位悬浮按钮（position: fixed）的阴影被裁切怎么办
右下角悬浮按钮（如客服图标）常因父容器设了 overflow: hidden 或 overflow: clip 导致阴影刚出来就被剪掉——不是没生成，是被“砍”了。
- 检查按钮最近的非
static定位祖先，删掉它的overflow: hidden；若必须保留清浮动，改用display: flow-root - 给按钮自身加
z-index: 9999，防被其他fixed元素（如导航栏）遮挡 - 避免用
margin-bottom“留阴影空间”——它不扩大渲染区域，纯属误导；阴影范围由box-shadow的参数决定
真正难的不是写出那几行 CSS，而是记住：移动端没有“悬停”，只有“按住”和“松开”；阴影不是越模糊越好，而是要匹配设备像素比与背景明度；动画是否自然，取决于 transition 是否落在初始状态，而非 hover 状态。
