CSS3 border-image-width 属性

概述

CSS3 border-image-width 属性定义了一个元素边框的宽度，用于配合 border-image-source 属性来渲染图像边框。此属性的默认值为1，它可以像其它CSS属性一样定义为像素、百分比、长度单位等。

语法

border-image-width: 1|2|3|4|5|6|7|8|9|10|.../* <length> | <percentage> | <number> | auto | initial | inherit */;

属性值

• <length>： 可以是固定长度，例如 10px，也可以使用 em，ex 等单位。
• <percentage>： 可以是元素宽度或高度的百分比值。
• auto： 使用图片原始大小作为边框宽度。
• <number>: 该数值将乘以 border-width 以确定插入到哪些边缘的偏移量。它们使您能够让图片的设置与实际边框挂钩。
• initial： 声明应该采用默认值。
• inherit： 从父元素继承此属性的值。

示例

border-image-source: url(border-image.png);
border-image-width: 10px 20px 30px 40px;

上述代码将会显示一个带有图像边框（border-image）的元素，所有的边框都像表现为一条宽度为10像素、20像素、30像素和40像素的线条。如果将某个属性值定义为 “auto”，则形状和大小会根据源图片来自动调整。

注意事项

• border-image-width 属性不能在使用 border-style 为 none 的元素上使用，也不能用于 outline。
• 当定义为百分比时，将基于包含块的宽度进行计算。
• 当使用 number 定义，则必须设置 border-width 属性。

浏览器兼容性

• Internet Explorer 11：支持该属性。
• Microsoft Edge：支持该属性。
• Firefox：支持该属性。
• Chrome：支持该属性。
• Safari：支持该属性。
• Opera：支持该属性。

总结

border-image-width 属性与CSS3中的其他属性密切相关，一般情况下需要搭配 border-image-source 属性使用。通过其精细的属性值定义，我们可以创建出非常优美、高可用、样式良好的网页边框。在Web应用程序中，良好的设计总是令人注目和令人欣赏的。因此，优秀的定义 border-image-width 的技巧是开发者需要有的基本技能之一。