强迫孩子在CSS中服从父母的弯曲边框

Question

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


    

无论我如何尝试它仍然重叠.我怎样才能#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;
}

Answer 1

根据规格:

框的背景,但不是其边框图像,被剪切到适当的曲线(由'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/

Answer 2

你可以简单地使用

边界半径：继承；

跟随父母

.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>