强制孩子在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
应该工作。但是,这不会适用于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屋!