边框图片属性
最后更新：2026-09-13
border-image 边框图片属性
border-image 允许使用图片来绘制元素的边框，而不是传统的实线或虚线。它通过将一张图片切割成九宫格（四个角、四条边、中间区域），再将各部分映射到边框对应位置来实现。这是创建复杂边框装饰效果的强大工具。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
border-image: <border-image-source> || <border-image-slice> || <border-image-width> || <border-image-outset> || <border-image-repeat>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<border-image-source> || <border-image-slice> || <border-image-width> || <border-image-outset> || <border-image-repeat> | 值 | 边框图片简写 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-image | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
注意： 使用 border-image 时必须同时声明 border 或 border-width，否则图片边框无法显示。
提示： border-image-slice 的值表示从图片边缘向内切割的距离；round 关键字会让边框图片自动平铺并缩放以适应边长。
❓ 常见问题
Qborder-image 的浏览器兼容性如何？
A现代浏览器（Chrome、Firefox、Edge、Safari）均已支持，但 IE11 及更早版本支持有限或不支持。使用时应同时声明 border: solid + border-width 作为回退，这样不支持 border-image 的浏览器会显示普通边框，否则元素可能完全没有边框。
Q使用 border-image 后为什么边框不显示？
A常见原因：一是没设 border-width，border-image 不会自动提供宽度，需先用 border 撑出边框区域；二是图片路径错误；三是 slice 值超出图片实际尺寸。建议先写 border: 20px solid transparent; 再叠加 border-image。
Qborder-image 的 slice、repeat、outset 分别是什么意思？
Aslice 是从图片四边向内切的九宫格宽度（不写单位，按像素或百分比）；repeat 决定边条填充，常用 stretch（拉伸）、round（平铺取整）、repeat（平铺可截断）；outset 让边框图向外扩展。简写：url(图) slice / width / outset repeat。
Qborder-image 和 border-radius 能同时使用吗？
A不能很好地同时使用。border-image 绘制时不会被 border-radius 裁剪，圆角区域会出现图片露角或锯齿，二者组合效果不佳。需要"圆角 + 图片边框"效果时，建议改用 background-image + padding 模拟，或用 mask 实现。
🏷️ 相关属性
💡 相关案例
📚 相关教程
