background-origin: border-box必须设置，因为默认background-origin是padding-box，背景不绘制到border区域；需配合background-clip: border-box和mask才能让渐变仅显现在边框区。
background-origin: border-box 为什么必须设
渐变边框动画本质是把渐变背景“挪”到边框区域显示，但默认 background-origin 是 padding-box，背景压根不画进 border 区域。不设成 border-box，再好看的渐变也出不来。
常见错误现象：border: 2px solid transparent 写了，background: linear-gradient(...) 也写了，但边框还是纯色或干脆看不见——八成是漏了这句：
background-origin: border-box;
注意：它必须和 background-clip: border-box 配合使用，否则渐变会被边框裁掉；两者缺一不可。
mask 实现“只让边框显色”的关键写法
光靠 background-origin 还不够：渐变背景会铺满整个元素（含内容区），得用 mask 把中间“抠掉”，只留下边框区域透出颜色。
立即学习“前端免费学习笔记（深入）”；
最简可靠的 mask 方式是用 linear-gradient 做 alpha 遮罩：
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
但更稳妥、兼容性更好的写法是双层 mask：
- 第一层
mask-layer（或老写法-webkit-mask）用border-box范围画一个全黑遮罩 - 第二层用
content-box画一个全白遮罩盖住内容区，形成“边框黑、内容白”的 alpha 分布
实际项目中建议直接用：
-webkit-mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) content-box; -webkit-mask-composite: exclude;
注意：exclude 在 Safari 和 Chrome 新版本有效，Firefox 目前需用 mask-mode: alpha + 单层 mask 曲线救国。
动画卡顿？background-position 重绘成本高
想让渐变“流动”，通常用 background-position 动画。但这个属性触发的是 Layout + Paint，尤其在大容器或高频动画时容易掉帧。
优化建议：
- 给元素加
will-change: background-position（仅动画期间动态加 class 控制） - 改用
transform: translate()驱动的伪动画：把渐变背景做宽（如background-size: 200% 200%），再用transform: translate()移动父容器的overflow: hidden区域——本质是位移裁剪框，只触发 Composite - 避免在
body或滚动容器内直接 animatingbackground-position，易引发 scroll jank
Firefox 下 mask 不生效的绕行方案
Firefox 对 mask 的 border-box 支持不稳定，特别是配合 background-origin 时经常失效。真要兼容，得换思路：
用两个重叠元素：外层设渐变背景 + background-origin: border-box，内层用纯色 background 盖住内容区，并设 margin 留出边框空隙。例如：
<div class="border-anim"> <div class="content">文字</div> </div>
.border-anim 设 border: 3px solid transparent + 渐变背景 + background-origin: border-box；.content 设 margin: -3px + 白色背景。这样视觉上就是“只有边框在动”。
这不是优雅解，但比等 Firefox 修复 mask 更可靠。真正棘手的从来不是怎么写，而是哪条路径在所有浏览器里都少掉一次重绘。
