时间戳

首页 > 解决方案 > Div 不应用border-radius 属性

html - Div 不应用border-radius 属性

问题描述

我有一个<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>

所以基本上它是这样显示的：

第 2 部分的边框

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

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

标签： htmlcssborder

解决方案

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

但是，其中大部分可以合并；

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

希望这会有所帮助，干杯。

推荐阅读