Padding 不允许伪元素创建 border-bottom

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

这是有意为之的行为。您的元素的形状非常像分层的洋葱。从外面开始是边距 - 边框 - 填充。由于边框围绕填充，填充将边框推出。这意味着您在元素中创建了一个内部正方形（仅由填充组成）。这会导致这样的效果，即您的边框底部到顶部（它接触内部正方形的地方）是平的并且没有圆形边框。

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

Answer 2

你很困惑 为什么 border-radius 没有应用到左上角和右上角区域 whey 你添加 padding:

它甚至在您添加 padding 时也有效 - 尝试向 ::after 元素添加背景，您就会明白为什么（提示：您只已定义 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 */
}

<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 不允许伪元素创建 border-bottom

Padding doesn't allow pseudo elements to create border-bottom

html

css

box-sizing