在CSS中强迫孩子服从父母的弯曲边界

Question

我在另一个div内有一个div。 #outer和#inner。 #outer具有弯曲的边框和白色背景。
#inner没有弯曲的边框和绿色背景。 #inner延伸到弧形边界之外#outer。反正有阻止这个的吗？

#outer {

        display: block; float: right; margin: 0; width: 200px;

        background-color: white; overflow: hidden;

        -moz-border-radius: 10px;

        -khtml-border-radius: 10px;

        -webkit-border-radius: 10px;

        border-radius: 10px;

    }

    #inner { background-color: #209400; height: 10px; border-top: none; }


 <div id="outer">

        <div id="inner"></div>

        <!-- other stuff needs a white background -->

        <!-- bottom corners needs a white background -->

    </div>

无论我怎么尝试，它仍然重叠。如何#inner服从并填充#outer的边界？

编辑

以下hack达到了目的。但是问题 仍然存在 （也许对CSS3和Webbrowser作家而言）： 为什么子元素不服从父元素的弯曲边界， 反而
有强迫它们的作用？

为了满足我现在的需要，您可以为各个边界分配曲线。因此，出于我的目的，我只为内部元素的顶部两个分配了一条曲线。

#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}

Answer 1

根据规格：

框的背景而不是其边框图像被裁剪为适当的曲线（由“ background-
clip”确定）。修剪到边框或填充边缘的其他效果（例如“可见”以外的“溢出”）也必须修剪到曲线。 替换元素的内容始终会修剪到内容边缘曲线。
同样，边界边缘曲线之外的区域也不接受代表该元素的鼠标事件。

这意味着overflow: hidden打开#outer应该起作用。但是，这不适用于Firefox 3.6及更低版本。这在Firefox
4中已修复：

圆角现在可以剪辑内容和图像（如果溢出：未设置可见）。

因此，您仍然需要修复程序，只需将其缩短为：

#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}