parent-child - 子元素bg的颜色剪辑到 parent 的边界半径

有人知道一种确保 child 元素留在 parent 边界半径内的肯定方法吗？

这是我正在使用的js fiddle 示例:
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;
}

我只是希望容器现在显示为蓝色，但是 parent 的边缘是圆的。我更新了 fiddle 以进行反射(reflection)。

最佳答案

根据您的示例，将overflow:hidden添加到#outer元素就足够了。