border-image-slice 四值按 top/right/bottom/left 顺序，从图像四边向内量取距离切出九宫格；省略时依规则继承，加 fill 才显示中间区域。
border-image-slice 的四个值到底怎么填
它不是“按比例切图”，而是从图片四边向内量取距离，画出四条线：顶部向下、右侧向左、底部向上、左侧向右。这四条线把原图切成 3×3 的九宫格。顺序固定为 top right bottom left，只支持数字（像素）、百分比或 fill 关键字。
常见错误现象：border-image-slice: 30 30 30 看似合理，但实际等价于 30 30 30 30 —— 因为第三个值缺失时会继承第一个值，第四个值缺失则继承第二个值；而 border-image-slice: 30 60 实际是 30 60 30 60，容易误以为只设了上下或左右。
- 像素值：如
border-image-slice: 27 27 27 27，适合标准点九图（81×81，每格 27×27） - 百分比：如
border-image-slice: 25% 50%，顶部/底部切在图高 25% 处，左右切在图宽 50% 处——注意，这是相对于源图尺寸，不是元素尺寸 - 混用风险：一张 200×100 的图，
border-image-slice: 25% 50px会导致上下切割线在 25px，左右在 50px，四条线不对称，边区域可能塌缩甚至消失
为什么中间区域（⑤）默认不显示
这是规范行为，不是 bug。切完九宫格后，浏览器只用角区域（①③⑦⑨）和边区域（②④⑥⑧）渲染边框；中间区域（⑤）默认被丢弃（透明处理），不参与任何渲染。
如果你看到中间是空白，却希望它显示出来，说明你真正需要的不是边框效果，而是背景填充——这时候该用 background-image，而不是折腾 border-image。
- 要让中间显示，必须显式加
fill：如border-image-slice: 27 27 27 27 fill -
fill后的中间块不再属于边框，而是铺满元素内容区作为背景（受background-clip影响） -
border-image-slice: 50% fill看似简洁，但中间部分按图尺寸 50% 截取后拉伸填充，易失真，慎用
border-image-width 和 border-width 的关系
border-image-width 决定切片在边框上的最终显示宽度，它优先级高于 border-width。但两者不是互斥，而是协作：边框的“结构宽度”由 border-width 定义，而图片边框的“视觉厚度”由 border-image-width 控制。
常见错误现象：只写 border: 20px solid transparent，却不设 border-image-width，结果图片边框被压缩成细线，或角区域被裁掉一部分。
- 若
border-image-width未声明，则回退使用border-width值 - 若
border-image-width设为27px，但border-image-slice是27 27 27 27，那四个角刚好一比一贴合，不会拉伸变形 - 若
border-image-width大于切片尺寸（如切片 27px，width 设为 40px），角区域会被等比放大；小于则缩小——这个缩放是自动的，无需额外处理
repeat 方式选 stretch 还是 round
border-image-repeat 控制四条边（上/右/下/左）如何填充对应边框区域。选错会导致接缝错位、图案断裂或拉伸失真。
最常踩的坑是直接写 repeat 却没考虑源图边区域宽度是否适配目标边框长度——比如边区域只有 27px 宽，而元素上边框长 300px，repeat 会平铺 11 次，但最后一次可能截断；round 则自动缩放整数倍以填满，更安全。
-
stretch：直接拉伸边区域填满，简单但易变形（尤其含文字或图标时） -
repeat：原图重复拼接，要求边区域图案能无缝衔接，否则有明显接缝 -
round：推荐首选，自动缩放并取整重复，保证铺满且无截断（如border-image: url(b.png) 27 fill / 27px round） -
space：少用，会在重复图之间加等距空白，对齐难控制
真正麻烦的不是语法，而是切图本身：源图必须预留足够清晰的边区域，且四个角不能带渐变或阴影外延——否则 border-image-slice 切出来的边区域一拉伸，边缘就糊了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
