border动画易抖动是因为border-width或border-style变化触发重排；最可靠方案是固定border-width和border-style，仅过渡border-color；需炸开效果用::before伪元素+scale()；流光效果则必须用background渐变模拟。
直接改 border-width 或从 border: none 切到有边框，必然卡顿或跳变——这是浏览器重排（reflow）导致的，不是你代码写错了。
为什么 border 动画容易抖动
浏览器对 border-width 从 0 变到非零、或 border-style 从 none 变到 solid 的变化，会强制触发整个盒模型重排。哪怕只动 1px，也会让文字重流、相邻元素位移。
- 常见错误现象：
button:hover { border: 2px solid #007bff; }，但常态没设border，结果 hover 时“啪”一下弹出来，毫无过渡 - 即使写了
transition: border 0.3s，只要初始border是none或宽度不一致，动画就失效 - Safari 和旧版 Firefox 对
border-image动画支持极差，@keyframes改border-image-source基本白写
用 border-color 过渡最简单可靠
前提是：常态和 hover 状态的 border-width 和 border-style 必须完全一致，只变颜色。
- 正确写法：
.btn { border: 2px solid transparent; transition: border-color 0.3s ease; }+.btn:hover { border-color: #3b82f6; } - 别漏掉
ease，某些安卓 WebView 里transition没指定缓动函数会降级为突变 - 如果按钮本身有背景色，透明边框在深色背景下可能透出底色，可改用
border: 2px solid rgba(0,0,0,0)更稳妥
要“从中心炸开”边框，必须用 ::before 伪元素
纯 CSS 实现视觉上“边框从无到有扩散”，唯一稳定路径是用伪元素画一个初始缩放为 0 的矩形，再靠 transform: scale() 撑开它。
- 父元素必须加
position: relative，伪元素才能精确定位 -
::before必须有content: ""，否则不渲染 - 关键动画参数：
transform: scale(0)→scale(1)，配合transform-origin: center - 记得加
overflow: hidden在按钮上，防止缩放过程溢出圆角或边界 - 别用
width/height动画伪元素——那会触发重排，尤其在 Flex 容器里容易带偏兄弟元素
要流光/跑马灯效果，放弃 border，改用 background 模拟
浏览器根本不支持对 border-image 或 border-color 做平滑位移动画。所谓“流动”，本质是移动一张大渐变图的可视窗口。
- 核心三件套：
background-image: linear-gradient()+background-size: 200% 200%+transition: background-position 2.5s - hover 时设
background-position: 100% 50%（水平渐变）或100% 100%（对角），就能看到颜色“滑过去” - 如果要四边都流动，得用四层
background，每边一层，分别控制background-position方向和起始值 - 圆角按钮上做这个，务必加
background-clip: padding-box，不然渐变会盖住文字
真正难的不是写几行 CSS，而是判断该用哪条路：颜色微调就走 border-color；要炸开感就上伪元素；要流动感就得切到 background 层。选错方案，后面所有优化都是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
