border-image没生效需先检查三件事：边框宽度必须大于0、border-style不能为none或hidden、图片路径必须可访问；切图用25%起手验证，SVG作源时缩放更稳；兼容性差需设回退border样式。
border-image 没生效？先检查这三件事
绝大多数 border-image 失败，不是写法错，而是基础条件没满足：它只作用于有明确边框宽度的元素，且不能和 border-style: none 共存。
-
border-width必须大于0（哪怕设成1px），否则图片直接被忽略 -
border-style不能是none或hidden，推荐用solid或double - 图片路径必须可访问——本地文件用
file://协议时，Chrome 等浏览器会因安全策略拒绝加载
border-image-source + border-image-slice 组合怎么配才不拉伸变形
border-image-slice 决定图片如何切九宫格，数值理解错就全乱了：它默认单位是像素，但写成无单位数字（如 30）会被当成“像素”，写成 30% 才按图片自身尺寸百分比算。
- 切图值推荐用
25% 25% 25% 25%起手，快速验证是否分块正确 - 如果图片是纯边框纹理（无中心内容），加
fill关键字：border-image-slice: 30 fill，否则中间区域留白 - SVG 作
border-image-source时，border-image-slice对矢量图形依然生效，但缩放更稳定
border-image-repeat 的 tile / round / stretch 实际表现差异
border-image-repeat 控制边框边缘的平铺逻辑，不是所有值都适合所有场景：
-
stretch最简单，但拐角易撕裂——尤其用照片类图片时，四个角常出现错位或重复 -
round会缩放整张图适配边长，保证完整重复且无间隙，适合几何图案，但可能轻微失真 -
tile是真正平铺，但首尾可能露缝隙；若边框宽度不是图片单元宽的整数倍，得靠border-image-slice配合裁掉冗余部分
兼容性与回退方案绕不开的坑
Firefox 和 Safari 对 border-image 支持较稳，但 IE 完全不支持，Android 4.3 及更早 WebView 也有渲染异常。别依赖它做关键视觉传达。
立即学习“前端免费学习笔记（深入）”；
- 务必写好
border回退样式：border: 2px solid #ccc，否则老环境里边框直接消失 -
border-image-outset在部分安卓机型上表现不一致，慎用；border-image-width建议保持和border-width一致，避免意外溢出 - 用
@supports (border-image: 1)做特性检测比 UA 判断更可靠，但注意括号内必须是合法语法，不能写@supports (border-image: none)
真正难的不是写出能跑的 border-image，而是预判它在不同缩放、不同 DPR、不同图片尺寸下的切分边界是否恰好对齐——这点连 DevTools 的盒子模型高亮都显示不准。
