具有背景颜色的 DIV 上的圆角

Question

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

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

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

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

谢谢！

原文由 Dexter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

In your markup, you have to give border-radius to both #shell and #title so that the #title ’s sharp corners don’t overlap #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;
}

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

原文由 Mridul Kashatria 发布，翻译遵循 CC BY-SA 4.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/

原文由 obiyoda 发布，翻译遵循 CC BY-SA 3.0 许可协议