必须用 ::after 且设 z-index: -1；因流光是盖在内容上的渐变层，::before 会遮挡交互，::after 加负 z-index 才能置于背景之下、仅边框透光；需配合 position: relative 和 linear-gradient 位移动画实现流动光效。
伪元素选 ::before 还是 ::after？
必须用 ::after，且要设 z-index: -1。因为流光效果本质是盖在按钮内容（文字/图标）之上的半透明渐变层，如果用 ::before，它会压住内容导致鼠标无法触发悬停；而 ::after 默认层叠在内容上方，加 z-index: -1 才能把它“垫”到按钮背景之下，只让边框区域透出光效。别漏写 position: relative 在按钮上，否则 absolute 定位的伪元素会脱离预期位置。
流光动画的关键：线性渐变 + 位移偏移
不能靠纯色 border 动画，得用 background: linear-gradient 模拟“光带”。常见错误是直接给 border 加 animation，但 border 不支持渐变背景。正确做法是把伪元素铺满按钮（top: 0; left: 0; width: 100%; height: 100%），再用 background: linear-gradient(45deg, transparent, rgba(255,255,255,0.8), transparent) 做一条斜向亮带，最后用 background-position 持续偏移实现流动感。注意：动画时长建议设 2s 以上，太快会像闪烁；background-size 要设成 200% 200%，否则位移不连贯。
悬停触发与兼容性避坑点
伪元素默认不响应 :hover，必须把 :hover 写在按钮选择器上，再通过 &::after 控制伪元素。例如：.btn:hover::after。IE 不支持 background-clip: padding-box（用于防止渐变溢出圆角），所以如果按钮有 border-radius，得额外加 overflow: hidden 在按钮上。另外，Safari 对 background-position 动画偶有卡顿，可加 transform: translateZ(0) 强制 GPU 加速。
流光效果真正难调的不是动起来，而是光带粗细、角度和停顿节奏——这些全靠 linear-gradient 的色标位置和 background-size 配合，试一次改三处参数很常见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
