用一些像素从左右推动边框底部

Question

我想知道，是否可以给 border-bottom 类似 padding-left 和 padding-right 的东西。我有两个 div，它们有一些边框。我想让顶部 div 的 border-bottom 左右各有一些 padding。我不知道这是否可能。我知道结构很奇怪（我可以轻松地使用整个盒子包装器周围的边框，而不是使用 border-bottom 来实现这一点）。问题是，我使用的插件具有这样的结构，我必须像这样自定义它，因为正是这种结构和样式。希望它足够清楚。这里有一张图片应该是什么样子和一个示例片段：

.box {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.box__top {
  border: 1px solid black;
  border-bottom: 1px solid red;
  height: 20px;
  padding: 10px;
  text-align: center;
}

.box__bottom {
  border: 1px solid black;
  border-top: none;
  height: 150px;
  padding: 10px;
  text-align: center;
}

<div class="box">
  <div class="box__top">
    <span>I'm the top section</span>
  </div>
  <div class="box__bottom">
    <span>I'm the top section</span>
  </div>
</div>

Answer 1

改用伪元素：

.box {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.box__top {
  border: 1px solid black;
  border-bottom: none;
  position: relative;
  height: 20px;
  padding: 10px;
  text-align: center;
}

.box__top::after {
  content: " ";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 90%;
  height: 1px;
  background-color: red;
}

.box__bottom {
  border: 1px solid black;
  border-top: none;
  height: 150px;
  padding: 10px;
  text-align: center;
}

<div class="box">
  <div class="box__top">
    <span>I'm the top section</span>
  </div>
  <div class="box__bottom">
    <span>I'm the top section</span>
  </div>
</div>

用一些像素从左右推动边框底部

Push border-bottom from left and right with some pixels

html

css

border