border-image-repeat

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,不过没有浏览器实现它,因而移除,将来可能添加进来。

文档标签和贡献者

 此页面的贡献者: teoli, Sebastianz, yan
 最后编辑者: teoli,