子元素bg颜色剪辑到父母边界半径

Question

任何人都知道一种迫切的方式迫使儿童元素留在他们父母的边界半径？

这是我正在使用的js小提琴样本: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;
}

我只是希望容器现在看起来是蓝色的,但是父母用圆角边缘.我更新了小提琴以反映.

Answer 1

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

Answer 2

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