CSS3 border-image-outset 属性
CSS3 border-image-outset 属性
定义
CSS3的border-image-outset
属性定义了边框图片的外边距,即与边框框线之外的距离。
语法
border-image-outset: <length> | <number> | initial | inherit;
属性值
length
: 可以用长度值来设置外边距,如1px
。number
: 可以用数字来设置外边距,表示外边距的倍数,如2
。initial
: 设置属性为默认值。inherit
: 让属性继承父元素的属性值。
示例
border-image: url(border.png) 30 / 10px / 10px repeat;
border-image-outset: 20px;
在上面的示例中,50像素的边框图片被平铺到元素的边框上,边框图片从外侧向外扩展20像素。
注意事项
- 该属性只有在
border-image
属性中使用才生效。 - 外边距的默认值为0。
- 如果给定的值为负数,则边框图片将向内缩小。
- 可以将该属性设置为百分比值,它将相对于边框图片的长度(或高度)进行计算。
浏览器支持度
- Chrome: 15.0+
- Firefox: 15.0+
- Safari: 6.0+
- Opera: 15.0+
- IE/Edge: 11.0+