border-image-width

border-image-width 该属性用作规定图像边框宽度。若 border-image-width 大于已指定的 border-width 则将向内部扩展。

语法

border-image-width: vertical horizontal;
border-image-width: top horizontal bottom;
border-image-width: top right bottom left;
border-image-width: all;
border-image-width: inherit;

值

值	描述
width	此关键词表示当使用一个值时，这个值表示图像的宽度被当做边框宽度被应用到四条边框。
horizontal	此关键词表示当使用两个值的时候，该值表示图像的宽度被当做边框宽度应用到垂直边框。
vertical	此关键词表示当使用两个值的时候，这个值表示图像的宽度被当做边框宽度应用到水平边框.
top	此关键词表示当使用3个和4个值的时候，这个值表示图像的宽度被当做边框宽度应用到顶部边框.
bottom	此关键词表示当使用3个和4个值时候，这个值表示图像的宽度被当做边框宽度应用到底部边框.
right	此关键词表示当使用4个值的时候，这个值表示图像的宽度被当做边框宽度应用到右侧边框
left	此关键词表示当使用4个值的时候，这个值表示图像的宽度被当做边框宽度应用到左侧边框.
inherit	此关键词表示在四个边框的值都继承自父元素的计算值。

例子

HTML

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

CSS

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

执行结果

参考

相关链接

外部链接

border-image-width-MDN


跳至内容顶部