CSS border-image-width 属性定义了边框图像的宽度。
border-image-width 属性是 CSS3 属性之一。
它可以具有一到四个值顶部、右侧、底部和左侧。
我们可以使用一个、两个、三个或者四个值。
如果定义了一个值，它将对所有四个边应用相同的宽度。
如果定义了两个值，第一个应用于顶部和底部，第二个应用于左侧和右侧。
如果定义了三个值，第一个应用于顶部，第二个应用于左右，第三个应用于底部。
如果定义了四个值，则宽度适用于时钟的顶部、右侧、底部和左侧。
这意味着如果省略第四个值，则与第二个值相同。
如果省略第三个，则与第一个相同。
如果省略第二个，则与第一个相同。
| 初始值 | 1. |
|---|---|
| 应用于 | 当border collapse为collapse时，除内部表元素外的所有元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.borderImageWidth=“20px”； |
语法
border-image-width: number | % | auto | initial | inherit;
边框图像宽度属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 20px;
border-image: url("/bg.jpg") round;
border-image-slice: 20;
border-image-repeat: round;
border-image-width: 20px;
}
</style>
</head>
<body>
<h1>Border-image-width Example</h1>
<p class="border">将 the border-image-width设置为 20px.</p>
</body>
</html>
这是另一个示例，我们可以其中查看使用一个、两个、三个或者四个值时会发生什么变化。
具有不同值的 border-image-width 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
.border1 {
border: 10px solid transparent;
padding: 20px;
border-image: url("/bg.jpg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px;
}
.border2 {
border: 10px solid transparent;
padding: 20px;
border-image: url("/bg.jpg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px;
}
.border3 {
border: 10px solid transparent;
padding: 40px;
border-image: url("/bg.jpg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px 40px;
}
.border4 {
border: 10px solid transparent;
padding: 55px;
border-image: url("/bg.jpg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px 40px 55px;
}
</style>
</head>
<body>
<h1>The border-image-width Example</h1>
<p class="border1">将 the border-image-width 设置为 20px.</p>
<p class="border2">将 the border-image-width 设置为 20px ， 10px.</p>
<p class="border3">将 the border-image-width 设置为 20px, 10px ， 40px.</p>
<p class="border4">将 the border-image-width 设置为 20px, 10px, 40px ， 55px.</p>
</body>
</html>
CSS border-image-width 属性值说明
| 值 | 说明 |
|---|---|
| length | 定义边框宽度大小的长度单位（px）。 |
| number | 边框宽度定义为相应边框宽度的倍数。不能为负，默认值为1. |
| percentage | 相对于水平偏移的边界图像区域的宽度和垂直偏移的边界图像区域的高度来计算。 |
| auto | 边框宽度等于相应边框图像切片的固有宽度或者高度。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:18 来源：oir作者：oir