Div不应用border-radius属性

Question

我有一个<div>标记，我需要在该标记上应用底边框和边框半径，但是它不起作用。

.part2 {
  border-bottom-left-radius: 50% 10%;
  border-bottom-right-radius: 50% 10%;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 0px;
  padding-bottom: 60px;
  background-color: #fafafa;
}

.part3 {
  background-color: #EFEFEF;
  border-color: pink;
  border-style: solid;
  border-bottom-left-radius: 50% 10%;
  border-bottom-right-radius: 50% 10%;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 0px;
  padding-bottom: 100px;
}

<div class="part2 col-md-12 col-lg-12">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class="part3 col-md-12 col-lg-12 p-t-40">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class="part4 col-md-12 col-lg-12">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

所以基本上它像这样显示：

所以我的问题是： 我的网站上有一个页面，其中包含许多<div>。每个div都是.part1，.part2等类。我需要每个.partX div的边框都具有弯曲的边框底部。它适用于标头，适用于.part4，但不适用于.part3。那是个谜，我正在努力解决。我需要使div.part3的边界弯曲，所以我使用的是边界半径，但它根本不起作用。为什么？

以上是我使用的CSS代码的结果。如您所见，边框是笔直的，我需要将其弯曲。

Answer 1

我只能假设样式继承树后面还有一些不好的做法。没有看到更多的布局要检查，很难说出为什么一个可行而另一个不可行，但是我敢打赌，如果您在开发人员控制台中检查了它们并注意了样式类的创建顺序，那么您会发现罪魁祸首。

但是，大多数可以合并；

.part2, .part3, .part4 {
  border-width: 0; /* Not 0px */
  border-bottom-left-radius: 50% 10%;
  border-bottom-right-radius: 50% 10%;
}

.part2 {
  padding-bottom: 60px;
  background-color: lightblue;
}

.part3 {
  background-color: #EFEFEF;
  border: pink 5px solid;
  padding-bottom: 100px;
}

.part4 {
  padding-bottom: 60px;
  background-color: #0f0;
  border: orange 5px solid;
}

<div class="part2 col-md-12 col-lg-12">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class="part3 col-md-12 col-lg-12 p-t-40">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class="part4 col-md-12 col-lg-12">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

希望这会有所帮助，欢呼起来。