border-image

翻译正在进行中。

border-image 属性能给元素的边框添加背景图片。这使得绘制复杂的外观组件更加简单,也不用在某些情况下使用九宫格了。使用 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:
适用元素as each of the properties of the shorthand:
. 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  

浏览器兼容性

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.

文档标签和贡献者

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