最简方案是用 border-image + linear-gradient，但必须配 border: solid 和 border-image-slice: 1，否则边框不显示或错位；常见错误包括漏写 border、slice 值错误、使用非 solid 边框样式、未设 border-width 等。
直接用 border-image + linear-gradient 是最简方案，但必须配 border: solid 和 border-image-slice: 1，否则边框不显示或错位。
为什么 border-image 配 linear-gradient 会失效
常见错误现象：border-image: linear-gradient(...) 写了但边框完全不出现，或只在刷新瞬间闪一下。
- 漏写了
border: <width> solid——border-image不是独立边框，它只是“贴图”，必须有实体边框承载 -
border-image-slice写成100%或1px—— 正确值是无单位的1，否则渐变被裁切或拉伸失真 - 用了
border-style: dashed或dotted—— 只有solid被广泛支持，其他样式下 Safari/Firefox 表现不一致 - 没设
border-width（哪怕只是1px），导致渲染引擎跳过边框绘制流程
用 padding 模拟边框时的布局陷阱
当用 padding + background 替代真实边框（比如为了圆角兼容或动画），容易误判尺寸和内容区域。
- 容器总宽高 =
width+height+2 * padding，若未设box-sizing: border-box，内容区会意外缩小 -
background绘制四边时，若background-size不够大（如只设100% 2px），background-position位移会露白 - 伪元素方案中，
z-index必须低于内容层，否则遮挡文字或交互元素 - 移动端需加
will-change: background-position防止动画卡顿，尤其在 iOS Safari 上
线性渐变方向与边框视觉节奏的关系
linear-gradient 的角度直接影响彩虹流动感和色带密度，不是随便写 to right 就行。
立即学习“前端免费学习笔记（深入）”；
- 做静态边框：用
45deg或-45deg比to right更易控制色标间距，避免红/紫在角落堆叠 - 做动画边框：角度必须和
background-position位移方向匹配，例如上边用90deg渐变，就得background-position: 0 0→100% 0 - 色标至少 5 个（如
red, orange, yellow, green, blue），少于 4 个过渡生硬，纯黑/白在暗背景下会“消失” - 别用
conic-gradient直接套border-image—— 当前所有浏览器都不支持其动画，且border-image-slice对锥形渐变行为未定义
真正难的是让彩虹边框在圆角、缩放、高DPI屏、深色模式下都稳定——这些细节不会报错，但用户一眼就能看出撕裂、偏色或闪烁。动手前先在 Safari、Chrome、Firefox 里开 DevTools 强制刷新渲染层看实际帧率。
