不能只靠 outline-offset 实现“边框流光”，它仅偏移轮廓且不支持动画；流光需用 ::before/::after 伪元素配合 @keyframes 控制位置变化，outline-offset 仅用于解决聚焦时轮廓干扰问题。
直接说结论：不能只靠 outline-offset 实现“边框流光”，它只负责偏移轮廓，不参与动画；真正的流光必须用 ::before/::after 伪元素 + @keyframes 驱动位置/尺寸变化，outline-offset 只是辅助解决聚焦时轮廓打架的问题。
为什么 outline-offset 单独没法做流光
outline-offset 的作用非常明确：它只是把浏览器默认的 outline 往外或往内推一推，数值为正就向外偏移，负值则向内收缩。它本身不产生新图形、不支持渐变、不能设背景、无法做位移动画——这些全是流光效果的刚需。
- 常见错误现象：
outline: 2px solid #00cfff; outline-offset: 4px;看起来像加了“外边框”，但鼠标一移开，光就没了，毫无流动感 - 真实限制：CSS 规范里
outline不支持background、border-radius、animation，连box-shadow都不继承 - 所以它只能当“配角”：比如你用伪元素做了流光边框，又怕原生
focus轮廓叠上去干扰视觉，这时才轮到outline-offset: -999px或outline: none来清场
流光边框必须用伪元素 + keyframes
核心思路是：在输入框容器（如 .input-wrapper）上用 ::before 和 ::after 画两条细长“光条”，再用 @keyframes 控制它们从左→上→右→下循环滑动，配合 linear-gradient 和 box-shadow 模拟发光质感。
- 关键 HTML 结构要带包裹层：
<div class="input-wrapper"><input type="text" class="focus-input"></div>—— 因为伪元素得挂载在有position: relative的父容器上 - 动画起点必须设在容器外部：
top: -10px; left: -10px;，否则第一帧就露馅 - 推荐动画时长：
animation: flow 3s linear infinite;，太快显得浮躁，太慢失去“流”感 - 别漏掉
z-index: 1，否则光条会被输入框内容盖住
focus 状态下如何让流光“只在聚焦时启动”
不能直接给 .focus-input:focus::before 写动画（伪元素不能绑定在子元素的伪类上），正确做法是把动画控制权交给父容器的状态：
立即学习“前端免费学习笔记（深入）”；
- 给包裹层加状态类：
<div class="input-wrapper focus-active">，用 JS 监听focus/blur切换该类 - 或者更简洁：用
.input-wrapper:focus-within（兼容性到 Chrome 48+/Firefox 52+，Safari 15.4+） - 然后写：
.input-wrapper:focus-within::before { animation-play-state: running; }，初始设为animation-play-state: paused - 务必加
transition: all 0.2s到伪元素上，否则聚焦瞬间光条会“啪”一下闪出来，破坏平滑感
容易被忽略的兼容性与性能坑
看似几行 CSS 就能搞定的效果，上线后常在老设备或低功耗手机上卡顿甚至失效：
-
transform: translate()比直接改left/top更高效，但 Safari 对transform+gradient组合渲染不稳定，建议 fallback 到left/top动画 - Android WebView 4.x 不支持
focus-within，必须用 JS 打补丁，且outline-offset在部分 Android 版本里表现异常（比如偏移量被截断） - 别在
@keyframes里写太多关键帧（超过 6 帧易触发重排），用0%, 25%, 50%, 75%, 100%四段足够模拟四边流动 - 真机测试时重点看：快速连续聚焦/失焦是否导致动画残留、伪元素是否意外脱离定位、圆角容器下光条是否被裁切
最麻烦的不是写出来，而是让光条严丝合缝地“贴着边框走一圈”，差 1px 就破功。动手前先用 border: 1px solid red 临时标出容器边界，比对着设计稿猜更可靠。
