Rounded Corners trên DIV với màu nền

Question

Tôi đã có một số mã trông như thế này:

<div id="shell"> 
    <div id="title">TITLE HERE</div> 
    <div id="content">Article Content Goes Here</div> 
</div> 

Các div vỏ có một đường viền màu xám mà tôi muốn góc tròn trên. Vấn đề tôi đang gặp phải là div tiêu đề có nền màu xanh lá cây và chồng chéo các góc tròn của vỏ. Nó có thể chồng lên nhau hoặc không nhô ra khỏi các cạnh để cung cấp một cái nhìn chất lỏng.

Tôi đang tìm một giải pháp tương thích ngược với IE 7 và 8, nhưng nếu có giải pháp trong HTML5 thì đơn giản là tôi sẵn sàng mất các trình duyệt đó.

Cảm ơn!

Answer 1

Trong đánh dấu của bạn, bạn phải từ bỏ border-radius cho cả #shell và #title để các #title 'góc nhọn s không chồng chéo #shell' s.

Một ví dụ sống, http://jsfiddle.net/BXSJe/4/

#shell { 
width: 500px; 
height: 300px; 
background: lightGrey; 
-moz-border-radius: 6px; 
border-radius: 6px; /* standards-compliant: (IE) */ 
} 

#title { 
background: green; 
padding: 5px; 
-moz-border-radius: 6px 6px 0 0; 
border-radius: 6px 6px 0 0; /* standards-compliant: (IE) */ 
} 

Answer 2

Internet Explorer không hỗ trợ bán kính đường viền cho đến IE9, nhiều đến sự thất vọng của nhà phát triển và nhà thiết kế. Với IE9, những bước quan trọng đang sử dụng thẻ META cạnh và cung cấp bán kính biên giới:

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<style> 
border-top-right-radius: 7px; 
border-top-left-radius: 7px; 
border-bottom-right-radius: 2px; 
border-bottom-left-radius: 2px; 
</style> 

Nguồn - http://davidwalsh.name/css-rounded-corners

Tôi muốn sử dụng hình ảnh, nhưng IE có thể làm tan thành mây khói. Microsoft nên đẩy mạnh trò chơi và hỗ trợ CSS3.

Answer 3

Bạn có thể sử dụng PIE với IE7 và 8. Nó cho phép một số chức năng CSS3 trong IE7 và IE8. Và có, tôi biết, nó không phải là một trình duyệt, đó là một nỗi đau. Có thể là một lời nguyền.

Bạn có thể kiểm tra xem here.

Answer 4

Có thể bạn sẽ muốn làm tròn chỉ là hai góc trên cùng của div tiêu đề với bán kính giống như div vỏ để họ không chồng chéo. Các CSS3 bạn sẽ sử dụng là:

border-top-left-radius: XXpx 
border-top-right-radius: XXpx 

Đối với khả năng tương thích ngược với các trình duyệt Mozilla cũ bạn cũng nên sử dụng:

-moz-border-radius-topleft: XXpx 
-moz-border-radius-topright: XXpx 

Và đối với các phiên bản cũ của trình duyệt WebKit (Safari, chủ yếu), bạn có thể sử dụng:

-webkit-border-top-left-radius: XXpx 
-webkit-border-top-right-radius: XXpx 

Tuy nhiên, bạn không thể làm gì với trình duyệt Internet Explorer cũ như tôi biết, ngoại trừ sử dụng hình ảnh.

Answer 5

Một cách khác để thực hiện điều này là để thiết lập các div bên ngoài để có một tràn để ẩn

#shell { 
width:500px; 
height:300px; 
background:lightGrey; 
border-radius: 10px 10px 10px 10px; 
overflow:hidden; 
} 
#title { 
background:green; 
padding:5px; 
} 

http://jsfiddle.net/jdaines/NaxuK/