Biên giới bán kính không ảnh hưởng đến các yếu tố bên trong

Question

Tôi có bố cục nơi tất cả nội dung trang nằm trong một hộp có các góc tròn. Điều này bao gồm tiêu đề của trang, v.v. Tôi có phần tử div chứa nội dung tiêu đề, div chứa nội dung chính của trang và div có chứa chân trang. Vấn đề của tôi là: Vì biên giới của "tiêu đề" của tôi div không được làm tròn, "vùng chứa" lớn div dường như không được làm tròn ở trên cùng. Tôi đã điều tra và chỉ ra rằng đây chỉ đơn giản là tiêu đề "div tự chồng lên" vùng chứa "div. Tôi có một ví dụ ở đây: http://jsfiddle.net/V98h7/.

Tôi đã thử làm tròn đường viền của "tiêu đề" div ở cùng một mức độ, nhưng điều này tạo ra một khiếm khuyết nhỏ trên biên giới (nó có viền của riêng nó, màu nền của tiêu đề "div) . Trong tuyệt vọng, tôi cũng đã thử đặt chỉ mục z của vùng chứa thành một số lớn. Điều đó không làm gì cả.

Tôi cảm thấy rằng cần có một giải pháp đơn giản cho vấn đề này. Tôi không muốn sửa javascript. Tôi thích CSS hơn, nhưng LESS cũng ổn.

Answer 1

Đây là fiddle - http://jsfiddle.net/ashwyn/V98h7/2/

Add -

#outer { 
    overflow:hidden 
} 

và nó sẽ làm việc.

Answer 2

đây là bản cập nhật jsfiddle

http://jsfiddle.net/V98h7/1/

Để chỉ góc biên giới vòng border-radius có thể mất 4 giá trị TOP-LEFT RADIUSTOP-RIGHT RADIUSBOTTOM-RIGHT RADIUSBOTTOM-LEFT-RADIUS

nên border-radius: 20px 20px 0 0; sẽ tròn div bên trong của bạn từ đầu. Hãy nhớ sử dụng cùng một giá trị bán kính như giá trị của div cha, nếu không bạn sẽ thấy một số đường viền phụ.

Answer 3

Hãy thử cho div chứa một bán kính đường viền lớn hơn một chút (trên hai góc trên cùng) so với div tiêu đề.

Answer 4

Sử dụng này:

#outer { overflow: hidden; } 

hay này:

#inner1 { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
} 

Hoặc bạn có lẽ có thể thử này:

#outer div:first { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
} 

(Lưu ý: Tôi đã không kiểm tra tùy chọn cuối cùng trên).