border-image-outset

  • 版本:CSS3
  • 2018.3.12

语法:

border-image-outset:[ <length> | <number> ]{1,4}

默认值0

适用于:所有元素,除table元素设置了border-collapse属性值为collapse之外

继承性:无

动画性:否

计算值:数字或者绝对长度

媒 体:视觉

取值:

<length>
用长度值指定边框图像向外偏移的距离。不允许负值。
<number>
用浮点数指定边框图像向外偏移的距离。该值表示为border-width的倍数,若值为2,则使用值为2 * border-width。不允许负值。

说明:

定义边框图像从边框边界向外偏移的距离。
  • 该属性接受1~4个参数值,如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边;提供三个,第一个用于上,第二个用于左、右,第三个用于下;提供两个,第一个用于上、下,第二个用于左、右;只提供一个,同时作用于四边。
  • 该属性用于指定边框图像向外偏移的距离,如果值为10px,则图像在原本的基础上往外延展10px再显示,但并不会影响布局,因为它本身并不占据布局空间。这有点类似outline-offset
  • 对应的脚本特性为:borderImageOutset

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 10.0 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 40.0+
11.0+

示例:

关注编程学问公众号