按钮:hover阴影必须用box-shadow而非text-shadow，需配合transition实现平滑过渡，参数应控制垂直偏移≤4px、模糊半径6–12px、扩散半径常用负值增强浮起感，并兼顾移动端触摸反馈与wcag对比度要求。
button:hover 用 box-shadow 实现阴影，别用 text-shadow
text-shadow 只影响文字，对按钮整体无效；真正要控制按钮悬浮时的阴影，必须用 box-shadow。它作用于整个元素盒模型，支持偏移、模糊、扩散和颜色四个维度，且能配合 :hover 状态平滑过渡。
常见错误是直接写 box-shadow: 0 2px 4px rgba(0,0,0,0.2) 就完事——这样悬停前后无过渡，视觉生硬；或者漏掉 transition，导致阴影“啪”一下弹出来。
- 必须给按钮本身加
transition: box-shadow 0.2s ease（或更短的0.15s），否则阴影变化无缓动 -
box-shadow值顺序固定：水平偏移、垂直偏移、模糊半径、扩散半径、颜色；后两个常被忽略，但扩散半径（第4个值）能有效增强「浮起感」 - 避免用纯黑
rgba(0,0,0,0.3)，推荐偏蓝灰的rgba(0,0,0,0.12)或带色温的rgba(90, 90, 120, 0.15)，更自然
阴影参数调得太重反而显得沉，不是越深越好
很多初学者以为阴影值越大越「立体」，结果调成 box-shadow: 0 8px 24px 4px rgba(0,0,0,0.3)，按钮像陷在水泥里——实际悬浮是轻量上提，不是砸进地面。
关键判断标准：阴影边缘是否清晰到抢眼？按钮是否还看得清自身边界？如果答案是肯定的，说明模糊半径（第3个值）或颜色透明度太高了。
- 推荐起手值：
box-shadow: 0 2px 6px -2px rgba(0,0,0,0.1), 0 4px 12px -2px rgba(0,0,0,0.08)（双层阴影，更细腻） - 垂直偏移建议 ≤ 4px，超过会让按钮看起来「跳」而不是「浮」
- 模糊半径控制在 6–12px 区间；低于 4px 边缘太硬，高于 16px 易糊掉按钮轮廓
- 扩散半径（第4个值）用负数（如
-2px）可收紧阴影，强化上浮感；正数会扩大阴影范围，慎用
移动端触摸无 :hover，得补一层 focus-visible 或 JS fallback
iOS 和 Android 大部分浏览器不触发 :hover（尤其真机），只靠 CSS 悬浮阴影在手机上基本不可见。这不是 bug，是规范行为。
不能只依赖 :hover，否则用户点按钮时完全没反馈。必须叠加键盘焦点或触摸态支持。
- 加
&:focus-visible规则，覆盖键盘操作场景：button:focus-visible { box-shadow: ... } - 对触摸设备，用
@media (hover: none)单独定义点击态阴影，或监听touchstart动态加 class - 简单方案：直接给按钮加
:active状态阴影，但注意:active持续时间极短，需搭配transition才能看清
阴影和背景色对比度不够，按钮会「消失」
浅色按钮配浅灰阴影（比如 background: #f8f9fa + box-shadow: 0 2px 4px rgba(0,0,0,0.05)），在白底上几乎看不出变化——不是阴影没生效，是对比度太低。
检查方式：把页面截图转成灰度图，看悬停前后明暗差异是否明显。差值小于 10% 就属于无效反馈。
- 深色背景上，阴影颜色透明度可略高（
0.15–0.2），但避免用纯白阴影 - 浅色按钮务必加大阴影色差，例如改用
rgba(0,0,0,0.12)而非0.05，或微调模糊值让边缘更实 - 别忘了检查 WCAG 对比度要求：按钮文本与背景、按钮与阴影之间都需满足最低可读性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
