Html 带有背景颜色的 DIV 上的圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6484820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded Corners on DIVs with Background Color
提问by Dexter
I've got some code that looks like this:
我有一些看起来像这样的代码：
<div id="shell">
<div id="title">TITLE HERE</div>
<div id="content">Article Content Goes Here</div>
</div>
The shell div has a grey border that I want rounded corners on. The problem I'm running into is the title div has a green background and it's overlapping the rounded corners of the shell. It either overlaps or doesn't jut up against the edges to provide a fluid look.
外壳 div 有一个灰色边框，我想要圆角。我遇到的问题是标题 div 有绿色背景，它与外壳的圆角重叠。它要么重叠，要么不突出边缘以提供流畅的外观。
I'm looking for a solution that's backwards compatible with IE 7 and 8, but if there's a solution in HTML5 that's simple I would be willing to lose those browsers.
我正在寻找一种向后兼容 IE 7 和 8 的解决方案，但如果 HTML5 中有一个简单的解决方案，我愿意放弃这些浏览器。
Thanks!
谢谢！
回答by Mridul Kashatria
In your markup, you have to give border-radius to both #shelland #titleso that the #title's sharp corners don't overlap #shell's.
在您的标记中，您必须为两者都指定 border-radius #shell，#title以便#title's 的尖角不会重叠#shell's。
A live example, http://jsfiddle.net/BXSJe/4/
一个活生生的例子，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;
}
回答by obiyoda
Another way to accomplish this was to set the outer div to have a overflow to hidden
实现此目的的另一种方法是将外部 div 设置为隐藏溢出
#shell {
width:500px;
height:300px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
overflow:hidden;
}
#title {
background:green;
padding:5px;
}
回答by EdoDodo
You'll probably want to round just the top two corners of the title div with the same radius as the shell div so that they don't overlap. The CSS3 you would use is:
您可能只想将标题 div 的顶部两个角与外壳 div 的半径相同，以便它们不会重叠。您将使用的 CSS3 是：
border-top-left-radius: XXpx
border-top-right-radius: XXpx
For backward compatibility with old Mozilla browsers you should also use:
为了与旧的 Mozilla 浏览器向后兼容，您还应该使用：
-moz-border-radius-topleft: XXpx
-moz-border-radius-topright: XXpx
And for old versions of WebKit browsers (Safari, mainly), you can use:
对于旧版本的 WebKit 浏览器（主要是 Safari），您可以使用：
-webkit-border-top-left-radius: XXpx
-webkit-border-top-right-radius: XXpx
However, there is nothing you can do about old Internet Explorer browsers as far as I know, except use images.
但是，据我所知，除了使用图像之外，您对旧的 Internet Explorer 浏览器无能为力。
回答by Michael Schwartz
Internet Explorer did not support border-radius until IE9, much to the frustration of developer and designers. With IE9, the important steps are using the edge META tag and provide the border radius:
Internet Explorer 直到 IE9 才支持边界半径，这让开发人员和设计人员感到非常沮丧。对于 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>
Source - http://davidwalsh.name/css-rounded-corners
来源 - http://davidwalsh.name/css-rounded-corners
I'd rather use images, but IE can do down the drain. Microsoft should step up it's game, and support CSS3.
我宁愿使用图像，但 IE 可能会浪费资源。微软应该加强它的游戏，并支持CSS3。
