边框图片 | border-image (Backgrounds & Borders) - CSS 中文开发手册
该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，或者如果无法显示的图像，边框样式将被使用。
| 初始值 | as each of the properties of the shorthand: border-image-source: none border-image-slice: 100% border-image- 1 border-image-outset: 0s border-image-repeat: stretch |
|---|---|
| 适用元素 | as each of the properties of the shorthand: border-image-outset: all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. border-image-repeat: all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. border-image-slice: all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. border-image-source: all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. border-image- all elements, except table elements when border-collapse is collapse. It also applies to ::first-letter. . It also applies to ::first-letter. |
| 是否是继承属性 | no |
| Percentages | as each of the properties of the shorthand: border-image-slice: refer to the size of the border image border-image- refer to the width or height of the border image area |
| 适用媒体 | visual |
| 计算值 | as each of the properties of the shorthand: border-image-outset: as specified, but with relative lengths converted into absolute lengths border-image-repeat: as specified border-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified border-image-source: none or the image with its URI made absolute border-image- as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
border-image-source：noneborder-image-slice：100%border-image-width：1border-image-outset：0sborder-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>
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3The definition of 'border-image' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 3.5 (1.9.1)-moz1 15 (15)2 | 7.0-webkit 16.0 | (Yes)-webkit (Yes) | 11 | 10.5 / 11.0-o3 15.0 | 3.0-webkit 6.0 |
| optional <border-image-slice> | 15 (15) | ? | ? | ? | ? | ? |
| fill keyword | 15 (15) | (Yes) | ? | ? | No support | 6 |
| <gradient> | 29.0 (29.0) | (Yes) | ? | (Yes) | (Yes) | (Yes) |
| Feature | Android Browser | Edge | Firefox Mobile (Gecko) | iOS Safari | Opera Mini | Opera Mobile |
|---|---|---|---|---|---|---|
| Basic support | 2.1-webkit | (Yes)-webkit (Yes) | 3.5 (1.9.1)-moz1 15 (15)2 | 3.2 -webkit 6.0 | No support | 11.0-o |
| optional <border-image-slice> | ? | ? | 15.0 (15) | ? | No support | ? |
| fill keyword | 18.0 | ? | 15.0 (15) | 6 | No support | No support |
| <gradient> | (Yes) | ? | 29.0 (29.0) | (Yes) | (Yes) | (Yes) |
该规范的早期版本在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，前缀属性是在非前缀后添加的。
CSS 中文开发手册