border-image-slice四值按top/right/bottom/left顺序从图片四边向内量取距离切出九宫格，支持无单位数字、百分比或fill；省略时依规则继承，不加fill中间区域默认透明。
border-image 本身不“生成”复杂边框，它只是把一张图按九宫格切开、再贴到边框区域——真正决定边框是否复杂，是你提供的那张图和怎么切它。
border-image-slice 的四个值到底怎么填
它不是“按比例缩放”，而是从图片四边向内量距离，画出四条线（上→下、右→左、下→上、左→右），围出一个中心区，形成 3×3 网格。顺序固定为 top right bottom left，只接受数字（像素值，无单位）、百分比或 fill 关键字。
-
border-image-slice: 30等价于30 30 30 30；border-image-slice: 20 40等价于20 40 20 40——很多人误以为这是“上下/左右”，其实它是“上下=20、左右=40” - 用像素值时，建议源图尺寸能被 3 整除（如
90px × 90px配30 30 30 30），避免小数像素截断导致边区域塌缩 - 混用单位极危险：
border-image-slice: 25% 30px意味着顶部/底部在图高 25% 处（比如 50px），左右却在图宽 30px 处（比如 30px）——四条线严重不对称，边区域可能只剩一条线甚至消失 -
border-image-slice: 0合法，但整图当 corner 用，通常不是你想要的效果
为什么中间区域（⑤）默认不显示
这是规范行为，不是 bug。切完九宫格后，浏览器只用角（①③⑦⑨）和边（②④⑥⑧）渲染边框；中间块（⑤）默认被丢弃（透明处理），不参与任何渲染。
- 如果你看到中间空白，却希望它显示出来，大概率你真正需要的是
background-image，而不是折腾border-image - 要让它出现，必须显式加
fill：例如border-image-slice: 27 27 27 27 fill—— 此时中间块不再属于边框，而是铺满内容区作背景（受background-clip影响） -
border-image-slice: 50% fill看似简洁，但中间部分按图尺寸 50% 截取后拉伸填充，易失真，慎用
border-image-width 和 border-width 怎么配才不糊
border-image-width 控制切片在边框上的最终显示宽度，优先级高于 border-width；但两者是协作关系，不是替代。
- 只写
border: 20px solid transparent却不设border-image-width，图片边框会被压缩成细线，或角区域被裁掉一部分 -
border-image-width未声明时，会回退使用border-width值；但若你有一张81×81点九图并设了border-image-slice: 27 27 27 27，理想搭配是border-image-width: 27px，这样角区域（27×27）刚好一比一贴合，不拉伸不变形 - 别依赖百分比或
auto做border-image-width：高 DPR 设备或页面缩放时，计算结果不稳定，容易糊或错位
border-image + 渐变或变量的硬伤在哪
用 linear-gradient() 当 border-image-source 是可行的，但有三处极易翻车：
- 漏掉
border-image-slice: 1—— 默认是100%，会把渐变图切成九宫格后只留四角，边框看起来像纯色甚至全透明 - 没加
fill—— 即使写了border-image-slice: 1，不加fill中间仍是空的，渐变无法铺满边框区域 - 加了
border-radius—— Chrome/Firefox 下几乎必然在拐角处撕裂、偏色或消失；这不是 bug，是border-image基于矩形盒模型绘制，不重映射纹理到圆角路径
真实项目里，带圆角的渐变边框更稳妥的做法是放弃 border-image，改用伪元素模拟：主元素设 position: relative 和 border-radius，::before 绝对定位、inset: -Xpx 撑出边框空间，再把渐变写在伪元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
