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 pt-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 pt-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>

希望这有帮助，干杯。