border-image 能生效的前提是 border 必须有显式宽度且不为 none；否则图片边框完全不会显示。常见错误包括未声明 border、slice 值带单位、图片路径失效；slice 数值按像素从图片边缘向内量取，将图切成九宫格，中间区域默认丢弃；repeat、stretch、round 决定边图铺放方式，需依图特性选择；兼容性上需搭配 border 降级，并慎用 outset 和非整数 slice。
border-image 能生效，前提是 border 有显式宽度且不为 none；否则图片边框完全不会显示——这是最常被忽略的前提。
为什么 border-image 没反应？检查这三点
常见错误现象：border-image 写了但边框仍是纯色或干脆消失。
-
border必须声明，例如border: 20px solid transparent；只写border-image不起作用 -
border-image-slice值不能带单位（如48px错，48对），否则整个属性被浏览器忽略 - 图片路径 404 或跨域限制会导致回退到默认边框，建议先用
background-image测试图片是否可加载
border-image-slice 数值怎么定？看图切，别猜
它把图片切成九宫格：上、右、下、左四条线决定四个角的大小，中间区域被丢弃。数值不是“边框粗细”，而是从图片边缘向内量的像素数。
- 如果图片设计是“固定角 + 可平铺边”，就按实际角尺寸填，比如角宽高都是 48px →
border-image-slice: 48 48 48 48 - 若图片带内边距（如导出时留白），slice 值要包含留白，否则边会错位或拉伸变形
- 百分比写法（如
30%）按图片原始尺寸计算，响应式场景慎用，容易在缩放后失准
repeat/stretch/round 的实际表现差异
同一张图配不同 border-image-repeat，效果天差地别：
立即学习“前端免费学习笔记（深入）”；
-
stretch：直接拉伸填充整条边——角图不变形，但边图严重失真，适合纯色渐变图 -
repeat：原图等比重复平铺——可能截断，出现明显接缝，适合无纹理的规则图案 -
round：自动缩放图片使完整单元刚好填满边长——最常用，但要求边图能无缝衔接，否则缩放后露白边
示例：border-image: url(bgi.png) 48 27 40 35 / 20px round 中，round 会让上下边各铺若干个完整水平单元，左右边铺若干个完整垂直单元。
兼容性与降级必须手动处理
IE10+ 和现代浏览器支持 border-image，但 iOS Safari 旧版本对 border-image-outset 或非整数 slice 支持不稳定。
- 永远搭配
border声明作为降级：如border: 20px solid #eee，确保无图时仍有视觉边界 - 避免依赖
border-image-outset做关键布局，它在部分安卓 WebView 中行为异常 - SVG 作
border-image-source是安全选择，缩放不失真，且支持透明通道
真正麻烦的不是写法，而是图片资源本身——slice 值必须和设计稿严丝合缝，改图就得重调数值，没法靠 CSS 自动适配。
