用 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）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• mask 图像必须是单通道（灰度），白色区域显示，黑色隐藏；可用 linear-gradient(90deg, transparent, #000, transparent) 做细线
• background 动画用 background-size: 200% 200% + background-position: -100% 0，再 animate background-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 到按钮上才能盖住文字（如果需要）

流光效果容易陷入“越炫越卡”的陷阱，真正上线前务必在低端安卓机和 iOS 上实测动画帧率。最常被忽略的是 mask 的尺寸匹配——伪元素宽高没设准，流光就会断开或偏移一像素。