MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

border-image CSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单,也不用在某些情况下使用九宫格了。使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在,但一些浏览器可能没有实现这一点。

特别注意,若 border-image-source(此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示,则将应用 border-style。

初始值as each of the properties of the shorthand:
适用元素all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
是否是继承属性
Percentagesas each of the properties of the shorthand:
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

参考各属性对应的值。

正式语法

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

示例

位图

HTML 内容

<div id="bitmap">The image is stretched to fill the area.</div>

CSS 内容

#bitmap { 
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}

渐变

HTML 内容

<div id="gradient">The image is stretched to fill the area.</div>

CSS 内容

#gradient { 
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}

规范

规范 状态 备注
CSS Backgrounds and Borders Module Level 3
border-image
Candidate Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 3.5 (1.9.1)-moz[1]
15 (15)[2]
7.0-webkit
16.0
(Yes) 11 10.5 / 11.0-o[3]
15.0
3.0-webkit
6.0
optional <border-image-slice> 15 (15) ? ? ? ? ?
fill keyword 15 (15) (Yes) ? ? 未实现 6
<gradient> (Yes) ? 29.0 (29.0) (Yes) (Yes) (Yes)
Feature Android Browser Edge Firefox Mobile (Gecko) iOS Safari Opera Mini Opera Mobile
Basic support 2.1-webkit (Yes) 3.5 (1.9.1)-moz[1]
15 (15)[2]
3.2 -webkit
6.0
未实现 11.0-o
optional <border-image-slice> ? ? 15.0 (15) ? 未实现 ?
fill keyword 18.0 ? 15.0 (15) 6 未实现 未实现
<gradient> (Yes) ? 29.0 (29.0) (Yes) (Yes) (Yes)

[1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12).

[2] Until Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) SVGs without viewport were not sliced correctly (bug 619500). Starting from Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) they are displayed the same like SVGs with viewport, though if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809). This was fixed in Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), though there's still an issue for SVGs without viewport when e10sis disabled (bug 1290782).

Also, small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).

In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] For Opera, the prefixed property was added after the non-prefixed.

文档标签和贡献者

 此页面的贡献者: wanbei, xgqfrms-GitHub, Ende93, VdoG, teoli, Sebastianz, fskuok, yan
 最后编辑者: wanbei,