伪元素::before或::after是实现button:hover边框中心扩散的唯一可靠方案，通过scale(0)→scale(1)配合transform-origin:center实现gpu加速动画，避免border-width变化导致的重绘抖动。
button:hover 时边框从中心向外扩散，用伪元素实现最稳
纯 CSS 实现边框扩散效果，::before 或 ::after 伪元素是唯一可靠方案。直接改 border 属性无法触发“从无到有”的扩散动画——因为 border-width 从 0 变到非零时，浏览器会强制重绘整个盒模型，导致抖动或跳变。
正确做法是：用伪元素画一个初始缩放为 0 的矩形，居中定位，再通过 transform: scale() 动画撑开它，视觉上就是边框从中心“炸开”。
-
::before必须设content: ""，否则不渲染 - 父
button要加position: relative，否则伪元素无法精确定位 - 伪元素宽高建议设为
100%，transform-origin: center保证从中心扩散 - 动画时间控制在
0.3s ~ 0.4s，太长显得迟滞，太短像闪断
CSS 代码里 scale(0) → scale(1) 是关键，别写成 width/height 动画
常见错误是试图用 width 和 height 从 0 拉伸伪元素，这会导致布局重排（reflow），尤其在 flex/grid 容器里容易引发相邻元素跳动。而 transform 是合成层动画，GPU 加速，性能无压力。
示例核心片段：
button {
position: relative;
overflow: hidden;
}
button::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 2px solid #3b82f6;
transform: scale(0);
transform-origin: center;
transition: transform 0.35s ease;
}
button:hover::before {
transform: scale(1);
}
注意：overflow: hidden 防止伪元素缩放时超出按钮边界；ease 比 linear 更自然，避免机械感。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
多方向边框扩散（如仅从上方滑入）需配合 transform 移位
如果需求不是“中心炸开”，而是“从上边滑入边框”，就不能只靠 scale()。此时要结合 translateY() 或 translateX() 控制起始位置。
- 从顶部滑入：伪元素初始
transform: translateY(-100%) scaleY(0)，hover 时变为scaleY(1) - 从左侧滑入：用
translateX(-100%) scaleX(0)→scaleX(1) - 四个方向同时滑入？得用四个伪元素，每个负责一个方向，分别控制
transform和transition-delay
单方向滑入的伪元素高度建议设为 2px（对应边框粗细），而不是 100%，否则动画会拉伸整块区域而非仅边框线。
移动端 Safari 和旧版 Chrome 里 scale(0) 可能渲染异常
某些 iOS Safari 版本（特别是 15.x 之前）对 scale(0) 的伪元素有渲染 bug：首次 hover 时可能不触发动画，或出现残留白点。 workaround 是把初始状态改成 scale(0.001) 而非 scale(0)，肉眼不可见，但绕过渲染引擎的“零尺寸优化”逻辑。
另外，若按钮用了 backdrop-filter（比如毛玻璃效果），伪元素必须加 z-index: -1，否则滤镜会把边框虚化掉——这不是 bug，是 CSS 渲染层级规则决定的。
真正难调的从来不是怎么写，而是怎么让 scale 在各种设备上都“刚好不卡、不闪、不漏”。动手前先在真机上连按三次 hover 看有没有残影，比看文档管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
