用 border-image 实现多色拼接边框最直接，需配合 border-image-slice 控制分割，推荐内联 SVG 作源，显式设置 border-width，加 fill 关键字兼容圆角，动态改色优先用 CSS 变量。
用 border-image 实现多色拼接边框最直接
HTML5 原生支持多色边框，但不是靠多个 border 层叠（CSS 不允许），而是通过 border-image 把一张横向或纵向切分的色带图“贴”到边框上。关键在图的分割方式和 border-image-slice 的数值控制。
常见错误是直接用纯色渐变图却没设 border-image-slice: 100%，结果只显示左上角一小块；或者用了 SVG 图但未设 viewBox 导致缩放错位。
-
border-image-source推荐用内联 SVG（免请求、可动态改色），例如：url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Crect width='40' height='10' fill='%23ff6b6b'/%3E%3Crect x='40' width='40' height='10' fill='%234ecdc4'/%3E%3Crect x='80' width='40' height='10' fill='%23ffe66d'/%3E%3C/svg%3E") -
border-image-slice设为10（像素值）或100%（整图拉伸）；若图高 10px，且想让三段色块等宽平铺，用border-image-slice: 10 fill - 必须显式声明
border-width（如border-width: 10px），否则border-image不生效
不用图片？用 linear-gradient 拼接也行
如果只需要水平或垂直方向的多色分段（比如左红、中绿、右蓝），可以用多个 linear-gradient 叠在 background 上模拟边框，再配合 background-clip: padding-box 和 padding 预留空间——本质是“用背景画边框”。
这种方式兼容性比 border-image 更好（IE10+），但无法实现圆角边框的自然过渡，且四边颜色不同时代码会明显膨胀。
立即学习“前端免费学习笔记（深入）”；
div {
padding: 10px;
background:
linear-gradient(90deg, #ff6b6b 0%, #ff6b6b 33%, transparent 33%) top,
linear-gradient(90deg, transparent 67%, #4ecdc4 67%, #4ecdc4 100%) top,
linear-gradient(90deg, #ffe66d 0%, #ffe66d 33%, transparent 33%) bottom,
linear-gradient(90deg, transparent 67%, #ff6b6b 67%, #ff6b6b 100%) bottom;
background-size: 100% 10px, 100% 10px, 100% 10px, 100% 10px;
background-repeat: no-repeat;
background-clip: padding-box;
}
JavaScript 动态生成多色边框要避开重绘陷阱
如果颜色需响应用户操作实时变化（比如调色板选色），别用 JS 频繁改 style.borderImage 字符串——每次都会触发 layout + paint。更稳的方式是提前定义好 CSS 变量，再用 JS 改变量值：
- 在 CSS 中写：
border-image: linear-gradient(90deg, var(--c1), var(--c2), var(--c3)) 1; - JS 中执行：
element.style.setProperty('--c1', '#ff6b6b'); - 注意：Safari 对
border-image中 CSS 变量的支持直到 v16.4 才稳定，旧版需降级为内联 SVG
圆角 + 多色边框时，border-radius 和 border-image 的协作要点
当元素有 border-radius，而你又用了 border-image，默认行为是图像被裁切成圆角区域——但色块交接处容易出现锯齿或断层。根本原因是 border-image-slice 默认不包含 fill，导致中间内容被裁掉。
解决方法只有两个：要么加 fill 关键字（border-image-slice: 10 fill），让图像内容延展进边框内区；要么放弃图像方案，改用伪元素分别绘制四条带圆角的色条，用 transform: rotate() 拼合——后者可控性强，但 DOM 节点增多，维护成本上升。
真正难处理的是斜向多色边框（如 45° 分割），此时所有方案都得退回到 canvas 或 SVG 容器，CSS 已无简洁解法。
