border-image-outset

border-image-outset属性规定边框图像可超出边框盒的大小。

语法

border-image-outset: 20%;
border-image-outset: 10% 20%;
border-image-outset: 20px 20% 12px;
border-image-outset: 1px 2px 3px 4px;
border-image-outset: inherit

值

值	描述
sides	此关键词表示边框图片在四个方向上超出边框盒的<length>或着<number>数量。
horizontal	此关键词表示边框图片在水平方向上超出边框盒的<length>或着<number>数量。
vertical	此关键词表示边框图片在垂直向上超出边框盒的<length>或着<number>数量。
top	此关键词表示边框图片在上方超出边框盒的<length>或着<number>数量。
bottom	此关键词表示边框图片在下方超出边框盒的<length>或着<number>数量。
right	此关键词表示边框图片在右方超出边框盒的<length>或着<number>数量。
left	此关键词表示边框图片在左方超出边框盒的<length>或着<number>数量。
inherit	此关键词表示在四个方向上的值都继承自父元素的计算值。

例子

HTML

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

CSS

#red {
     width: 300px;
          height: 200px;
          border-image-outset: 20% 30%;
          border: 4px 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-outset-MDN


跳至内容顶部