用 border-image 实现流光边框需配合 linear-gradient 与动画位移，避免直接动画 border-color；更优方案是 mask + background 遮罩流光，支持精准控制、兼容性好且顺滑，推荐 hover 触发以保性能。
用 border-image 实现流光边框最轻量
纯 CSS 就能做，不依赖 JS 或 SVG，适合按钮快速美化。关键在用 linear-gradient 配合 border-image 动画位移，让渐变色“流动”起来。
常见错误是直接对 border-color 做动画——它不支持颜色过渡动画，会卡顿或无效。必须走 border-image 路径。
- 按钮需显式设置
border-width（如2px），否则border-image不生效 - 渐变方向要和动画位移方向一致：水平流动用
to right，配合background-position-x或border-image-slice无法动画，所以改用mask+background更可控（见下一条） - 兼容性注意：
border-image在 Safari 旧版本有渲染异常，建议加-webkit-border-image前缀
更稳的方案：用 mask + background 模拟线条流光
主流做法其实是「遮罩流光」：给按钮加一层带透明镂空的 mask（用 radial-gradient 或 linear-gradient），再用 background 做流动渐变，靠遮罩只露出线条部分。
这样能精准控制线条粗细、位置、起始偏移，且动画顺滑、兼容性好（Chrome/Firefox/Safari 均支持 mask，Edge 104+ 也 OK）。
- mask 图像必须是单通道（灰度），白色区域显示，黑色隐藏；可用
linear-gradient(90deg, transparent, #000, transparent)做细线 - background 动画用
background-size: 200% 200%+background-position: -100% 0，再 animatebackground-position实现循环流动 - 别忘了加
transform: translateZ(0)或will-change: background-position提升动画层，避免闪烁
按钮 hover 时触发流光，避免常驻消耗
流光动画持续运行会轻微影响性能，尤其页面按钮多时。推荐只在 :hover 下启用动画，静默状态停掉。
- 把
@keyframes定义好，但初始状态设为animation: none - hover 时才赋值
animation: shine 3s linear infinite - 如果需要点击后保留流光（比如加载态），用 JS 切换 class，别直接操作
style.animation，避免内联样式干扰 - 移动端慎用：iOS Safari 对 hover 支持弱，可加
:active或监听touchstart补充触发
自定义线条位置：顶部/底部/四边流光怎么写
不是所有流光都要绕一圈。实际项目中，常需顶部细线从左到右、或底部高亮条滑入——这时不能硬套 border，得用伪元素精确定位。
- 顶部流光：用
::before，top: 0，height: 2px，background: linear-gradient(90deg, transparent, #6366f1, transparent)，动画background-position-x - 四边流光：两个伪元素叠一起，
::before控制上下边，::after控制左右边，各自设不同background-size和动画时长，错开帧率避免同步闪烁 - 注意 z-index：伪元素默认在按钮文字下方，加
z-index: 1并设position: relative到按钮上才能盖住文字（如果需要）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
