必须用 border-image 实现花式边框，因传统 border 仅支持基础样式，background-image 无法精准对齐边框边缘；border-image 是唯一原生作用于 border-box 边缘的机制。
能，而且必须用 border-image，否则无法在单个元素上实现真正“花式”的边框（比如花纹、虚线+图标、渐变接缝等），不靠伪元素、不靠额外 DOM。
为什么不能只用 border 或 background-image
传统 border 只支持纯色、虚线、双线等基础样式，无法嵌入图案或图标；background-image 画在内容区背后，会被 padding 和 content 覆盖，且无法精准对齐边框边缘。而 border-image 是唯一原生作用于 border-box 边缘的图像绘制机制——它不依赖额外标签，也不侵入内容流。
常见错误现象：
– 写了 border: 10px solid; 却没设 border-image-source → 边框完全不显示（因为默认 border-image-source: none）
– 忘记显式设置 border-width → border-image-width 无参照，边框可能不可见
– 图片切片值写成 50px 50px 但图片本身只有 40px 高 → 上/右切片越界，四个角区域丢失
border-image-slice 怎么设才不出错
这是最容易卡住的一步。它不是“缩放”，而是“切割坐标”——值越小，留给四个角的区域越小，中间留白越多；值越大，角图越“胖”，边图越窄。
立即学习“前端免费学习笔记（深入）”；
- 用百分比（如
33%）最安全：适用于任意尺寸图片，自动按九宫格三等分 - 用像素（如
20）时，必须确认图片分辨率 ≥ 切片总和（比如20 20 20 20要求图至少 40×40px） - 省略 bottom/right 值时会自动镜像 top/left（
20等价于20 20 20 20） - 加
fill关键字（如20 fill）才能让中间区域渲染到 background 区域（否则被丢弃）
用渐变替代图片时，border-image-repeat 的实际影响
渐变不是位图，没有“像素拉伸失真”问题，但 repeat 和 round 行为差异明显：
-
stretch：把渐变从起点直接拉满整条边 —— 适合线性渐变做彩色边框（如linear-gradient(to right, red, blue)） -
repeat：重复绘制渐变片段 —— 对径向渐变容易出现明显接缝，慎用 -
round：缩放渐变片段使其刚好铺满、无间隙 —— 最适合带图案感的 repeating-linear-gradient（如repeating-linear-gradient(90deg, #000, #000 2px, transparent 2px, transparent 4px)）
示例（无图、纯 CSS）：border: 8px solid;border-image: repeating-linear-gradient(90deg, #6366f1, #6366f1 2px, #8b5cf6 2px, #8b5cf6 4px) 2 / 8px round;
兼容性和 Safari 的那个 -webkit- 前缀
Chrome/Firefox/Edge 自 2017 年起已完全支持标准语法，但 Safari 直到 iOS 15.4 / macOS 12.3 才去掉前缀依赖。现在仍建议保留：
- 必须写
border-image标准属性（现代浏览器以此为准） - 紧随其后加一行
-webkit-border-image，值完全一致（Safari 旧版本只认这个） - 不要写
-moz-border-image或-o-border-image——早已废弃，反而增加维护负担
真正容易被忽略的点：当你用 SVG 作为 border-image-source 时，务必确保 SVG 中没有未声明的 viewBox 或宽高硬编码，否则 border-image-slice 的百分比计算会失效——这时改用像素值反而更稳。
