在 CSS 中强制子元素继承父元素的边框设置

我在另一个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;
}

不管我怎么试，还是会重叠。如何使#inner服从并填充到#outer的边界?

编辑

下面的黑客现在达到了目的。但是问题仍然存在(可能对CSS3和web浏览器的作者来说):为什么子元素不遵守父元素的弯曲边界，是否有办法强迫它们这样做?

现在解决这个问题的方法是，你可以将曲线分配给单独的边界。为了达到我的目的，我只是给内元素的上面两个元素分配了一条曲线。

#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;
}
90995 次浏览
小开

这有什么错呢?

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

如果你想在底部有锋利的边缘: 使用这些:

border-top-left-radius: 10px;
border-top-right-radius: 10px;


-moz-border-radius-topleft
-moz-border-radius-topright
小开
最佳答案

根据规格:

一个盒子的背景，而不是它的背景 边框图像，都是剪贴到的 合适的曲线(由 “background-clip”)。其他影响 夹到边框或填充边缘 (如“溢出”以外 '可见')也必须剪辑到 曲线。被替换的内容 元素总是被修剪到 内容边曲线。同样，区域 外边沿的曲线边缘 不接受鼠标事件代表

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

这意味着overflow: hidden在#outer上应该工作。但是，这在Firefox 3.6及以下版本中行不通。这在Firefox 4中得到了修复:

圆角现在剪辑内容和图像(如果溢出:可见未设置)。

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 - radius:继承;

跟随父结点

.parent {
width: 100px;
height:100px;
border:1px solid green;
border-radius: 16px 16px 0 0;
padding: 10px;
}
.child {
width:100px;
height: 100px;
border: 1px solid red;
background: blue;
border-radius: inherit;
}
<div class="parent">
<div class="child">


</div>
</div>


提交答案