应使用 transform: translatey(-2px) 实现悬浮上移，避免 margin 或 top 引发重排；需配合 transition、transform-origin: bottom center，并同时支持 :hover、:focus 和 :focus-visible 以保障可访问性与跨设备兼容性。
用 CSS transform 实现悬浮上移，别用 margin 或 top
直接改 margin-top 或 top 会触发重排（reflow），影响性能；transform: translateY(-2px) 只触发重绘（repaint），更轻量。几乎所有现代浏览器都支持，包括 Safari 12.1+、Chrome 36+、Firefox 16+。
常见错误是写成 transform: translate(-2px, 0)（水平偏移）或漏掉单位（translateY(-2) 不生效）。
- 上移距离建议控制在
-2px到-4px之间，太大会破坏按钮对齐 - 配合
transition让动画平滑，例如transition: transform 0.15s ease-in-out - 确保父容器没有
overflow: hidden，否则上移后可能被裁切
button 元素自带 focus 状态，hover 之外还要处理键盘交互
只写 :hover 会让键盘用户（Tab 切换）无法看到相同反馈，不符合可访问性要求。必须同时加 :focus 和 :focus-visible。
示例写法：
button {
transition: transform 0.15s ease-in-out;
}
button:hover,
button:focus,
button:focus-visible {
transform: translateY(-2px);
}
注意：:focus-visible 是为避免鼠标点击后还保留焦点框，但目前 Safari 支持有限，稳妥起见先保留 :focus。
移动端没有 hover，需用伪类或 JS 检测触控
iOS 和 Android 的 Chrome 默认不触发 :hover，除非用户点过一次——这导致首次点击无反馈。纯 CSS 方案无法可靠解决，得靠 JS 监听 touchstart 加 class。
- 简单做法：给 button 加
ontouchstart=""（空属性），强制 iOS 启用 hover - 更健壮做法：用 JS 判断是否触控设备，动态加
is-touching类，再写对应样式 - 别用
@media (hover: hover)做条件判断——它在 iOS Safari 上返回 false，但实际有 hover 模拟，容易误判
按钮文字别跟着上移，要用 transform-origin 控制锚点
如果按钮内含图标或文字不对齐，上移后可能出现视觉抖动。默认 transform-origin 是 50% 50%（居中），但按钮通常希望“底部不动、顶部上提”，所以设成 bottom center 更自然。
完整推荐写法：
button {
transform-origin: bottom center;
transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover,
button:focus {
transform: translateY(-3px);
}
贝塞尔曲线选 cubic-bezier(0.25, 0.46, 0.45, 0.94) 比 ease-in-out 更有弹性感，但别过度调参——微调 1–2px 和 0.05s 就够了。
真正难的是让所有按钮在不同字号、行高、padding 下保持一致上移量，得统一用 rem 或 em 单位，并在设计系统里固化这个偏移值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
