DIV上的圆角与背景颜色

Question

我有一些看起来像这样的代码:

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

shell div有一个灰色边框,我想要圆角.我遇到的问题是标题div有一个绿色背景,它重叠了shell的圆角.它要么重叠,要么不突出于边缘以提供流畅的外观.

我正在寻找一个向后兼容IE 7和8的解决方案,但如果在HTML5中有一个简单的解决方案我会愿意丢失那些浏览器.

谢谢!

Answer 1

在你的标记中,你必须给两个边界半径#shell,#title以便#title尖角不重叠#shell.

一个现实的例子,http://jsfiddle.net/BXSJe/4/

#shell {
 width: 500px;
 height: 300px;
 background: lightGrey;
 border-radius: 6px;
}

#title {
 background: green;
 padding: 5px;
 border-radius: 6px 6px 0 0;
}

Answer 2

另一种方法是将外部div设置为隐藏溢出

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