圆角框不工作 CSS答案

【问题标题】：Rounded Box not working CSS圆角框不工作 CSS
【发布时间】：2015-10-06 05:46:36
【问题描述】：

我尝试对我创建的这个 div 框进行圆角处理，但它不起作用。在 Chrome、IE、Firefox 上对此进行了测试，但不行。我对 CSS 和 DIV 不太熟悉。所以如果你能看到我的问题，请帮助我。

代码 CSS：

.side-nav-menu{
  width: 100%;
  border-radius: 10px;
}
.side-nav-menu h1{
  font-size: 1.1em;
  font-weight:bold;
  color: white;
  background: #3F5671;
  margin-bottom: 0;
  padding: 7px 0 7px 7px;
}

.side-nav-menu ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid #c0c0c0;
  border-right: 1px solid #c0c0c0;
  margin-bottom: 0;
}

.side-nav-menu ul li{
  padding-bottom: 0px;
  border-bottom: 1px solid #c0c0c0;/
}

.side-nav-menu ul li a{
  font-size: normal 1.1em;
  font-weight:bold;
  color: #777777;
  background: #ffffff;
  display: block;
  padding: 5px 0;
  line-height: 17px;
  padding-left: 7px;
  text-decoration: none;
}
.side-nav-menu ul li a:hover{
  color: #777777;
  background: #F7F7F7;
}

HTML

<div class="side-nav-menu">
  <h1>Sub-Categories</h1>
  <ul>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=18&amp;Itemid=101">Air Sampling Pumps</a></li>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=14&amp;Itemid=101">Dust Monitors</a></li>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=16&amp;Itemid=101">Flame Ionization Detectors</a></li>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=17&amp;Itemid=101">Photoionization Detectors</a></li>
    <li><a href="index.php?option=com_content&amp;view=category&amp;id=19&amp;Itemid=101">Ventilation Blower</a></li>
  </ul>
</div>

https://jsfiddle.net/pssz0xv0/

【问题讨论】：

建议以获得更好的答案。不要显示所有代码。只显示相关部分。它会给你带来很多更好的答案。
谢谢你的建议，下次我会记住的。
您希望它是什么样的？你有一个border-radius，它的位置很糟糕。

标签： html css rounded-corners

【解决方案1】：

子元素不会从其父元素继承圆角。您必须对顶部元素“h1”和底部元素（最后一个“a”）应用边框半径。

https://jsfiddle.net/pssz0xv0/5/

.side-nav-menu h1{
  border-radius:10px 10px 0 0;
}
.side-nav-menu ul li:last-child a{
  border-radius: 0 0 10px 10px;
}

【讨论】：

效果很好，谢谢。这里还有另一个答案也很有效。所以很难选择哪一个。我选了你的，因为它是第一个。

【解决方案2】：

border-radius: 10px

开启.side-nav-menu ?

【讨论】：

添加供应商前缀以获得更好的支持。
我忘了放其余的代码，我已经有了边界半径，但没有变化。我会更新代码。

【解决方案3】：

.side-nav-menu{
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.side-nav-menu h1{
    font-size: 1.1em;
    font-weight:bold;
    color: white;
    background: #3F5671;
    //margin-bottom: 0;
    margin: 0;
    padding: 7px 0 7px 7px;
}

https://jsfiddle.net/alireza_safian/pssz0xv0/9/

【讨论】：

这行得通，溢出：隐藏在做什么？你的代码和partypete25 发布的哪个更好？
@RealPetChicken 因为子元素覆盖了圆角框，所以没有出现border-radius。 partypete25 正在尝试舍入第一个孩子（border-radius：10px 10px 0 0；左上角，右上角）和最后一个孩子（border-radius：0 0 10px 10px；左下角，右下角）。