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

根据规格：

一个盒子的背景，但不是它的背景边框图像，被剪切到适当的曲线（由...确定） “背景剪辑”）。其他影响剪辑到边框或填充边缘（比如'溢出'除了 '可见'）也必须剪辑到曲线。 替换内容元素总是被修剪为内容边缘曲线。此外，该区域在边界边缘的曲线之外代表不接受鼠标事件元素。

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

这会有什么问题？

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

Answer 3

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

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

-moz-border-radius-topleft
-moz-border-radius-topright

Answer 4

你有没有尝试过这个位置：相对于内部div ???

即：

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}

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

4 个答案: