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/

Answer 3

您可能希望仅使用与div div相同的半径来舍入标题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浏览器做任何事情。

Answer 4

Internet Explorer在IE9之前不支持border-radius，这让开发人员和设计人员感到非常沮丧。对于IE9，重要的步骤是使用边缘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。

Answer 5

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

您可以查看here。

DIV上的圆角与背景颜色

5 个答案: