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>