border-image-repeat

border-image-repeat 该属性用于规定图片如何填充边框。单个值，设置所有的边框；两个值，分别设置水平和垂直的边距。

 

语法

border-image-repeat: type;
border-image-repeat: horizontal vertical;
border-image-repeat: inherit;

值

值描述
type 此关键词表示单个值的情况
horizontal 此关键词表示两个值的情况。
vertical 此关键词表示两个值的情况。
stretch 此关键词表示可拉伸图片以填充边框。
repeat 此关键词表示可平铺图片以填充边框。
round 此关键词同repeat类似，不过平铺整数次。
inherit 此关键词表示继承父级元素的计算值。

例子

HTML 

<div id="red">
</div>

CSS 

#red {
     width: 300px;
     height: 200px;
     border: 4px dashed red;
     border-image-repeat: horizontal vertical;
     background-image:    url("http://tse4.mm.bing.net/th?id=OIP.Mf677e381f4220ac2a878c923cf334aafo0&w=300&h=300&p=0&pid=1.7");
     }

执行结果

参考

相关链接

外部链接


跳至内容顶部