border-image比multiple backgrounds更适合复杂边框，因其专为边框设计，内置缩放、重复、裁切逻辑，不易错位漏边；需显式设border-width和solid样式，推荐SVG或CSS渐变作图源。
border-image 为什么比 multiple backgrounds 更适合做复杂边框
直接用 border-image 实现带渐变、图案或颜色分段的边框，比硬凑 background 多层叠加更可靠——它专为边框设计，缩放、重复、裁切逻辑都内建好了，不会因容器尺寸变化突然错位或漏边。
常见错误是把 border-image 当成普通背景图：没设 border-width，结果图加载了但完全不显示；或者用了 border-style: none，而 border-image 要求至少有一个可见的 border 样式（solid 最稳妥）。
-
border-width必须显式设置，且不能为0（哪怕只是1px） -
border-style推荐用solid，dashed或dotted可能导致图像断裂 - 图源推荐用 SVG（缩放无损）或高倍 PNG，CSS 渐变也可直接写进
border-image-source
示例：顶部绿色、右侧蓝色、底部红色、左侧黄色的四色边框
div {
border: 12px solid;
border-image: linear-gradient(to right, #0a0 0%, #0a0 25%, #00f 25%, #00f 50%, #f00 50%, #f00 75%, #ff0 75%, #ff0 100%) 12;
}
multiple backgrounds 做边框装饰的适用场景和硬伤
当你要复用已有背景图、或需要边框与内容背景联动（比如滚动时边框随内容一起动），background 多层叠加才值得考虑。但它本质不是边框，所有“模拟”都要靠 padding + background-position 折腾，极易失控。
立即学习“前端免费学习笔记（深入）”；
典型翻车现场：background-clip: border-box 没加，结果图被 content-box 截断；或者用 background-origin: border-box 后，padding 区域出现意外留白；更麻烦的是响应式下，不同宽高比容器会让 background-position 偏移完全不可预测。
- 必须同时设
background-clip: border-box和background-origin: border-box - 每层 background 都要手动计算
background-size和background-position，例如模拟 8px 上边框就得写background-size: 100% 8px, ... - 圆角（
border-radius）对多层 background 的裁剪行为不一致，左上角可能露底色
示例：仅用 background 模拟上边框（其他三边透明）
div {
padding-top: 8px;
background:
linear-gradient(#0a0, #0a0) top / 100% 8px no-repeat,
transparent;
background-clip: border-box;
background-origin: border-box;
}
border-image-slice 怎么调才不出白边或拉伸变形
border-image-slice 决定图片哪部分当边框、哪部分当填充，默认值 100% 会把整张图当填充区，边框区域为空——这就是为什么图明明加载了却啥也不显示。
数值单位是像素或百分比，但百分比按原图尺寸算，不是容器尺寸。最安全做法是用整数像素值，并确保四值之和 ≤ 图片原始宽高，否则中间填充区会被拉伸或留空。
- 想让四角保持原图大小、边缘平铺，用
border-image-slice: 20（假设图中边框素材宽高都是 20px） - 如果图是 40×40 的九宫格，且每块 10×10，就该写
border-image-slice: 10 fill（fill才允许中间区域显示） - 避免用百分比，除非你严格控制图源尺寸且不缩放
兼容性兜底：border-image 不支持时怎么优雅降级
IE 10+、Edge 12+、现代 Chrome/Firefox/Safari 都支持 border-image，但 Safari 旧版（≤12.1）对 border-image-slice 的 fill 关键字支持不稳定。真要保老 Safari，得用 @supports 分离样式。
别用 JavaScript 检测再加 class——CSS 本身就能处理。关键是把纯色边框写在 border-image 前面，浏览器不识别后者时自然回退。
- 顺序不能错：先写
border: 2px solid #ccc，再写border-image: ... - 用
@supports (border-image: 1)包裹高级效果，里面覆盖掉基础边框 - SVG 边框图建议内联 base64，避免 fallback 时多一次 HTTP 请求失败
实际项目里，真正难的不是写出多层渐变边框，而是当设计师扔来一张 3px 宽、带阴影的 PSD 边框素材时，你得立刻判断：它是该切九宫格，还是重绘成 CSS 渐变，还是老实转成 border-bottom 单边加 box-shadow —— 这个决策点，没人替你做。
