1

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

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>

4

2 回答 2

2

你很困惑为什么没有border-radius被应用到你添加的左上角和右上角区域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>

于 2019-04-17T12:01:26.177 回答
0

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

我希望这有助于解释这里发生了什么

于 2019-04-17T12:01:22.967 回答