停止孩子的背景填充父母的圆角答案

【问题标题】：Stop child's background filling in rounded corners of parent停止孩子的背景填充父母的圆角
【发布时间】：2015-02-03 10:08:41
【问题描述】：

我有一个带圆角且没有填充的父 div。父 div 可以包含不同的子 div，每个子 div 都有背景颜色。

默认情况下，孩子的背景颜色延伸到角落，不受父母圆角的限制。我需要背景颜色不要“切断”圆角。

我还需要将内容绝对定位在父 div 之外的子 div 中。出于这个原因，我不能只将溢出设置为隐藏到父 div。

http://codepen.io/anon/pen/ogGoMr

<div class="one">
  <div class="two">
    Text
  </div>

</div>

.one {
  border: 1px solid grey;
  border-radius: 10px;
}
.two {
  background: blue;
}

【问题讨论】：

只给孩子border-radius: 10px; 让它匹配父母？
如果需要，我可以使用此解决方案，但它会使我的 CSS 不太干净。
如果不使用overflow: hidden;，我看不到其他方法（可能有）。
使用额外的border-radius 不会让你的CSS变脏。您可以组合两个选择器以使用相同的border-radius 规则。

标签： css

【解决方案1】：

如果您希望在父 div 中有更多不“切断”圆角的 div，您可以设置：

.one > div:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.one > div:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

CodePen

【讨论】：

【解决方案2】：

我提供了两种方法来做到这一点：

1.将border-radius添加到chaild div：

.two {
    border-radius:10px;
}

2.使用 Padding 到父 div 并将背景添加到父级：

参见示例：

.one {
    border: 1px solid #808080;
    border-radius: 10px;
    padding:0 10px;

    background: blue;
}
.two {
  background: blue;
}

<div class="one">
  <div class="two">
    Text
  </div>
</div>

【讨论】：