Summary
border-image-repeat 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。
| 初始值 | stretch |
|---|---|
| 适用元素 | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as specified |
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
Syntax
Formal syntax: [ stretch | repeat | round ]{1,2}
border-image-repeat: type /* One-value syntax */ E.g. border-image-value: stretch; border-image-repeat: horizontal vertical /* Two-value syntax */ E.g. border-image-width: round space; border-image-repeat: inherit
Values
- type
stretch,repeat,round,space选一。属于单个值的情况。- horizontal
stretch,repeat,round,space选一。属于两个值的情况。- vertical
stretch,repeat,round,space选一。属于两个值的情况。stretch- 拉伸图片以填充边框。
repeat- 平铺图片以填充边框。
round- 类似于repeat，不过是整数次平铺。
inherit- 继承父级元素的计算值。
Examples
不同的取值，查看 border-image 的示例。
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 border-image-repeat |
Candidate Recommendation | Initial specification |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 15.0 | 15.0 (15.0) | 未实现 | 未实现 | 未实现 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 15.0 (15.0) | 未实现 | ? | ? |
早期候选推荐版本中有space，不过没有浏览器实现它，因而移除，将来可能添加进来。