纯css环绕发光边框应使用伪元素+渐变背景+background-clip，通过background-position动画实现四边流动光效；避免用border/outline动画或border-image，ie需降级为box-shadow呼吸动画。
用 box-shadow + animation 实现环绕发光边框
纯 CSS 能做，但“环绕移动”不是指边框自己转圈，而是光效沿四边依次亮起再消失，形成流动感。核心是用多层 box-shadow 模拟光晕，配合 @keyframes 控制偏移位置。
常见错误是直接给 border 加动画——border 本身不支持路径动画，硬改 border-color 或 border-width 只能闪烁，无法形成流动轨迹。
- 只对块级元素生效（
display: block或inline-block） - 发光强度靠
box-shadow的模糊半径（如0 0 12px #00f）和扩散距离控制 - 动画必须作用于
box-shadow的x和y偏移量，不能动颜色或模糊值
div {
position: relative;
width: 200px;
height: 120px;
background: #111;
}
div::before {
content: '';
position: absolute;
top: -4px; right: -4px; bottom: -4px; left: -4px;
border: 2px solid transparent;
animation: border-glow 3s linear infinite;
background: linear-gradient(45deg, #00f, #0ff, #0f0, #ff0, #f00, #f0f, #00f);
background-size: 300% 300%;
}
@keyframes border-glow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
为什么不用 outline 或 border-image
outline 不支持圆角裁剪、无法独立控制四边，且动画时会跳变；border-image 虽可切图，但要手动拼接发光路径，响应式下极易错位，维护成本高。
真正轻量又可控的方式是伪元素 + 渐变背景 + background-clip：
立即学习“前端免费学习笔记（深入）”；
-
border-image的slice值稍有偏差，发光线条就会在角上断裂 - 所有现代浏览器都支持
background-clip: border-box，但 Safari 旧版需加-webkit-前缀 - 渐变角度设为
45deg是为了在矩形上拉出连续色带，避免水平/垂直方向出现色块断层
移动端适配和性能陷阱
在 iOS Safari 上，background-position 动画如果没加 will-change: background-position，容易卡顿或掉帧；同时，background-size 过大会让渲染变慢。
- 把
background-size控制在200% ~ 300%之间，再大无意义，反而吃 GPU - 动画时长别低于
2s，太快人眼识别不出流动感，还增加重绘压力 - 避免在
:hover里触发该动画——iOS 不支持 hover，且会引发意外重绘 - 真机调试时发现发光变暗？可能是开启了深色模式，
#00f在深灰背景上对比度不足，建议用hsl(240, 100%, 60%)替代固定色值
IE 和老版 Edge 完全不支持怎么办
IE11 及更早版本不支持 background-clip: border-box 和 background-position 动画，也没有 ::before 多层伪元素叠加能力。这时候只能降级：用单色 box-shadow 循环缩放模拟“呼吸感”，而非“环绕感”。
- 降级方案示例：
box-shadow: 0 0 8px #0af, 0 0 16px #0af, 0 0 24px #0af配合opacity动画 - 不要试图用 SVG
<filter></filter>模拟——IE 对 SVG filter 支持极差，且性能爆炸 - 如果项目必须兼容 IE，建议用 JS 插件（如
anime.js）驱动 canvas 绘制光带，CSS 方案直接放弃
最常被忽略的是：发光线条的“环绕”本质是视觉暂留效果，不是精确路径追踪。只要人眼觉得它在走，参数就达标了——别在 background-position 里塞小数点后三位精度，没用。
