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

我在另一个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;
}

根据规格：

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

http://www.w3.org/TR/css3-background/#the-border-radius

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

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

https://developer.mozilla.org/en/CSS/-moz-border-radius

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

#outer {
  overflow: hidden;
}

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

看到它在这里工作：http : //jsfiddle.net/VaTAZ/3/

这有什么问题呢？

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}

如果要在底部锐利边缘：请使用以下这些：

border-top-left-radius：10px;
border-top-right-radius：10px; 

-moz-border-radius-topleft
-moz-border-radius-topright

您是否尝试过将position：relative用作内部div？

那是：

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