Question

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

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

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

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

</div>

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

Answer 1

我提供了两种方法：

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

.two {
    border-radius:10px;
}

2 。使用填充到父div并将相同的背景添加到父级：

参见示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果你想在父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 个答案: