css - 具有背景颜色的 DIV 上的圆 Angular

Question

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

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

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

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

谢谢!

Answer 1

在您的标记中，您必须为 #shell 和 #title 提供 border-radius，以便 #title 清晰 Angular 不与 #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>