边框图像重复 | 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(?developer/section/1071849/"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	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18