带有背景颜色的DIVs上的圆角
带有背景颜色的DIVs上的圆角
提问于 2011-06-26 23:25:11
我有一些代码，看起来像这样：
<div id="shell">
<div id="title">TITLE HERE</div>
<div id="content">Article Content Goes Here</div>
</div>shell div有一个灰色边框，我希望它有圆角。我遇到的问题是，标题div的背景是绿色的，并且它与shell的圆角重叠。它要么重叠，要么不靠边缘突出，以提供流畅的外观。
我正在寻找一种向后兼容IE7和IE8的解决方案，但如果在HTML5中有一个简单的解决方案，我愿意放弃这些浏览器。
谢谢!
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-06-26 23:33:47
在您的标记中，您必须为#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;
}Stack Overflow用户
发布于 2012-12-01 01:13:54
完成此操作的另一种方法是将外部div设置为隐藏溢出
#shell {
width:500px;
height:300px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
overflow:hidden;
}
#title {
background:green;
padding:5px;
}Stack Overflow用户
发布于 2011-06-26 23:33:52
您可能希望仅对标题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浏览器也无能为力。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6484820
复制相关文章
相似问题