带有圆角的内容边界答案

【问题标题】：Content boundary with rounded corners带有圆角的内容边界
【发布时间】：2010-04-12 20:05:37
【问题描述】：

我正在为 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 具有不同的background-color：

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

【问题讨论】：

标签： html css firefox rounded-corners

【解决方案1】：

您也可以这样做：

  #outter {
        width: 200px;
        margin: auto;
        text-align: center;
        border: 1px solid #333;
        -moz-border-radius: 15px;
        background: red;
    }
    #inner {
        opacity: 0.5;
    }

将背景移动到圆形父级将正确呈现，请参见此处的示例：http://jsfiddle.net/mE8En/（仅适用于 firefox！）如果您还想支持其他 webkit based browsers，请添加 webkit 边框半径，如下所示：

-moz-border-radius: 15px; 
-webkit-border-radius: 15px;

编辑更新：要在 Firefox 中处理内部 div，减去内部 div 上的一个像素以补偿边框，结果如下：

#outter {
    width: 200px;
    margin: auto;
    text-align: center;
    border: 1px solid #333;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background: red;
}
#outter > div:first-child {
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
     -webkit-border-top-left-radius: 14px;
     -webkit-border-top-right-radius: 14px;
}
#outter > div:last-child {
    -moz-border-radius-bottomleft: 14px;
    -moz-border-radius-bottomright: 14px;
     -webkit-border-bottom-left-radius: 14px;
     -webkit-border-bottom-right-radius: 14px;
}
#inner {
    opacity: 0.5;
}

注意：半径在 webkit 中的内部 div 上并不完美，请根据需要进行调整...这是因为浏览器之间的渲染不是像素完美的。

【讨论】：

所以，用边框定义元素的背景。（other browsers 是指基于 webkit 的。：P）
您的解决方案显然适用于这个简单的示例。那么多个内部 div 呢？
对于多个内部 div，只需将 id 更改为一个类并复制粘贴您的 html :)
@sr pt - 是的，我想我理所当然地认为-webkit 意味着 webkit 浏览器，更新以防万一不明显:)
感谢所有 cmets 并对我上次评论中缺少信息感到抱歉。请阅读我的帖子编辑以获取更多信息。

【解决方案2】：

另外，如果您希望 IE 中的这些圆角没有图像，请查看DDRoundies。

【讨论】：