CSS border-width 属性使用教程

CSS的border-width属性用于设置元素边框的宽度。它可以单独设置一个方向的边框宽度，也可以一次性设置四个方向的边框宽度。

基础语法

border-width: thin | medium | thick | length | initial | inherit;

• thin：设置边框宽度为1像素。
• medium：设置默认边框宽度。
• thick：设置边框宽度为3像素。
• length：指定具体的边框宽度值，如：1px，2rem等。
• initial：将边框宽度设置回默认值。
• inherit：从父元素继承边框宽度值。

可以使用以下四个值之一来设置每个边框的宽度（顺序为上、右、下、左）：

border-width: 1px 2px 3px 4px;

或者，以下两个值之一可以重复四次，以设置每个边框的宽度：

border-width: 1px 2px;
border-width: 1px;

以上是CSS border-width属性的基础语法。

应用示例

示例1：设置单一边框宽度

下面的代码设置了一个class名为border-demo-1的DIV元素，它具有1像素的黑色实线边框：

.border-demo-1{
  border: 1px solid black;
}

示例2：设置不同边框宽度

下面的代码设置了一个class名为border-demo-2的DIV元素，它具有不同的边框宽度：

.border-demo-2{
  border-top-width: 1px;
  border-right-width: 2px;
  border-bottom-width: 3px;
  border-left-width: 4px;
  border-style: solid;
  border-color: black;
}

以上是两个示例展示了CSS border-width属性的应用。

总之，CSS border-width是设置边框宽度非常方便的CSS属性之一，我们可以根据需要设置单一边框或者四边不同边框，在设计中应用广泛。