border-image-slice数值不带单位，实际按border-image-source图片原始像素计算；30在300×300图中切30px，在600×600图中仅占5%，导致视觉变薄；推荐用百分比如10%确保跨图一致。
border-image-slice数值不带单位，但实际按原图像素算
很多人设了border-image-slice: 30;，发现边框在不同尺寸图片上表现不一致——不是 bug，是规范行为。这个30不是相对于元素、也不是相对于 viewport，而是**相对于你指定的border-image-source图片原始宽高**。一张 300×300 的图，30 就是切顶部/右侧/底部/左侧各 30 像素；换成 600×600 图，还是切 30 像素，但只占原图 5%，视觉上就“变薄”了。
解决办法是显式用百分比：border-image-slice: 10%;。这样无论原图是 200px 还是 1200px，都稳定取四边各 10% 区域，避免因图片替换导致布局抖动。
- 只写一个数值（如
30）时，四边等值；写两个（20 40）则上下=20、左右=40 - 百分比值必须带
%符号，border-image-slice: 20和border-image-slice: 20%完全不同 -
border-image-slice: 0合法，但会把所有边框区域裁掉，只剩透明边框（常被误认为“失效”）
加了fill也不显示中心区域？检查border-width和box-sizing
fill 关键字只控制“中间那块要不要渲染”，它本身不决定渲染位置或尺寸。常见现象是写了 border-image-slice: 30 fill; 却看不到中心内容——大概率是因为border-width太小，或者box-sizing没配对。
关键逻辑：浏览器把切好的九宫格中，四角固定贴到 border 角落，四边拉伸填充 border 边线，而中心块（fill 区域）是**拉伸填充 border-box 内部剩余矩形区域**（即 border-width 围出的框内，减去四边 slice 占位后的中心空地）。如果 border-width 是 0 或 transparent 但没设具体宽度，中心区域就没有可填充的空间。
- 确保设置了明确的
border-width，比如border: 20px solid transparent; - 若用
box-sizing: border-box，注意内容区宽高已包含 border，但fill渲染区域仍以 border-box 边界为基准 -
fill区域 z-index 高于background-color，如有色块盖住，先检查是否 background 盖住了它
border-image-repeat: stretch vs round 导致边框错位
当边框长度不能被切片后边区域整除时，stretch（默认）会强制拉伸边图填满，可能让角图变形；round 则缩放整张边图使其重复次数为整数，但会轻微改变边图比例——这两种模式都可能让边框视觉“偏移”，尤其在响应式容器里。
典型表现：左右边框看起来比上下边框粗/细，或角图边缘出现模糊、锯齿、错位缝隙。这不是渲染错误，是 repeat 策略与容器尺寸不匹配的结果。
- 用
border-image-repeat: round时，浏览器会动态缩放边图，可能导致角图也同比例缩放（即使你希望角图保持原尺寸） - 用
border-image-repeat: space可避免拉伸和缩放，但会在边图间留空白，需配合 padding 控制间距 - 最稳的方案是设计边图时，让单边图宽度能整除目标边框长度，再用
repeat—— 但现实中往往做不到，所以建议优先测round+ 百分比slice
为什么设置了border-image，元素尺寸却变了？
border-image 本身不改变盒模型尺寸，但它依赖 border-width 分配图像空间。如果你原来用 border: none，突然加上 border-image 却没同步设 border-width，浏览器会回退到 border-width: medium（通常约 3–4px），导致元素突然变大——这是最常见的“布局偏移”源头。
更隐蔽的是：当 border-image-width 显式设为 auto 时，它会取 border-image-slice 的值作为图像宽度，但这个值仍要通过 border-width 落地。也就是说，border-image 不是独立于 border 存在的装饰层，它是 border 的图像化实现。
- 始终显式声明
border-width，哪怕只是border: 1px solid transparent; - 不要混用
border简写和border-image，后者会覆盖前者的颜色和样式，但不会重置 width - 调试时临时加
outline: 1px dashed red;，能快速确认 border-box 是否意外扩张
真正容易被忽略的点是：border-image-slice 的数值单位逻辑和 border-width 的作用边界完全分离——前者管图怎么切，后者管图往哪贴。两者不联动，但共同决定最终呈现。调 layout 偏移时，别只盯着 slice，先锁死 border-width 和 box-sizing。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
