强制孩子在CSS中服从父级的弯曲边框 [英] Forcing child to obey parent's curved borders in CSS

问题描述

我有一个div在另一个div。 #outer 和 #inner 。 #outer 具有弯曲的边框和白色背景。 #inner 没有弧形边框和绿色背景。 #inner 延伸到 #outer 的弯曲边框之外。是否仍然要停止此操作？

I have a div inside of another div. #outer and #inner. #outer has curved borders and a white background. #inner has no curved borders and a green background. #inner extends beyond the curved borders of #outer. Is there anyway to stop this?

<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 的边框？

No matter how I try it still overlaps. How can I make #inner obey and fill to #outer's borders?

编辑

以下黑客已经达到目的。但问题是（可能对CSS3和webbrowser作者）：为什么子元素不服从他们的父的曲线边界，是否有强迫他们？

The following hack served the purpose for now. But the question stands (maybe to the CSS3 and webbrowser writers): Why don't child elements obey their parent's curved borders and is there anyway to force them to?

现在，为了我的需要，为了解决这个问题，你可以分配曲线到单个边框。所以为了我的目的，我刚刚分配一个曲线到内部元素的顶部两个。

The hack to get around this for my needs for now, you can assign curves to individual borders. So for my purposes, I just assigned a curve to the top two of the inner element.

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

推荐答案

/ p>

According to the specs:

框的背景，而不是它的
边框图像，被剪切到
适当的曲线
'background-clip'）。
剪裁到边框或填充边缘
（例如'overflow'除了
'visible）之外的其他效果也必须剪辑到
曲线。 已替换的
元素的内容总是修剪为
内容边缘曲线。此外，边框边缘曲线外面的
区域
不会

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 上的 overflow：hidden 。但是，这不会适用于Firefox 3.6及以下版本。这是在Firefox 4中修复的：

This means that an overflow: hidden on #outer should work. However, this won't work for Firefox 3.6 and below. This is fixed in Firefox 4:

圆角现在剪辑内容和图像（如果overflow：visible未设置）

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

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

所以你仍然需要修复，只需缩短为：

So you'll still need the fix, just shorten it to:

#outer {
  overflow: hidden;
}

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

查看此处： http://jsfiddle.net/VaTAZ/3/

See it working here: http://jsfiddle.net/VaTAZ/3/

这篇关于强制孩子在CSS中服从父级的弯曲边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！