孩子元素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

剛需距設置http://jsfiddle.net/jalbertbowdenii/83Xrs/2/

Answer 2

只有這樣，才能實現你的願望純CSS是添加border-radius兩個div。

#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/

Answer 3

就足夠了添加overflow:hidden您#outer元素。

Answer 4

添加「overflow：hidden;」到外部div將解決您的問題。乾杯。