border-image-width

语法：

border-image-width：[ <length> | <percentage> | <number> | auto ]{1,4}

默认值：1

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

继承性：无

动画性：否

计算值：指定值

媒　体：视觉

取值：

<length>：
用长度值指定图像边框的厚度。不允许负值。
<percentage>：
用百分比指定图像边框的厚度。参照图像边框区域的大小（包含border和padding）进行换算。不允许负值。
<number>：
用浮点数指定图像边框的厚度。该值表示为border-width的倍数，若值为2，则使用值为2 * border-width。不允许负值。
auto：
如果auto值被设置，则border-image-width采用与border-image-slice相同的值。

说明：

定义元素边框图像的厚度。
  • 该属性用于指定使用多厚的边框来承载被裁剪后的图像。

  • 当该属性省略未定义时，因为默认值是1，所以该属性的计算值会是1 * border-width，相当于会直接使用border-width的定义。

    举个例子：

    .demo { border-width: 10px; border-style: solid; border-image-source: linear-gradient(red, yellow); border-image-slice: 5; }

    这个例子中，border-image-width省略未定义，所以border-image-width将会使用border-width所定义的值。

    从这个例子的可以看到，以下三种情况是等效的：

    • border-image-width省略未定义；
    • border-image-width属性值为1；
    • border-image-width属性值为10px；

  • 当该属性的值定义为auto，将会直接使用border-image-slice的定义。

    举个例子：

    .demo { border: 10px solid; border-image-source: linear-gradient(red, yellow); border-image-slice: 5; } .demo { border: 10px solid; border-image-source: linear-gradient(red, yellow); border-image-slice: 5; border-image-width: auto; }

    上面 2 段代码是等效的。

  • 当该属性的值定义为百分比时，其垂直和水平方向的计算值要分别参照图像边框区域的的宽和高进行换算

    举个例子：

    .demo { width: 200px; height: 100px; padding: 20px; border: 10px solid; border-image-source: linear-gradient(red, yellow); border-image-slice: 5; border-image-width: 10%; }

    此时，border-image-width的计算值是16px 26px。即，垂直方向：(100+20*2+10*2)*10%=16px，水平方向：(200+20*2+10*2)*10%=26px

  • 对应的脚本特性为：borderImageWidth。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
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+

示例：