border-image 不影响盒模型尺寸，但切片设置不当会导致视觉偏移；必须显式声明 border-width 才能渲染；推荐用百分比设置 slice，fill 控制中心区域显示，repeat 模式需按方向合理选择。
border-image 本身不影响盒模型尺寸，但切片设置不当会引发视觉偏移
很多人误以为 border-image 会像普通 border 那样“撑开”布局，其实它完全不改变元素的 offsetWidth 或 getBoundingClientRect() 尺寸——前提是你的 border-width 已明确设置且未被意外重置。真正出问题的地方是 border-image-slice 的数值逻辑：它按你指定的图片原始像素计算，不是按元素尺寸。比如一张 600×600px 的图，border-image-slice: 30; 实际只切 5% 边缘，视觉上边框就“变细”甚至消失；而同样数值在 300×300px 图里是 10%，看起来正常。这不是 bug，是规范行为。
实操建议：
- 统一用百分比写法：
border-image-slice: 10%;，避免因替换图片导致边框粗细跳变 - 单写一个数字（如
30）时，四边等值；写两个（如20 40）则上下=20、左右=40，单位必须一致（全用 % 或全不用） -
border-image-slice: 0;合法但会让所有边框区域被裁空，慎用
必须显式声明 border-width，否则 border-image 不渲染
border-image 不是“替代 border”，而是“绘制在 border 区域上”。如果没设 border-width，哪怕写了 border-image-source 和 border-image-slice，浏览器也认为没有可绘制的边框区域，直接跳过渲染。这和 outline 完全不同——outline 自带默认宽度，border-image 没有。
常见错误现象：写了 border-image: url(...) 20; 却看不到任何边框，检查 computed styles 发现 border-width 是 medium（默认值约 3–4px，但不可靠）或 0。
实操建议：
- 始终搭配明确的
border声明，例如：border: 12px solid transparent; - 用
transparent而非none，因为border: none会清空整个 border 区域，border-image失效 - 若需纯装饰无占位，
border-width可设为1px再配合box-sizing: border-box控制总宽
fill 关键字只控制中心区是否显示，不决定位置或大小
border-image-slice: 30 fill; 中的 fill 不是“填充颜色”，而是布尔开关：启用后，九宫格的中心块会被拉伸铺满 border-box 内减去四边 slice 后的剩余矩形区域。它不会让边框变厚，也不会影响四边/四角的渲染逻辑。
容易踩的坑：
- 加了
fill却看不到中心内容？先确认border-width是否足够大（比如至少10px），否则中心区域面积趋近于零 - 中心内容被背景色盖住？
fill区域 z-index 高于background-color，但低于background-image，如有图层遮挡，优先调background层级 -
fill不支持单独设置，必须紧跟在 slice 数值后，用空格分隔，不能写成border-image-fill: true;
响应式场景下，border-image-repeat 的选择直接影响对齐稳定性
当容器宽度变化，而边框长度无法被切片后的“边图”整除时，border-image-repeat 的取值会决定视觉是否错位。stretch（默认）强行拉伸边图填满，可能扭曲角图比例；round 缩放整张边图使其重复次数为整数，但会轻微改变边图密度；repeat 直接平铺，可能露白边或重叠。
实操建议：
- 横向边框（如顶部/底部）优先用
round，减少因缩放导致的“断点”感 - 四角图案固定、不允许变形的场景（如徽章边框），改用
space：在边图间插入等距空白，牺牲部分填充率换对齐稳定 - 避免混用模式，例如
border-image-repeat: round stretch;表示水平 round、垂直 stretch，需明确每边意图
border-image 和 transform: scale(1.2) 或高 DPR 设备缩放一起用时，图像源本身的像素精度、border-image-slice 的百分比换算、以及浏览器对 subpixel 渲染的策略会叠加干扰——这时候单靠 CSS 很难保证所有设备上都“刚好 1px 视觉宽度”，得结合 @media (-webkit-min-device-pixel-ratio: 2) 切换不同 slice 值或 fallback 到 box-shadow。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
