带背景颜色的DIV元素如何实现圆角？

Question

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

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

我想给 shell div 添加圆角边框，但是问题在于 title div 具有绿色背景，并且它与 shell div 的圆角部分重叠了。要么重叠，要么不接触边缘以提供流畅的外观。

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

谢谢！

- Dexter

Answer 1

在你的标记中，你需要给#shell和#title两个元素都添加border-radius属性，这样#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;
}

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

- Mridul Kashatria

---

这个例子有问题。在这个 jsfiddle 中，例子中的圆角是无效的。 - ifconfig

Answer 2

另一种实现这个的方法是将外部 div 设置为 overflow:hidden

#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

Answer 3

您可能想要将标题 div 的顶部两个角与 shell div 相同半径的圆角对齐，以避免它们重叠。您需要使用的 CSS3 代码如下：

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

为了与旧版Mozilla浏览器保持向后兼容性，您还应该使用以下内容：

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

对于旧版本的WebKit浏览器（主要是Safari），您可以使用以下代码：

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

然而，据我所知在旧版本的Internet Explorer浏览器中你无法做任何事情，除了使用图片。

- EdoDodo

Answer 4

直到IE9之前，Internet Explorer并不支持border-radius，这让开发者和设计师们感到非常沮丧。但是在IE9中，你可以通过使用edge META标签并提供边框半径来解决这个问题：

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

来源 - http://davidwalsh.name/css-rounded-corners

我更愿意使用图片，但IE可能会崩溃。微软应该加强开发，支持CSS3。

- Michael Schwartz

Answer 5

你可以在IE7和8中使用PIE。它使得IE7和IE8支持一些CSS3功能。是的，我知道，它不是一个浏览器，而是一个痛苦。也许是个诅咒。

你可以在这里查看它。

- planestepper