linear-gradient流光边框本质是背景动画：用background模拟边框，通过background-size、background-position和background-clip: padding-box控制光带滑动，而非直接动画border。
linear-gradient 实现流光边框的本质是背景动画，不是 border 动画
直接给 border 加 animation 是无效的，css 不支持对 border 的渐变色做位移或旋转。真正起作用的是用 background 模拟边框：把一个带角度渐变的背景铺满元素，再通过 background-size 和 background-position 控制“光带”在边框区域滑动。
常见错误现象：border: 2px solid transparent 写了但没效果，或者动画卡顿、光带跑出边框外——多半是没配对 background-clip: padding-box 或尺寸没算准。
- 必须设置
background-clip: padding-box，否则渐变会从 content 区域开始渲染，边框位置没光 -
background-size要远大于元素尺寸（比如200% 200%），才能让旋转/位移有足够余量 - 用
padding预留边框空间，而不是靠border，因为透明边框本身不占渲染“轨道”
用 background-position 实现水平/垂直流光更可控
相比旋转整个背景，平移 background-position 更容易对齐边框路径，尤其适合矩形容器。它本质是让渐变条在固定方向上匀速扫过边框区域。
使用场景：按钮悬停高亮、卡片焦点边框、Tab 标签激活态——这些不需要 360° 旋转，只要一道光从左到右或上到下划过即可。
立即学习“前端免费学习笔记（深入）”；
- 渐变方向要和移动方向垂直：想光从左往右走，就用
to bottom渐变，再动background-position-x - 动画时长建议设为
1.5s ~ 2.5s，太快像闪，太慢失去流光感 - 避免用
%做background-position关键帧，改用px或rem，防止在缩放页面时偏移错位
button { padding: 8px 16px; background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5f0); background-size: 300% 100%; background-position: -100% 0; background-clip: padding-box; animation: shine 2s infinite; } @keyframes shine { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } }background-image + transform rotate 的兼容性陷阱
用 background-image: linear-gradient(...) 配合 transform: rotate() 看似能做出环形流光，但实际在 safari 和旧版 chrome 上容易出现锯齿、闪烁甚至完全不渲染。这不是写法错，是浏览器对旋转背景的光栅化处理不一致。
性能影响明显：每帧都要重绘整个背景图层，比纯 background-position 动画多 2~3 倍 GPU 占用，低端手机会掉帧。
- 如果坚持用旋转方案，务必加
will-change: background-position（不是transform）来提示浏览器优化 - 不要在
:hover里直接写@keyframes，会导致首次悬停延迟触发动画 - IE 完全不支持
background-clip: padding-box，这类效果必须降级为纯色边框或 js 替代
响应式下流光边框容易断连或错位
当容器宽高随屏幕缩放变化时，background-size 用百分比会失准，导致光带在拐角处跳变或中断。这不是 bug，是渐变背景本身没有“路径跟随”能力。
最容易被忽略的地方：圆角容器（border-radius）+ 流光边框 = 光带在弧线处被裁切，看起来像断开了。CSS 没有原生办法让渐变“贴着圆角走”。
- 解决圆角断连：用两层伪元素分别覆盖上下左右边框，各自控制动画起点，绕过圆角区域
- 响应式适配：把
background-size改成max(300px, 200%)这类混合单位，比纯百分比稳定 - 真·动态边框（如根据数据状态变色）别硬套 CSS 动画，该用 JS 控制
style.background字符串拼接