border-image 本身不改变盒模型尺寸，但未设 border-width 就不会渲染；它必须绘制在由 border-width 定义的边框区域上，若 border-width 为 0 或默认 medium 值，图像将被裁空或跳过渲染。
border-image 本身不改变盒模型尺寸，但没设 border-width 就压根不渲染
很多人看到 border-image 没生效，第一反应是“它影响了布局”，其实根本原因是：浏览器压根没画出来。因为 border-image 不是独立边框，它必须绘制在已存在的 border 区域上——而这个区域由 border-width 定义。如果只写 border-image: url(...) 20;，但没显式声明 border-width（比如用 border: 12px solid transparent;），那 computed styles 里 border-width 很可能是 medium（约 3–4px）或 0，导致图像被裁空或完全跳过渲染。
常见错误现象：border-image 写全了却看不到边框，检查 DevTools 的 Computed 面板，发现 border-width 是 0 或未生效的默认值。
- 始终搭配明确的
border声明，例如：border: 16px solid transparent; - 别用
border: none，它会清空整个 border 区域，border-image失效 -
transparent是安全选择，既占位又不遮挡内容
border-image-slice 数值按原图像素算，不是按元素尺寸，切片错位就看起来“偏了”
border-image-slice 的数字不带单位，但它不是相对于元素宽高，而是相对于你指定的 border-image-source 图片原始像素。一张 300×300px 的图，border-image-slice: 30; 切的是上下左右各 30px；换成 600×600px 的图，还是切 30px，结果只占原图 5%，四边视觉变细，角图“缩进”，整个边框看起来像往里塌了一块——这不是 bug，是规范行为。
真正造成“视觉偏移”的，往往是切片比例失配，而非盒模型膨胀。
- 统一用百分比写法：
border-image-slice: 10%;，确保换图后边框粗细稳定 -
border-image-slice: 20和border-image-slice: 20%完全不同，后者才按图比例切 -
border-image-slice: 0;合法，但会把所有边框区域裁空，只剩透明边框（常被误认为“失效”）
fill 关键字控制中心区是否显示，但前提是 border-width 足够大
border-image-slice: 30 fill; 中的 fill 不是填充颜色，只是个开关：启用后，九宫格的中心块会被拉伸铺满 border-box 内减去四边 slice 后的剩余矩形区域。但它不决定位置、不放大边框、也不补偿宽度不足。
如果你加了 fill 却看不到中心内容，大概率是因为 border-width 太小，或者 box-sizing 没配对，导致中心可渲染区域为零。
- 确保
border-width显式足够（如16px），否则 fill 区域无空间可填 - 若用
box-sizing: border-box，注意内容区宽高已含 border，但 fill 渲染仍以 border-box 边界为基准 -
fill区域 z-index 高于background-color，如有色块盖住，先检查是否背景盖住了它
border-image-repeat: round/stretch 在响应式容器中容易引发视觉错位
当边框长度不能被切片后边区域整除时，stretch（默认）会强制拉伸边图填满，可能让角图变形；round 则缩放整张边图使其重复次数为整数，但会轻微改变边图比例。这两种模式都可能让边框在响应式容器里“滑动”或“错位”，尤其在宽度动态变化时。
这不是盒模型计算错误，而是图像适配逻辑在边界长度变化时的自然表现。
- 对固定尺寸容器，
repeat或space更可控 - 对响应式场景，优先用
border-image-slice: X%;+border-image-repeat: round;组合，减少比例突变 - 避免在窄边框（如
border-width: 2px）上强求高清角图，易因像素对齐失败出现模糊或撕裂
border-image 当成独立功能来写，忘了它依赖 border-width 这个“地基”。一旦地基没打牢，所有切片、fill、repeat 都是空中楼阁。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
