css3 – 强制孩子在CSS中服从父的曲线边框

我有一个div在另一个div。 #outer和#inner。 #outer有弯曲的边框和一个白色背景。 #inner没有弧形边框和绿色背景。 #inner超出#outer的弯曲边框。有没有反对停止这？

<div id="outer">
    <div id="inner"></div>
    <!-- other stuff needs a white background -->
    <!-- bottom corners needs a white background -->
</div>

用css：

#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; }

不管我怎么尝试它仍然重叠。我如何让#inner服从并填写到#outer的边界？

编辑

下面的黑客服务了目的。但问题的立场(可能对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;
}

解决方法

根据规格：

A Box’s backgrounds,but not its
border-image,are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also,the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.

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

这意味着溢出：隐藏在#outer应该工作。但是，这不会适用于Firefox 3.6及以下版本。这是在Firefox 4中修复的：

Rounded corners now clip content and images (if overflow: visible is not set).

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/

css3 – 强制孩子在CSS中服从父的曲线边框

解决方法

相关文章