CSS参考手册
背景和边框 | Backgrounds & Borders
边框图像重复 | 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 |
? |
? |
? |
背景和边框 | Backgrounds & Borders相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。