边框底部较小的 div - CSS

当我们需要为一个 div 元素添加底部的边框时，通常使用 CSS 属性 border-bottom 来实现。然而，如果我们需要底部边框的高度小于其它边框的高度，那么该怎么办呢？这里提供两种方法来解决这个问题。

方法一：使用 box-shadow

我们可以使用 box-shadow 属性来模拟边框，并通过调整 box-shadow 的距离和大小来控制不同边框的高度，从而实现底部边框较小的效果。

div {
  box-shadow: 0 1px 0 0 red, 0 -2px 0 0 green;
}

在上面的代码中，我们定义了两个 box-shadow，一个红色的在上方，一个绿色的在下方。它们的大小、距离和颜色都可以根据需要进行调整。

方法二：使用伪元素

另一种方法是通过创建两个伪元素来模拟底部边框。我们可以使用 :before 和 :after 伪元素来创建一个梯形形状的底部边框，并通过 transform 属性来调整其位置和大小。

div {
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 50%;
  height: 5px;
}

div:before {
  left: 0;
  border-bottom: 10px solid red;
  transform: skew(45deg);
}

div:after {
  right: 0;
  border-bottom: 10px solid blue;
  transform: skew(-45deg);
}

在上面的代码中，我们先将 div 元素设置为相对定位（position: relative），然后创建两个伪元素，并将它们的位置设置在 div 元素的底部（bottom: -5px）。为了创建一个梯形形状的边框，我们使用了 transform: skew(angle) 属性，将伪元素进行了斜切。由于边框的高度被分成了两部分，我们需要将其高度除以 2，分别设置在 border-bottom 和 height 属性中。

以上是两种实现底部边框较小的方法，根据具体的情况和需要，我们可以选择其中一种或两种方法结合使用。