border-image-slice 四值按 top/right/bottom/left 顺序，从图像四边向内量取距离切出九宫格；省略时依规则继承，加 fill 才显示中间区域。
border-image-slice 的四个值怎么填才对应九宫格切割线
它不是“按比例切图”，而是从图像四边向内量取距离，画出四条切割线：顶部向下、右侧向左、底部向上、左侧向右。这四条线把原图切成 3×3 的九宫格。
四个值顺序固定为：top right bottom left，支持数字（像素）、百分比或 fill 关键字：
-
border-image-slice: 27 27 27 27表示在距上/右/下/左边缘 27px 处切；适用于 81×81 的标准点九图（每格 27×27） -
border-image-slice: 30%等价于30% 30% 30% 30%，水平方向按图宽 30%、垂直方向按图高 30% 向内偏移 - 省略写法有默认继承规则：只写一个值 → 四边相同；写两个 →
top/bottom和right/left；写三个 →top、right、bottom、left = right
为什么图片中间区域默认不显示
因为 border-image-slice 切完后，只有角区域（①③⑦⑨）和边区域（②④⑥⑧）被用于渲染边框，中间区域（⑤）默认被丢弃（透明处理），这是规范行为，不是 bug。
要让它显示，必须显式加 fill：
-
border-image-slice: 27 27 27 27 fill—— 中间块会拉伸铺满元素内容区背景 -
border-image-slice: 50% fill—— 中间部分按比例保留，但注意：此时它不再参与边框渲染，只作背景 - 没加
fill却想看到中间？那说明你其实想要的是background-image，不是border-image
百分比值和像素值混用容易踩的坑
百分比是相对于**源图尺寸**，不是元素尺寸，也不是视口尺寸。一张 200×100 的图，border-image-slice: 25% 50% 意味着：顶部切在 50px 处、右侧切在 100px 处、底部切在 50px 处、左侧切在 100px 处 —— 这很可能切歪，导致边区域变窄甚至消失。
更稳妥的做法：
- 点九图优先用整数像素值，且确保图尺寸能被 3 整除（如 90×90、81×81），避免小数像素截断
- 用百分比时，务必确认源图宽高比稳定，否则响应式缩放后，
25%在不同设备上切的位置实际像素值会漂移 -
border-image-slice: 0是合法值，表示不切，整张图当 corner 使用（通常不是你想要的）
和 border-image-width 配合时的关键约束
border-image-slice 切的是图，border-image-width 控制的是边框区域大小 —— 二者不直接换算，但视觉对齐依赖它们协同。
例如你有一张 81×81 的点九图，并设了 border-image-slice: 27 27 27 27，那么理想情况下应配 border-image-width: 27px，这样角区域（27×27）刚好贴合边框宽度，不会拉伸失真。
常见错配现象：
-
border-image-width: 10px+border-image-slice: 27→ 角图被压缩成 10×10，模糊或锯齿 -
border-image-width: 50px+border-image-slice: 27→ 角图被拉伸，边区域重复次数变少，出现空隙 - 真正需要动态适配时，建议用 SVG 边框图，或改用
background+mask组合方案
border-image-slice: 40 40 40 40），浏览器不会报错，但边区域可能塌缩为 0，只剩四个角 —— 此时得回头检查源图尺寸和切片数值是否匹配。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
