填充不允许伪元素创建底部边框

Question

我尝试使用伪元素为h2元素创建边框底部半径。 但是当我应用填充时，border-bottom-radius的左上角和右上角没有被反映。但是，如果我应用保证金，则会有所体现。我不明白为什么会这样

h2:after {
  content: "";
  width: 10%;
  border-bottom: 10px solid rgb(255, 0, 0);
  border-radius: 5px 5px 5px 5px;
  display: block;
   padding-top: 5%;/* ---- top-left and top-right of border were not generated properly */
  /*margin-top: 5%; -------this works perfectly*/
}

<div class="main_wrapper">
  <h1>Interior Design</h1>
  <div id="showcase">
    <h2>Showcase</h2>
    <div class="category_wrapper">
      <div class="row">
        <div class="img-width col-md-6">
          <img src="img/atrium.jpg" alt="">
        </div>
        <div class="img-width col-md-6">
          <img src="img/kitchenconcrete.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您很困惑为什么 border-radius没有应用到您添加padding的左上方和右上方区域：

即使您添加padding，它也可以正常工作-尝试向::after元素添加背景，您将了解为什么（提示：您仅定义了{{1 }}）：

bottom-border

h2:after {
  content: "";
  width: 10%;
  border-bottom: 10px solid rgb(255, 0, 0);
  border-radius: 5px 5px 5px 5px;
  display: block;
  padding-top: 5%;
  margin-top: 5%;
  background: cadetblue;
}

如果您希望它与<div class="main_wrapper"> <h1>Interior Design</h1> <div id="showcase"> <h2>Showcase</h2> <div class="category_wrapper"> <div class="row"> <div class="img-width col-md-6"> <img src="https://via.placeholder.com/100" alt=""> </div> <div class="img-width col-md-6"> <img src="https://via.placeholder.com/100" alt=""> </div> </div> </div> </div> </div>一起使用，只需在所有侧添加背景和边框-参见下面的演示：

padding

h2:after {
  content: "";
  width: 10%;
  border: 1px solid rgb(255, 0, 0); /* border on all sides */
  border-radius: 5px 5px 5px 5px;
  display: block;
  padding-top: 5%;
  margin-top: 5%;
  background: red; /* background with same color */
}

Answer 2

这是预期的行为。您的元素几乎像洋葱一样分层。从外部开始，其边距-边框-填充。当边框围绕填充物时，填充物将边框推出。这意味着您将在元素中创建一个内部正方形（仅由填充组成）。这样就产生了这样的效果，即边框的底部平坦到顶部（接触内部正方形），并且没有圆形的边框。

我希望这有助于解释这里发生的事情