CSS3 border-image-width 属性

border-image-width 属性用于指定边框图片的宽度。边框图片是通过 border-image-source 属性定义的。

语法

border-image-width: <length> | <percentage> | <number> | auto | initial | inherit;

• <length>：指定边框图片的宽度，可以使用像素（px）、厘米（cm）、毫米（mm）等单位。
• <percentage>：指定边框图片的宽度，相对于包含块的宽度。
• <number>：指定边框图片的宽度，作为倍数应用到边框宽度上。
• auto：浏览器根据边框图片的大小自动计算宽度。
• initial：将属性设置为默认值。
• inherit：继承父元素的值。

示例

// www.javascriptcn.com code example
/* 使用像素作为边框图片宽度 */
div {
  border-image-source: url(border.png);
  border-image-width: 10px;
}

/* 使用百分比作为边框图片宽度 */
div {
  border-image-source: url(border.png);
  border-image-width: 20%;
}

/* 使用倍数作为边框图片宽度 */
div {
  border-image-source: url(border.png);
  border-image-width: 2;
}

在以上示例中，我们展示了如何使用不同单位来指定边框图片的宽度。通过调整 border-image-width 属性的值，可以控制边框图片的宽度，从而实现不同样式的边框效果。