CSS | border-image-width 属性

CSS的 border-image-width 属性用于设置边框图片的宽度。

语法

border-image-width: [length|number|initial|inherit|revert] {...values};

• length：设置边框图片的宽度为一个固定的长度值，比如 px、rem、em 等。
• number：设置边框图片的宽度为一个相对于边框厚度的数字。这个数字默认为 1。
• initial：设置边框图片的宽度为默认值。
• inherit：从父元素继承边框图片的宽度。
• revert：将边框图片的宽度设置为默认值，但是允许在后代元素中继承。

提示： border-image-width 属性可以和 border-image-source、border-image-slice、border-image-outset 一起使用，它们组合在一起可以设置完整的边框图像。

示例

.border {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 60px;
  border-image-outset: 10px;
}

以上代码片段会将图像 border.png 设置为元素的边框图像，并设置其宽度为 60px，从边框边缘开始向内偏移 10px。

兼容性

border-image-width 属性的兼容性非常良好，在主流浏览器中都支持该属性。但是在 IE 浏览器中对该属性的支持存在一些问题。

总结

CSS的 border-image-width 属性是设置边框图像宽度的属性，在元素的边框中使用多个属性可以创建引人注目的效果。该属性的同时使用还有 border-image-source、border-image-slice、border-image-outset 等属性。它们组合使用可以制作更为复杂的边框效果。