Các phần tử con clip màu bg cho bố mẹ border-radius

Question

Bất cứ ai biết cách chắc chắn để buộc các phần tử con ở trong bán kính biên giới của cha mẹ?

Đây là một mẫu js fiddle Tôi đang làm việc với: http://jsfiddle.net/fuego/qCNRZ/

Markup:

<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; 
} 

tôi chỉ đơn giản muốn các container để xuất hiện màu xanh bây giờ, nhưng với các bậc cha mẹ làm tròn cạnh. Tôi cập nhật fiddle để phản ánh.

Answer 1

lề chỉ cần thiết lập http://jsfiddle.net/jalbertbowdenii/83Xrs/2/

Answer 2

Cách duy nhất để đạt được những gì bạn muốn với css tinh khiết là thêm border-radius cho cả div.

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

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

Demo:http://jsfiddle.net/tZ8AL/1/

Answer 3

Dựa trên ví dụ của bạn nó sẽ đủ để thêm overflow:hidden đến yếu tố #outer của bạn.

Answer 4

Thêm "overflow: hidden;" để div bên ngoài sẽ giải quyết vấn đề của bạn. Chúc mừng.