按钮阴影hover时突显是因缺过渡动画，应给box-shadow单独设transition: box-shadow 0.3s ease;置于默认状态，hover仅改阴影值，并兼顾:active及缓动函数选择。
按钮阴影在 hover 时突然出现或消失，是因为默认没有过渡动画。只要给 box-shadow 加上 transition，就能让阴影淡入淡出变平滑。
给 box-shadow 单独设置 transition
不要只写 transition: all 0.3s;，这样会把所有属性都过渡，可能影响性能或引发意外动画。应该明确指定阴影：
-
推荐写法：
transition: box-shadow 0.3s ease; - 放在按钮的默认状态（非 hover）里，hover 中只需定义新的
box-shadow值 - 例如：
.btn {<br> box-shadow: 0 2px 4px rgba(0,0,0,0.1);<br> transition: box-shadow 0.3s ease;<br>}<br>.btn:hover {<br> box-shadow: 0 6px 12px rgba(0,0,0,0.15);<br>}
避免 hover 离开时“闪一下”
有时阴影在鼠标快速进出时跳变，常见原因是：
- hover 样式用了
transform或opacity，但没给它们加 transition，导致布局重排干扰阴影过渡 - 父容器有
overflow: hidden，裁剪了阴影扩散过程 —— 可临时加padding或调整z-index - 用
ease-in-out比纯ease更柔和，适合强调自然感
移动端也要注意触控反馈
在手机上，hover 不稳定，建议同时补上 :active 状态：
立即学习“前端免费学习笔记（深入）”；
.btn:active { box-shadow: 0 2px 6px rgba(0,0,0,0.2); }- 确保
transition也在默认状态声明，这样 :active → 默认 也有过渡 - 如需更明显点击反馈，可搭配轻微
transform: translateY(1px)并一同过渡
基本上就这些。关键就是：单独过渡 box-shadow、写在默认态、选对缓动函数。不复杂但容易忽略。
