用 box-shadow 配 :hover + transition 就够了，别加 transform 位移；真正要调的是垂直偏移、模糊半径和透明度三者比例，其中模糊半径（第三值）和垂直偏移（第二值）协同变化才产生自然“扩张”感，水平偏移须为0，transition 必须写在常态样式中且仅限 box-shadow，深色背景需改用浅色透明阴影，父容器 overflow: hidden 会裁剪阴影。
直接给结论：用 box-shadow 配 :hover + transition 就够了，别加 transform 位移——它会触发重排，且和“阴影扩张”无关；真正要调的是垂直偏移、模糊半径和透明度三者比例。
为什么只改 box-shadow 的三个值就能看出“扩张”感
人眼判断阴影是否“变大”，主要依赖模糊半径（第三个值）和垂直偏移（第二个值）的协同变化。只加大透明度或只拉长偏移，都会失真：
- 模糊半径从
4px→12px：这是“扩张”的主因，让阴影边缘发散、覆盖范围明显增大 - 垂直偏移从
2px→4px：模拟物体被托起后与底面距离变大，阴影自然下移并略拉长 - 透明度从
rgba(0,0,0,0.1)→rgba(0,0,0,0.2)：不是单纯变“黑”，而是增强纵深对比，避免发虚 - 水平偏移必须保持
0：否则阴影歪斜，破坏居中悬浮感
transition 必须写在常态样式里，且只限定 box-shadow
很多人 hover 时阴影“闪一下才动”，是因为把 transition 写在了 :hover 规则里。浏览器首次计算过渡时会延迟启动：
- 正确写法：
.btn { transition: box-shadow 0.2s ease; }—— 常态就声明，首次悬停也顺滑 - 别写
transition: all 0.2s：按钮若有文字颜色、背景色等变化，会意外拖慢渲染，甚至造成闪烁 -
ease比linear更自然：符合物理惯性，0.2s 是实测响应与质感的平衡点；0.15s 稍快，0.25s 开始拖沓
深色背景上阴影“消失”？不是 bug，是明度反了
默认用 rgba(0,0,0,0.2) 在白底上没问题，但放到 #1e1e1e 这类深灰背景上，阴影会看不见，甚至发亮——因为黑色在暗背景下不形成有效对比：
- 深色背景请换浅色透明阴影：
box-shadow: 0 4px 12px rgba(255,255,255,0.1) - 更稳妥用
hsla(0,0%,100%,0.1)：语义清晰，后期维护时一眼看懂是“白+透” - 绝对不要用
rgb(255,255,255)不带 alpha：那是一块刺眼亮斑，不是阴影 - 移动端需同时写
:active：.btn:hover, .btn:active { ... }，否则触屏按压无反馈
最容易被忽略的其实是父容器的 overflow: hidden——它会直接裁掉扩大的阴影，导致 hover 后“没变化”。遇到这种情况，先检查 computed 样式里的 box-shadow 是否真实生效，而不是只盯着 styles 面板看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
