能实现，但必须用 ::before 模拟边框环：伪元素设 absolute + inset: 0 + border + transform: scale(0) + transform-origin: center + transition，按钮本体需 relative + overflow: hidden，并同步 border-radius 以保证视觉贴合。
能实现，但必须用 ::before 模拟边框环，不能直接动 border 属性本身。 直接对 border 做 scale 会导致元素尺寸重算、定位偏移，hover 瞬间会“跳一下”——这不是视觉动效，是 bug。
为什么不能直接 scale border
浏览器把 border 当作盒模型的一部分，transform: scale() 作用在有 border 的元素上时，会连带影响 offsetWidth 和布局流。更关键的是：::before 若设了 border 又做 scale，其 inset 定位基准会漂移，缩放中心默认是左上角，不是按钮中心。
::before 边框环的最小必要配置
核心是把伪元素当成一张独立“贴纸”，只负责画圈，不参与布局：
-
position: absolute+inset: 0（等价于四边全为 0），让它严丝合缝盖住按钮内容区 -
border: 2px solid #3b82f6—— 边框粗细和颜色在这里定，别写在按钮本体上 -
transform: scale(0)+transform-origin: center—— 缩放起点必须显式设为center，否则从左上角炸开 -
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)—— 这个缓动比ease-out更有“弹出”感，避免收尾拖沓
按钮本体必须加的两个声明
缺一不可，否则扩散会破框或错位：
-
position: relative—— 为::before提供绝对定位的参照容器 -
overflow: hidden—— 防止scale(1)时伪元素边缘因抗锯齿或渲染误差轻微溢出，尤其在高 DPR 屏幕上明显
容易被忽略的兼容性细节
这个方案在 Chrome 90+、Firefox 85+、Safari 15.4+ 表现一致，但有三点必须手动校验：
- 如果按钮用了
border-radius，::before的border不会自动圆角化 —— 实际上它就是个矩形框，视觉上“贴合”靠的是和按钮同尺寸+同圆角值，所以务必让按钮本体也设border-radius: 8px（举例），否则转角处会露白边 - 移动端 Safari 对
transform-origin: center在inset: 0伪元素上的解析偶有偏差，建议加will-change: transform提前触发 GPU 加速 - 不要给
::before设z-index—— 它天然在按钮内容层之下；若要压文字，得用z-index: -1+pointer-events: none，否则会吞点击
真正难调的不是代码行数，而是 inset 值、border-width 和 border-radius 三者数值的咬合精度。差 0.5px，转角就断光；缓动函数选错，扩散就显得僵硬。这些没法靠复制粘贴解决，得在 DevTools 里实时拖动调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
