必须用 ::before 而非 border，因 border 不支持渐变与动画；::before 可通过 background+clip-path+transform 实现精准流光效果，且兼容性优于 mask。
为什么必须用 ::before 而不是直接动 border
因为 CSS 的 border 不支持渐变色，更没法让“光”沿着边框跑起来。你写 border: 2px solid linear-gradient(...) 是无效的；浏览器会直接忽略渐变部分，退化成单色边框。真正能承载渐变并做位移/旋转动画的，只有伪元素——它可设 background: linear-gradient 或 conic-gradient，再通过 background-position 或 transform: rotate() 驱动流动感。
常见错误包括：
– 忘了给按钮加 position: relative，导致 ::before 脱标飞出容器外；
– 没设 content: ""，伪元素根本不渲染；
– ::before 尺寸没撑开（比如只写了 width: 100%; height: 100%），结果流光被裁掉一半。
clip-path 裁剪比 mask 更稳，但数值必须严丝合缝
要让流光“只出现在边框区域”，得把伪元素精准裁成“外围一圈”。clip-path: inset(2px round 8px) 是最常用方案：假设按钮本身有 border-radius: 8px，那伪元素就要用相同的 round 8px，同时 inset(2px) 表示向内缩进 2px —— 这样伪元素实际显示区域就是按钮外扩 2px 的环形带。
容易踩的坑：
– 圆角值不一致（比如按钮是 8px，clip-path 写成 6px），转角处流光会跳变或断开；
– inset 值不对称（如 inset(2px 0)），导致上下左右流光粗细不一；
– 在 Safari 15.4 以下或某些安卓 WebView 中，mask 会闪烁或失效，而 clip-path 兼容性更好（Chrome 55+/Safari 9.1+/Firefox 54+）。
用 conic-gradient + rotate 动画比 linear-gradient + background-position 更适合环绕
如果你的目标是“光绕着按钮边缘匀速转圈”，conic-gradient 天然适配：它从中心出发按角度辐射，配合 @keyframes 旋转伪元素，就能实现平滑闭环。例如：
button::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 8px;
background: conic-gradient(from var(--angle, 0deg), #ff0080, #00ffcc, transparent 30deg);
clip-path: inset(2px round 8px);
animation: spin 3s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
注意点：
– from 角度要用自定义属性（如 var(--angle, 0deg)）方便 JS 控制，否则动画无法暂停或反向；
– 首尾颜色别差太大（比如 #ff0080 开头、transparent 结尾），否则旋转时会出现明显色带断裂；
– 若需兼容旧版 Chrome 或 Safari，改用 linear-gradient(45deg, transparent, #fff, transparent) + background-position 位移，但得手动写四段关键帧模拟绕边，麻烦且易错。
动画节奏和渲染优化常被忽略
流光“快而不乱、慢而不滞”全靠动画参数：周期太短（如 1s）会显得急促失真；用 ease-in-out 会让起止卡顿，看不出流动感。推荐 animation-duration: 3s～4s + linear 缓动。
悬停时可加速：.btn:hover::before { animation-duration: 2s; }，但别忘了加 will-change: transform 提前告知浏览器优化渲染层，尤其在移动端——否则动画可能掉帧或闪烁。
最容易被忽略的是层级与尺寸精度：::before 的 inset 值、clip-path 的 round 值、按钮本身的 border-radius，三者必须完全一致；差 0.1px 都可能导致某一边流光突然变宽或消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
