border-image-slice四值按top/right/bottom/left顺序从源图四边向内量取距离切出九宫格，只接受无单位数字（像素）、百分比或fill；省略时按css四值继承规则补全，中间区域默认丢弃，加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支持单值、双值、三值、四值写法，规则同border-width，例如border-image-width: 10px 20px表示上下 10px、左右 20px
repeat / round / stretch 的行为差异在哪
这三个值控制边区域（②④⑥⑧）的铺放方式，**不控制角区域（①③⑦⑨）**，角区域永远保持原始尺寸、不拉伸不重复。
常见误解：以为 round 在所有浏览器中都表现一致。实际上 Chrome 和 Safari 对 round 和 repeat 渲染趋同，Firefox 才严格区分。
-
stretch（默认）：边区域直接拉伸填满对应边长，易导致纹理失真 -
repeat：边区域平铺，超出部分裁剪；从边中心开始重复，不是从左上角 -
round：强制完整重复，通过缩放使整数倍铺满，避免截断；但缩放可能导致模糊或挤压
真正难调的是当边长不能被单个边区域整除时，round 的缩放逻辑会因浏览器实现而异——这点在响应式布局里最容易暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
