强迫孩子服从CSS中父母弯曲的边界
我有另一个div内的div。 #outer和#inner 。 #outer有弯曲的边界和白色背景。 #inner没有弯曲的边框和绿色背景。 #inner超出了#inner的曲线边界。 反正有阻止呢？
#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>
不pipe我怎么尝试它仍然重叠。 我如何让#inner服从并填充到#outer的边界？
编辑
下面的黑客已经达到了目的。 但是这个问题（也许是CSS3和网页浏览器的作者）： 为什么孩子的元素不遵守父母的弯曲的边界，是否有强迫他们呢？
为了现在我需要解决这个问题，您可以将曲线分配给各个边界。 所以对于我的目的，我只是给内部元素的顶部两个分配一个曲线。
#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'确定）。 剪切到边界或填充边缘的其他效果（例如“可见”以外的“溢出”）也必须剪切到曲线上。 replace元素的内容总是被修剪为内容边缘曲线。 此外，边界曲线外的区域不代表元素接受鼠标事件。
http://www.w3.org/TR/css3-background/#the-border-radius
这意味着#outer上的overflow: hidden应该可以工作。 但是，这不适用于Firefox 3.6及更低版本。 这在Firefox 4中得到了修复：
圆angular现在剪辑内容和图像（如果溢出：可见未设置）。
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/
如果你想要在底部锐利的边缘：使用这些：
border-left-left-radius：10px; border-right-right-radius：10px; -moz-边界半径，左上 -moz-边界半径，topright
这有什么问题？
#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; }
你有没有尝试过的位置：内部的div的相对？
那是：
#inner { background-color: #209400; height: 10px; border-top: none; position: relative; left: 15px; top: 15px; }
