border-image-width

版本：CSS3

CSS border-image-width属性设置元素的边框图像的宽度。假如border-image-width大于已指定的border-width，那么它将向内部(padding/content)扩展。

示例

/* Keyword value */
border-image-width: auto;

/* <length> value */
border-image-width: 1rem;

/* <percentage> value */
border-image-width: 25%;

/* <number> value */
border-image-width: 3;

/* vertical | horizontal */
border-image-width: 2em 3em;

/* top | horizontal | bottom */
border-image-width: 5% 15% 10%;

/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;

浏览器支持

IE11以上版本的浏览器都支持border-image-width

语法

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

• 当指定一个值时，它对所有四个边应用相同的宽度。
• 当指定两个值时，第一个宽度应用于顶部和底部，第二个宽度应用于左侧和右侧。
• 当指定三个值时，第一个宽度应用于顶部，第二个宽度应用于左侧和右侧，第三个宽度应用于底部。
• 当指定四个值时，宽度将按顺时针顺序应用于顶部、右侧、底部和左侧。

取值：

• <length>：用长度值指定宽度。不允许负值。
• <percentage>：用百分比指定宽度。参照其包含块进行计算。不允许负值。
• <number>：根据元素border-width属性，用倍数表示边框宽度。不允许负值。
• auto：如果被设置，则border-image-width采用与border-image-slice相同的值。

实例：

border-image-width: 3;
border-image-width: 2em 3em;
border-image-width: 5% 15% 10%;
border-image-width: 5% 2em 10% auto;
border-image-width: inherit;

p{
 border:15px solid;
 padding:30px;
 width:100px;
 border-image-source:url(images/kuang.jpg);
 border-image-repeat:repeat;
 border-image-width:26% 2%;
}

效果图：

p {
  border: 20px solid;
  border-image: url("/upload/202006/border-image-width-border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
   no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>