应使用 transform: translatey() 实现文字上移，因 margin-top 会触发重排导致卡顿，而 transform 走 gpu 加速且不干扰布局；需包裹 span、设 inline-block、配合 overflow: hidden 和 position: relative 防溢出，并添加 transition 动画。
用 transform: translateY() 实现文字上移，别用 margin-top
直接改 margin-top 会导致布局重排（reflow），动画卡顿且无法硬件加速；transform 走 GPU，平滑得多。关键是把文字单独包裹一层，避免影响按钮整体尺寸。
- 给按钮内文字套一个
<span></span>，比如：<button><span>提交</span></button> - 默认状态设
transform: translateY(0)，悬停时设transform: translateY(-2px) - 必须加
transition: transform 0.2s ease-out，否则没动画
为什么必须用 overflow: hidden 和 position: relative？
不加这两条，上移时文字可能溢出按钮边界，尤其圆角按钮或带阴影时更明显。父容器（按钮）需约束子元素的渲染范围。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
button { position: relative; overflow: hidden; }-
button span { display: inline-block; }（确保transform生效） - 如果按钮有
padding，文字上移后视觉上会“顶到”内边距顶部，这是预期效果；若想留白，可微调translateY值，比如-1.5px
兼容性坑：IE11 不支持 transform 在 inline 元素上生效
IE11 下 <span></span> 默认是 inline，transform 无效。必须显式设为块级或 inline-block。
- 务必写
button span { display: inline-block; }，不能省略 - 如果项目还需支持 IE11，避免用
will-change: transform（它在 IE 中触发 bug） - Chrome/Firefox/Safari 无此问题，但统一加上
display: inline-block是最省心的做法
动画卡顿？检查是否意外触发了重绘
常见误操作会让浏览器频繁重排重绘，比如在悬停里改 color + background + transform 一起动。性能敏感场景要克制。
- 只对
transform和opacity做transition，它们是“仅合成”属性 - 避免同时过渡
height、font-size或border—— 这些都会触发 layout - 可用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，看是否有大面积黄色闪烁
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
