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  

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

16

7 -webkit-

12

12 -webkit-

151 2 3 4

3.5 -moz- 5

44 -webkit- 6

11

10.5

11 -o-

6

3 -webkit-

optional <border-image-slice> ? ?15 ? ? ?
fill keyword Yes ?15 ? ?6
<gradient> Yes ?29 Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.1 -webkit- ?

Yes

Yes -webkit-

151 2 3 4

4 -moz- 5

44 -webkit- 6

11 -o-

6

3.2 -webkit-

?
optional <border-image-slice> ? ? ?15 ? ? ?
fill keyword18 ? ?15 ?6 ?
<gradient> Yes ? ?29 Yes Yes ?

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

2. Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).

3. From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).

4. Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).

5. An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.

6. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

文档标签和贡献者

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