parent-child - 子元素 bg 颜色剪辑到父 border-radius

Question

有谁知道强制子元素留在其父元素的边界半径内的万无一失的方法？

这是我正在使用的 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;
}

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

Answer 1

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