如何在 CSS 中设置底部边框的宽度？

在 CSS 中，可以使用 border-bottom 属性来设置元素的底部边框。这个属性可以设置边框的宽度、样式和颜色，但是如果只想单独设置底部边框的宽度，该如何操作呢？

下面有三种方法可以实现这个效果：

1. 使用 border-bottom-width 属性

border-bottom-width 属性可以单独设置底部边框的宽度，如下所示：

.border-bottom {
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

在这个例子中，我们设置了一个类名 .border-bottom，并为其中的元素设置了一个 2 像素宽的底部边框。注意，我们还使用了 border-bottom-style 属性来指定边框的样式，这是因为 border-bottom-width 属性必须和 border-bottom-style 属性一起使用才能生效。

2. 使用 border 缩写属性

border 是一个缩写属性，它可以一次性设置四个边框的宽度、样式和颜色。如果我们只想设置底部边框的宽度，可以按照以下格式设置：

.border-bottom {
  border: none;
  border-bottom: 2px solid black;
}

在这个例子中，我们首先将所有边框的样式设置为 none，然后单独为底部边框设置了一个 2 像素宽的实线边框。

3. 使用 box-shadow 属性

虽然 box-shadow 属性是用来设置阴影效果的，但是它也可以用来创建一个单独的宽度为 1 像素的底部边框。代码如下：

.border-bottom {
  box-shadow: 0 1px 0 0 black;
}

在这个例子中，我们设置了一个水平偏移量为 0、垂直偏移量为 1 个像素，模糊半径为 0，颜色为黑色的阴影效果。由于偏移量只有一个像素，因此这个阴影效果看起来就像是一个单独的、宽度为 1 像素的底部边框。

以上就是三种设置底部边框宽度的方法，根据实际情况选择其中一种即可。