边框图片 | border-image

边界图像

该border-imageCSS属性允许在元素的边界绘制图像。这使得绘制复杂外观的小部件比现在简单得多，并且在某些情况下不需要九个盒子。本border-image是用来代替由给定的边框样式border-style属性。

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

虽然规范要求border-style必须存在，如果border-image使用，一些浏览器可能不会实现这一点。需要注意的是，如果计算值是非常重要的border-image-source，它可以通过设置border-image-source或简写border-image，是none，或者如果无法显示的图像，边框样式将被使用。

• border-image-source：none

• border-image-slice：100%

• border-image-width：1

• border-image-outset：0s

• border-image-repeat：stretch

Applies to as each of the properties of the shorthand:

• border-image-outset：所有元素，除了内部表元素时border-collapse是collapse。它也适用于::first-letter。

• border-image-repeat：所有元素，除了内部表元素时border-collapse是collapse。它也适用于::first-letter。

• border-image-slice：所有元素，但内部表元素除外border-collapse是collapse它也适用于::first-letter。

• border-image-source：所有元素，但内部表元素除外border-collapse是collapse它也适用于::first-letter。

• border-image-width：所有元素，但表元素除外border-collapse是collapse它也适用于::first-letter。

。它也适用于::first-letter。作为速记的每个属性，继承“否”百分比：

• border-image-slice：参考边界图像的大小

• border-image-width：指边界图像区域的宽度或高度。

Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• border-image-outset：按规定，相对长度转换为绝对长度

• border-image-repeat：具体规定

• border-image-slice：1至4个百分比（如指定的）或绝对长度（s），加上关键字（fill如果指定）

• border-image-source：none或将具有其URI的图像变为绝对的。

• border-image-width：按规定，相对长度转换为绝对长度

Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar  

语法

值

请参阅不同值的相应属性。

正式语法

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

示例

位图

CSS内容

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

HTML内容

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

梯度

CSS内容

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

HTML内容

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

规范

浏览器兼容性

该规范的早期版本在15之前的Gecko版本（Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12）中实现了前缀。

直到Gecko 47.0（Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44）没有视口的SVG没有正确切片（bug 619500）。从壁虎48.0（火狐48.0 / 48.0的Thunderbird / SeaMonkey的2.45）开始，他们都显示同样的SVGs与视口，但如果切片是不完全的50％，他们无法正确的拉伸（错误1264809）。Gecko 49.0（Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46）修复了这个问题，但是当e10s被禁用时（bug 1290782），没有视口的SVG仍然存在问题。

此外，小SVGs被错误地拉​​伸，因为border-image-slice中的百分比数计算为整数而不是浮点数（bug 1284797）。

除了对非前缀的支持外，Gecko 44.0（Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41）还增加了对该属性的-webkit前缀版本的支持，以解决layout.css.prefixes.webkit默认情况下为默认值false的网站兼容性问题。因为Gecko 49.0（Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46）的首选项默认为true。

对于Opera，前缀属性是在非前缀后添加的。