带圆角的内容边界
我在 Firefox 中使用 CSS 圆角，但内容边界存在以下问题：
代码
<html>
<head>
<style>
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
}
#inner {
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="outter">
<div id="inner">text</div>
</div>
</body>
</html>
效果
alt text http://img256.imageshack.us/img256/2108/testew.png
我可以通过定义 -moz- 来避免这个问题每个外部子元素的 border-radius 。我还有其他失踪的方式吗？
编辑
一项更难的测试，使用多个内部 div，每个 div 具有不同的背景颜色：
<div id="outter">
<div id="inner1" style="background: blue">text</div>
<div id="inner2" style="background: gray">text</div>
...
<div id="innerN" style="background: yellow">text</div>
</div>
I am using CSS rounded corners for firefox and I have the following problem with content boundaries:
Code
<html>
<head>
<style>
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
}
#inner {
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="outter">
<div id="inner">text</div>
</div>
</body>
</html>
Effect
alt text http://img256.imageshack.us/img256/2108/testew.png
I can avoid this problem by defining -moz-border-radius for each outter's child. There is any other way I am missing?
Edit
A harder test with multiple inner divs with different background-color for each one:
<div id="outter">
<div id="inner1" style="background: blue">text</div>
<div id="inner2" style="background: gray">text</div>
...
<div id="innerN" style="background: yellow">text</div>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您也可以这样做：
将背景移动到圆形父级将正确呈现，请参阅此处的示例： http:// jsfiddle.net/mE8En/（仅适用于 Firefox！）如果您想支持其他 基于 webkit 的浏览器 也是如此，如下所示：
编辑更新： 要处理 firefox 中的内部 div，请在内部 div 上减去一个像素以补偿注意
：webkit 中内部 div 的半径并不完美，请根据需要进行调整...这是因为浏览器之间的渲染不是完美的像素。
You can also do this:
Moving the background to the rounded parent will render correctly, see here for an example: http://jsfiddle.net/mE8En/ (only works in firefox!) add the webkit border radius if you want to support other webkit based browsers as well, like this:
Update for edit: To handle the inner divs in firefox subtract a pixel on the inner div to compensate for the border, resulting in this:
Note: the radii aren't perfect on the inner divs in webkit, adjust as desired...this is because the rendering isn't pixel perfect between browsers.
另外，如果您希望 IE 中的圆角不带图像，请查看 DDRoundies。
Also, if you want these rounded corners in IE without images, check out DDRoundies.