子元素的背景颜色被裁剪到父元素的边框半径

Question

有人知道一种可靠的方法来强制子元素保留在其父级元素的边框半径内吗？

这是我正在使用的 jsfiddle 示例： http://jsfiddle.net/fuego/qCNRZ/

标记：

<div id="outer">
    <div id="inner">
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
    </div>
</div>

CSS：

#outer {
    width: 300px;
    background: red;
    border-radius:20px;

}

#inner {
    background:blue;
}

我希望容器现在呈现蓝色，但具有父元素的圆角。我已更新样例以反映这一点。

- Fuego DeBassi

---

我认为你需要发布一个你想要的图表。 - Diodeus - James MacFarlane

当然可以：http://cl.ly/463s090Q412P1u0t2s0t 唯一设置border-radius的地方是在外部，内部只是紧密地适应其中。我不想要明确设置额外的border radius来匹配内部。它会被剪裁！ - Fuego DeBassi

不，那是副作用。我想让内部裁剪到外部的边框半径。 - Fuego DeBassi

Answer 1

根据您的示例，只需将overflow:hidden添加到#outer元素即可。

- Daan Mortier

---

这是正确答案。如果没有这个属性，父元素的边框半径默认不应该裁剪其子元素的内容：https://dev59.com/Q2oy5IYBdhLWcg3wZtJC#8582304 - BoltClock

Answer 2

只有使用纯CSS实现您想要的效果的唯一方法是为两个div添加border-radius。

#outer {
    width: 300px;
    background: red;
    border-radius:20px;
    height:400px;
}

#inner {
    background:blue;
    border-radius:20px 20px 0 0;
    padding-left:10px;
}

演示：http://jsfiddle.net/tZ8AL/1/

- Sotiris

Answer 3

将"overflow: hidden;"添加到外部div中即可解决您的问题。干杯。

- Griffin

Answer 4

只需要设置边距 http://jsfiddle.net/jalbertbowdenii/83Xrs/2/

- albert