box-shadow 是实现按钮悬浮“浮起”效果最直接高效的方式，需配合垂直偏移、模糊扩散与颜色变深三层参数，并通过 transition 实现自然缓动；深色背景应改用浅色透明阴影，且需同时适配 :hover 和 :active 以覆盖触屏场景。
button:hover 用 box-shadow 实现浮起阴影
按钮悬浮时“浮起来”，本质是视觉上抬高 + 投下更重的阴影，box-shadow 是最直接、开销最小的实现方式。不用 transform 模拟位移（那会触发重排），也不用额外伪元素（增加 DOM 复杂度）。
关键不是加阴影，而是让阴影有「底部偏移 + 模糊扩散 + 颜色变深」三层配合：
-
box-shadow: 0 4px 12px rgba(0,0,0,0.15)是基础值：垂直偏移4px模拟抬升，12px模糊半径撑开阴影范围，rgba(0,0,0,0.15)控制深度和通透感 - 如果只加模糊不加偏移（比如
0 0 12px），看起来像发虚，不是浮起 - 偏移量别超过
6px，否则在小按钮上显得突兀；大按钮可到8px，但要同步加大模糊半径（如20px）来平衡
必须配 transition 才自然
没有过渡动画的 box-shadow 切换，会像灯泡开关一样生硬。浮起效果依赖人眼对“缓动”的感知，transition 不只是锦上添花，而是效果成立的前提。
- 只过渡
box-shadow即可：transition: box-shadow 0.2s ease;—— 不要写all，避免意外触发其他属性动画 -
ease比linear更符合物理惯性；0.2s是实测较舒服的时长，0.15s稍快，0.25s开始拖沓 - 务必在默认状态（非 hover）就声明
transition，否则首次 hover 会有延迟启动感
暗色背景下的阴影颜色容易翻车
用 rgba(0,0,0,0.15) 在白底上很稳，但放到深灰或黑色背景上，阴影就“消失”或反向发亮。这不是 bug，是明度对比失效。
立即学习“前端免费学习笔记（深入）”；
- 深色背景请改用浅灰带透明度：
box-shadow: 0 4px 12px rgba(255,255,255,0.1) - 更稳妥的做法是用
hsl()动态适配：box-shadow: 0 4px 12px hsla(0,0%,100%,0.1)，语义清晰且易维护 - 千万别用纯白
rgb(255,255,255)不加 alpha —— 那会变成一块刺眼亮斑
移动端 hover 无效？得补 touch 交互
iOS 和 Android 的现代浏览器其实支持 :hover，但仅限于“悬停后立刻点击”的短暂状态，松手即失。真正在触摸屏上模拟“按住浮起”，得靠 :active。
- 把浮起样式同时写给
:hover和:active：button:hover, button:active { box-shadow: ... } - 注意
:active的阴影偏移可以略小（如2px），因为手指按压的“沉降感”比悬停弱 - 不建议用 JavaScript 监听
touchstart加 class —— 增加事件绑定、还要防重复触发，纯 CSS 更轻量可靠
真正难的不是写出这三行 CSS，而是记住：浮起效果的可信度，取决于阴影是否随按钮尺寸、背景明度、设备输入方式动态调整。固定一套值套所有场景，十次有八次会显得假。
