17370845950

按钮阴影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 {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
  }
  .btn:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  }

避免 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、写在默认态、选对缓动函数。不复杂但容易忽略。