边框图像重复 | border-image-repeat
border-image-repeat
border-image-repeat定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。
/* border-image-repeat: type */
border-image-repeat: stretch;
/* border-image-repeat: horizontal vertical */
border-image-repeat: round stretch;
/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;
| 初始值 | stretch |
|---|---|
| 适用元素 | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| 是否是继承属性 | no |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
typestretch,repeat,round,space选一。属于单个值的情况。horizontalstretch,repeat,round,space选一。属于两个值的情况。verticalstretch,repeat,round,space选一。属于两个值的情况。stretch拉伸图片以填充边框。repeat平铺图片以填充边框。round平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。space平铺图像 。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）inherit继承父级元素的计算值。
正式语法
[ stretch | repeat | round | space ]{1,2}
示例
CSS内容
#borderImageRepetition {
width: 260px;
height: 80px;
margin-bottom: 10px;
border: 30px solid;
border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
border-image-repeat: stretch; /* Can be changed in the live sample */
}
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3The definition of 'border-image-repeat' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 15.0 | (Yes) | 15.0 (15.0) | 11 | 15 | 6 |
| round | 303 | (Yes) | 15.0 (15.0) | 11 | ? | 9.14 |
| space | 561 | (Yes) | 50.0 (50.0)2 | 11 | No support | 9.14 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | 15.0 (15.0) | No support | ? | 9.34 |
| round | ? | (Yes) | 15.0 (15.0) | ? | ? | ? |
| space | ? | (Yes) | 50.0 (50.0)2 | ? | ? | ? |
