用 border-image 做图案边框的关键是九宫格切图与属性协同：border-image-slice 按像素值切分 3×3 区域，必须配合 border-image-source 和非零 border-width 才生效；推荐 border-image-repeat: round，并注意素材尺寸、透明背景及导出细节对切图精度的影响。
直接用 border-image 做图案边框，关键不是“能不能”，而是“图怎么切、属性怎么配”——多数失败都卡在切图方式和 border-image-slice 的数值上。
切图必须用 9 宫格，且默认按像素值切
border-image 内部按 3×3 九宫格解析图片：四个角保留、四条边重复/拉伸、中间区域丢弃。切分依据是 border-image-slice 的四个值（上右下左），单位默认为像素，且不写单位时就是像素值。
- 如果素材图是 300×300 像素，想让每边留出 30px 作边框区域，就写
border-image-slice: 30（等价于30 30 30 30） - 若图带透明背景或内边距，切多了会把内容区误当边框；切少了会导致角落变形或拼接缝隙
- 加
fill关键字才能让中间区域显示（如border-image-slice: 30 fill），但绝大多数图案边框不需要它
border-image-source + border-image-slice 必须同时设才生效
只设 border-image-source 没用，浏览器会忽略；只设 border-image-slice 更没用——这两个是联动开关。还得配 border-image-repeat 控制边缘填充方式。
-
border-image-repeat: repeat：平铺（适合无缝纹理） -
border-image-repeat: round：缩放至整数倍再平铺（避免截断，推荐首选） -
border-image-repeat: stretch：直接拉伸（易失真，慎用） - 别忘了先给元素设个基础
border-width，否则边框无宽度，图案不显示
div.pattern-border {
border: 20px solid transparent;
border-image-source: url("frame.png");
border-image-slice: 40;
border-image-repeat: round;
border-image-width: 20px;
}
常见报错和加载失败的真正原因
控制台没报错，但边框不出现？大概率是这三件事之一没做：
立即学习“前端免费学习笔记（深入）”；
- 图片路径 404 或跨域（
border-image-source不受 CORS 影响，但本地 file:// 协议下会被浏览器拦截） -
border-width为 0 或没设（border: none或border: 0会彻底关掉边框渲染通道） - 切图值超过图片尺寸（比如图高 50px，却写
border-image-slice: 60），此时整个边框退回到纯色 fallback
真正难调的永远不是语法，而是那张图的像素边界在哪、有没有抗锯齿毛边、是否被 PS 导出时自动加了 1px 白边——这些细节决定了 slice 值差 1 都可能漏一块。
