Question

我正在为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>

Answer 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上，半径并不完美，可根据需要进行调整......这是因为渲染在浏览器之间不是像素完美。

Answer 2

此外，如果您想在没有图像的IE中使用这些圆角，请查看DDRoundies。

带圆角的内容边界

2 个答案: