强制孩子在 CSS 中服从父母的弯曲边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3714862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Forcing child to obey parent's curved borders in CSS
提问by Daniel Bingham
I have a div inside of another div. #outerand #inner. #outerhas curved borders and a white background. #innerhas no curved borders and a green background. #innerextends beyond the curved borders of #outer. Is there anyway to stop this?
我在另一个 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>
No matter how I try it still overlaps. How can I make #innerobey and fill to #outer's borders?
无论我如何尝试它仍然重叠。我怎样才能使#inner服从和填充到#outer的边界？
edit
编辑
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?
下面的 hack 达到了现在的目的。但问题仍然存在（也许对于 CSS3 和 webbrowser 编写者）：为什么子元素不遵守其父元素的弯曲边框，并且无论如何都要强迫它们？
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;
}
回答by Yi Jiang
According to the specs:
根据规格：
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.
一个框的背景，而不是它的边框图像，被剪裁到适当的曲线（由'background-clip'确定）。裁剪到边框或填充边缘的其他效果（例如“溢出”而不是“可见”）也必须裁剪到曲线。替换元素的内容总是修剪到内容边缘曲线。另外，边框边缘曲线外的区域不接受代表元素的鼠标事件。
http://www.w3.org/TR/css3-background/#the-border-radius
http://www.w3.org/TR/css3-background/#the-border-radius
This means that an overflow: hiddenon #outershould work. However, this won't work for Firefox 3.6 and below. This is fixed in Firefox 4:
这意味着overflow: hiddenon#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
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;
}
See it working here: http://jsfiddle.net/VaTAZ/3/
看到它在这里工作：http: //jsfiddle.net/VaTAZ/3/
回答by Jarrett Widman
What would be wrong with this?
这会有什么问题？
#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;
}
回答by tdtje
If you want sharp edges on the bottom: Use these :
如果你想要底部的锋利边缘：使用这些：
border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft -moz-border-radius-topright
回答by Naveed Butt
have you tried making the position:relative for the inner div ???
您是否尝试过使位置：相对于内部 div ？？？
that is:
那是：
#inner {
background-color: #209400;
height: 10px;
border-top: none;
position: relative;
left: 15px;
top: 15px;
}
