如何利用CSS中的border-image属性用图片作为容器边框？

border-image 能生效的前提是 border 必须有显式宽度且不为 none；否则图片边框完全不会显示。常见错误包括未声明 border、slice 值带单位、图片路径失效；slice 数值按像素从图片边缘向内量取，将图切成九宫格，中间区域默认丢弃；repeat、stretch、round 决定边图铺放方式，需依图特性选择；兼容性上需搭配 border 降级，并慎用 outset 和非整数 slice。

border-image 能生效，前提是 border 有显式宽度且不为 none；否则图片边框完全不会显示——这是最常被忽略的前提。

为什么 border-image 没反应？检查这三点

常见错误现象：border-image 写了但边框仍是纯色或干脆消失。

1. border 必须声明，例如 border: 20px solid transparent；只写 border-image 不起作用
2. border-image-slice 值不能带单位（如 48px 错，48 对），否则整个属性被浏览器忽略
3. 图片路径 404 或跨域限制会导致回退到默认边框，建议先用 background-image 测试图片是否可加载

border-image-slice 数值怎么定？看图切，别猜

它把图片切成九宫格：上、右、下、左四条线决定四个角的大小，中间区域被丢弃。数值不是“边框粗细”，而是从图片边缘向内量的像素数。

1. 如果图片设计是“固定角 + 可平铺边”，就按实际角尺寸填，比如角宽高都是 48px → border-image-slice: 48 48 48 48
2. 若图片带内边距（如导出时留白），slice 值要包含留白，否则边会错位或拉伸变形
3. 百分比写法（如 30%）按图片原始尺寸计算，响应式场景慎用，容易在缩放后失准

repeat/stretch/round 的实际表现差异

同一张图配不同 border-image-repeat，效果天差地别：

1. stretch：直接拉伸填充整条边——角图不变形，但边图严重失真，适合纯色渐变图
2. repeat：原图等比重复平铺——可能截断，出现明显接缝，适合无纹理的规则图案
3. round：自动缩放图片使完整单元刚好填满边长——最常用，但要求边图能无缝衔接，否则缩放后露白边

示例：border-image: url(bgi.png) 48 27 40 35 / 20px round 中，round 会让上下边各铺若干个完整水平单元，左右边铺若干个完整垂直单元。

兼容性与降级必须手动处理

IE10+ 和现代浏览器支持 border-image，但 iOS Safari 旧版本对 border-image-outset 或非整数 slice 支持不稳定。

1. 永远搭配 border 声明作为降级：如 border: 20px solid #eee，确保无图时仍有视觉边界
2. 避免依赖 border-image-outset 做关键布局，它在部分安卓 WebView 中行为异常
3. SVG 作 border-image-source 是安全选择，缩放不失真，且支持透明通道

真正麻烦的不是写法，而是图片资源本身——slice 值必须和设计稿严丝合缝，改图就得重调数值，没法靠 CSS 自动适配。