必须用::before而非直接改border，因为原生border不支持渐变、无法沿路径流动或位移动画；写border:2px solid linear-gradient()会失效，浏览器忽略渐变退化为单色；伪元素可设渐变背景并靠background-position或transform模拟流光，但需父元素设position:relative和overflow:hidden。
为什么必须用 ::before 而不是直接改 border
因为原生 border 不支持渐变、无法沿路径流动、也不能做位移动画。你写 border: 2px solid linear-gradient(...) 是无效的；浏览器会直接忽略渐变部分，退化成单色边框。真正能动的是伪元素——它可设 background: linear-gradient()，再靠 background-position 或 transform 模拟“光在跑”的效果。关键前提是：宿主元素得有 position: relative，否则 ::before 一 absolute 就脱标飞走。
::before 边框流光动画的核心参数怎么配
流光不是靠改颜色，而是靠背景图“滑动”。常用组合如下：
-
background: linear-gradient(45deg, transparent, #fff, transparent)—— 至少两个色标，方向要明确（45deg最常用） -
background-size: 200% 200%—— 让渐变区域比容器大，才有位移空间 -
background-position: -100% 0—— 初始偏移，让光条从左上角“刚入场” -
animation: shine 2.5s linear infinite—— 必须带infinite和linear，否则只闪一下或中间卡顿
别漏掉父元素的 overflow: hidden，否则光条滑出容器边缘会露馅。
圆角/圆形按钮上伪元素边框错位怎么办
直角伪元素盖在圆角容器上，四角会明显“断开”，甚至溢出。解决方式很直接：
- 伪元素必须加
border-radius: inherit，和父级完全一致 - 不用
top: 0; left: 0; right: 0; bottom: 0拉伸，改用inset: 0（更语义化），或手动微调：top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px) - 如果按钮是
border-radius: 50%，确保宽高相等，且伪元素也保持正方形，否则光条拉伸变形
常见错误是只设了父元素圆角，却忘了伪元素同步继承，结果 hover 时边框在圆角处突然消失。
动画卡顿、Safari 不动、Chrome 抖动怎么调
根本问题不在写法，而在渲染层没触发或过渡属性太宽泛：
- 删掉
transition: all 0.3s，只写具体属性：transition: background-position 0.3s linear - Safari 对
background-position动画支持弱，加will-change: background-position（仅对高频 hover 元素启用） - 避免在伪元素里叠加
box-shadow或多层filter，这些会强制重绘，尤其在小尺寸按钮（如width: 40px）上更明显 - 如果仍抖动，把
background-size改大点（比如300% 300%），让光条更长，降低位移频率感
最易被忽略的一点：伪元素没写 content: ""，整个动画根本不会渲染——浏览器连元素都不创建，后面所有设置都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
