border-image 是唯一靠谱的选择，因其天然绑定边框盒模型，支持可动画的 conic-gradient 作为图像源，能精准实现流光溢出效果，且不被 overflow: hidden 截断、不遮挡内容、响应式下不失真。
不能用 background 模拟流光边框再指望它“溢出”——真要流光溢出，必须用 border-image + conic-gradient + 可动画的 CSS 变量，否则要么被裁剪，要么盖住内容。
为什么 border-image 是唯一靠谱的选择
伪元素、background-clip 或 box-shadow 都无法真正让“边框本身”具备可控制的渐变流动+向外溢出效果。只有 border-image 天然绑定边框盒模型，且支持 conic-gradient 作为图像源，缩放、圆角、响应式下都不会错位或断裂。
-
border-image的渲染优先级高于background，不会遮挡内容，也不会被overflow: hidden截断 - 必须显式写
border: 4px solid transparent，否则border-image没有载体，直接失效 -
border-image-slice: 1是关键，它确保锥形渐变完整铺满边框（不是平铺或拉伸） - 漏掉
fill关键字会导致渐变只在边框内侧渲染，无法“溢出”视觉边界
conic-gradient(from var(--rotate)) 必须带单位且作用域明确
conic-gradient 的 from 参数不接受无单位数值，也不接受父级未定义的变量——浏览器会静默回退到 0，导致动画卡死或突变。
- 变量必须在元素自身或
:root中初始化，例如style="--rotate: 0deg;"或:root { --rotate: 0deg; } -
@keyframes中必须写--rotate: 0deg和--rotate: 360deg，不能省略deg - 拼错变量名（如
--roate）或在动画作用域外声明（比如只在父容器设了--rotate，子元素动画却没继承），都会让渐变停在初始色块不动 - 不要试图在
@keyframes里写transform: rotate(var(--rotate))——这和conic-gradient的起始角无关，纯属干扰项
animation 触发重绘的关键写法
CSS 变量本身不可直接动画，但现代浏览器（Chrome 110+、Firefox 115+、Safari 16.4+）支持在 @keyframes 中声明变量值变更，从而触发 conic-gradient 重计算。前提是写法合规。
- 动画必须绑定到使用
border-image的元素上，例如.glow { animation: shine 3s linear infinite; } -
@keyframes shine内只能改变量，不能混入其他样式（如opacity或transform），否则部分浏览器会跳过变量更新 - 反向旋转直接写
to { --rotate: -360deg; }，别用animation-direction: reverse，它会让变量插值逻辑混乱 - 暂停/控制节奏时，用 JavaScript 改
element.style.setProperty('--rotate', '120deg')比切 animation 更稳
最容易被忽略的是：所有涉及 border-image 的流光效果，都依赖于边框宽度与 conic-gradient 色标密度的匹配。太细的边框（如 1px）会让颜色带糊成一片；太宽（如 12px）又容易看出色块衔接缝。建议从 3px 或 4px 入手，再按实际设计微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
