最稳妥纯css流光边框用background+animation实现：以linear-gradient为“光带”，background-size设400%防断层，background-clip:padding-box防溢出，background-position动画驱动流动，hover时animation-play-state:running触发，兼顾兼容性与性能。
用 box-shadow 模拟流光边框最稳妥
纯 CSS 实现“流光边框”本质不是真改 border，而是用渐变 + 动画的 box-shadow 覆盖在元素外围，视觉上像光在边缘流动。直接 animating border-color 只能变色，做不到“扫过”的动效；而 outline 不支持圆角和渐变，也不可控。
关键点在于：用一个宽大的、带径向/线性渐变的 box-shadow，再配合 background-clip: padding-box 防止阴影被内容遮挡，并用 transform: translateX() 或 background-position 驱动位移动画。
- 推荐用
background-image: linear-gradient()作伪边框层，设为background，再用background-size和background-position控制“光条”宽度与起始位置 -
box-shadow方案更轻量，适合多卡片场景；background方案控制更精细，但需注意padding和border-radius协同 - 动画必须用
will-change: background-position或transform提升为合成层，否则 iOS Safari 和旧版 Chrome 会卡顿
用 background + background-position 实现可调速流光
这是目前兼容性好、效果最接近设计稿的做法。核心是把渐变背景当作“光带”，通过移动它的位置制造流动感。注意：必须设 background-clip: padding-box，否则光会盖住卡片内容或溢出圆角。
card {
position: relative;
border-radius: 12px;
padding: 1px; /* 给伪边框留出空间 */
background: linear-gradient(45deg, #ff0084, #3300ff, #0084ff, #00ff84, #ff0084);
background-size: 400% 400%;
background-clip: padding-box;
animation: shine 6s ease-in-out infinite;
}
<p>@keyframes shine {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}</p>
- 动画时长
6s可按需调整，越短越“急”，越长越“柔”；建议范围4s–8s -
background-size: 400% 400%是为了让渐变足够长，避免衔接处断层；小于300%在某些角度可能露马脚 - 若卡片有内边距（
padding），务必用background-clip: padding-box，否则光会填满整个 content box
悬停触发要加 :hover，别忘了加过渡延迟
流光动效默认不应常驻，而应在鼠标移入后才启动。直接写 .card:hover { animation-play-state: running; } 是常见错误——因为初始状态没定义 animation-play-state: paused，会导致首次悬停时动画跳帧或不触发。
- 初始样式里必须显式声明
animation-play-state: paused -
:hover中只改animation-play-state: running，不要重复写animation全属性，否则会重置动画计时器 - 加
transition: all 0.2s在 hover 上无意义，animation-play-state不支持过渡，别浪费性能 - 移动端需额外加
@media (hover: hover)媒体查询包裹，防止触屏设备误触发
iOS Safari 和旧版 Edge 的坑：background-clip 兼容性
iOS 14.5 之前、Edge 18 及更早版本不支持 background-clip: padding-box 用于渐变背景，会导致光溢出到内容区。绕过方式是用两层结构：外层容器负责流光，内层卡片负责内容，靠 z-index 和 position 叠加。
- 外层
div设border-radius和流光背景，overflow: hidden - 内层卡片设
margin: -1px抵消外层边框占用的空间，保持视觉对齐 - 慎用
mask-image方案，Safari 对mask的硬件加速支持不稳定，易掉帧 - 真要保底，可降级为单色
box-shadow: 0 0 12px rgba(51, 0, 255, 0.6)+transform: scale(1.02)微动效
流光边框真正的难点不在写法，而在控制它不抢内容焦点、不干扰可访问性、不在低功耗设备上掉帧——这些细节比动画本身更花时间调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
