border-image不改变盒模型尺寸，仅替换border区域的视觉绘制方式，布局阶段仍按border-width分配空间，paint阶段才用图像贴图；box-sizing对其无影响，因二者作用层级分离。
border-image 不改变盒模型尺寸，因为它只替换 border 区域的视觉绘制方式，不参与 layout 计算。浏览器仍按原始 border-width 值分配空间，border-image 只是把那块区域“贴图”了，不是“撑开”或“缩进”。
border-image 的渲染层与布局层完全分离
盒模型中 border 占用的空间由 border-width 决定，这个值在 layout 阶段就被固定下来；border-image 是在 paint 阶段才生效的——它只是把原本用纯色绘制的边框区域，换成从 border-image-source 中切片贴上去的图像，不新增、不缩减任何 layout 尺寸。
- 即使你设了
border-image-slice: 0，元素依然保留border-width所占空间，只是边框变透明 - 父容器不会因你换了一张边框图就重排，子元素定位也不受影响
- JavaScript 获取
offsetWidth或getBoundingClientRect()时，返回值和纯色边框完全一致
为什么 border-image-slice 数值容易让人误以为“尺寸变了”
常见错觉来自 border-image-slice 的单位机制：它默认按原图像素计算，而非相对元素或视口。一张 200×200 的图设 border-image-slice: 20，会切出 20px 宽的边；换成 800×800 的图，还是切 20px，但只占图的 2.5%，导致视觉上边框“变细”，误以为盒子“缩水”了。
- 正确做法是统一用百分比：
border-image-slice: 10% - 单数值如
30等价于30 30 30 30，四边等切 - 写成
border-image-slice: 20和border-image-slice: 20%完全不同，后者才是跨图稳定的方案
border-image 与 box-sizing 的关系
box-sizing 控制的是 width/height 是否包含 border，但它对 border-image 没有额外影响——因为 border-image 本身就不改变 border 的 layout 占位逻辑。
- 在
box-sizing: content-box下，width仍是 content 宽度，border-width仍额外加出去 - 在
box-sizing: border-box下，width包含border-width，border-image依然只负责贴图 - 无论哪种
box-sizing，border-image-outset才真正能“撑出”额外空间（但那是另一套机制）
真正要警惕的是 border-image-width ——它虽然名字像 border-width，但实际是缩放倍率，不影响 layout；而 border-width 本身必须显式设置，否则 border-image 不会显示。这点容易被忽略，导致边框“消失”却查不出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
