我在另一个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>无论我如何try ，它仍然重叠.我怎样才能让#inner服从并填满#outer的边界？
edit个
下面的黑客攻击暂时达到了目的.但问题是(可能对CSS3和webbrowser的作者来说):Why don't child elements obey their parent's curved borders and is there anyway to force them to?
目前，为了满足我的需要，绕过这一问题的方法是，您可以将曲线指定给各个边界.因此，出于我的目的，我只是给内部元素的前两个元素指定了一条曲线.
#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;
}