CSS border-width 属性

CSS 的 border-width 属性用于定义一个 HTML 元素的边框宽度，它可以为元素的每条边（上、右、下、左）设置不同的边框宽度，或者使用一个值为所有边框设置相同的边框宽度。

语法

border-width: value;

value 可以是以下几种值之一：

• 一个数字，例如 5px，表示该元素的所有边框均为这个宽度。
• 四个数字，例如 5px 10px 5px 10px，表示元素的上右下左四个边框的宽度分别为 5px 10px 5px 10px，以顺时针方向依次对应。
• 三个数字，例如 5px 10px 5px，表示上下两个边框的宽度为第一个数字，左右两个边框的宽度为第二个数字。
• 两个数字，例如 5px 10px，表示上下两个边框的宽度为第一个数字，左右两个边框的宽度为第二个数字。
• 一个关键字，例如 thin，表示使用内置的宽度。
• inherit，表示从父元素继承边框宽度。

实例

.border {
  border-width: 5px;
}

.border-top {
  border-top-width: 10px;
}

.border-right {
  border-right-width: 15px;
}

.border-bottom {
  border-bottom-width: 20px;
}

.border-left {
  border-left-width: 25px;
}

.border-all {
  border-width: 5px 10px 15px 20px;
}

.border-vertical {
  border-width: 5px 0;
}

.border-horizontal {
  border-width: 0 10px;
}

.border-thin {
  border-width: thin;
}

.border-inherit {
  border-width: inherit;
}

默认值

如果未设置 border-width 属性，其默认值为 medium，具体宽度取决于浏览器。

注意事项

• border-width 属性只能用于实线边框。
• 如果边框宽度为 0，应使用 border: none; 或 border-width: 0; 而非 border-width: 0px;。
• 除非需要针对每条边单独设置不同宽度的边框，否则应使用 border-width 快捷属性而非 border-top-width、border-right-width、border-bottom-width 和 border-left-width 单独设置每条边框的宽度。

总结

CSS 的 border-width 属性可用于设置 HTML 元素的边框宽度，通过简单设置一个值或多个值来定义每条边框的宽度。在实践中，我们可以根据实际需要使用此属性来美化网页并进行排版。