强制孩子在 CSS 中服从父母的弯曲边框答案

【问题标题】：Forcing child to obey parent's curved borders in CSS强制孩子在 CSS 中服从父母的弯曲边框
【发布时间】：2010-09-15 05:18:35
【问题描述】：

我在另一个 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 的边界？

编辑

以下 hack 暂时达到了目的。但问题仍然存在（可能是 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;
}

【问题讨论】：

您是否尝试过为内部元素设置完全相同的边框半径？
但我希望内部元素的边框半径在底部是直的。是否可以只为某个角设置边框半径？
当然。您甚至可以像border-radius: TL TR BL BR 一样分配它们。
我把它读作“强迫孩子服从父母的命令”。 :)
除 Safari 外，-moz-border-radius 和 border-radius 可以用作具有四个值的速记：10px 10px 0 0。但是对于 Safari，您需要单独设置它们。

标签： css

【解决方案1】：

根据规格：

盒子的背景，但不是它的背景边框图像，被剪裁到适当的曲线（由确定 “背景剪辑”）。其他影响剪辑到边框或填充边缘（例如“溢出”以外 “可见”）也必须剪辑到曲线。 替换的内容元素总是被修剪到内容边缘曲线。此外，面积在边界边缘的曲线之外不代表接受鼠标事件元素。

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

这意味着#outer 上的overflow: hidden 应该可以工作。但是，这不适用于 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/

【讨论】：

宾果游戏，我正在使用 Firefox 3.6 进行测试。所以这就解释了。
在游戏后期加入的任何人，overflow: hidden; 正在开发当前版本的 FF。确保根据您的要求进行测试。
只是想注意fiddle有边距，所以overflow hidden的真实效果被隐藏了
如果我们不想隐藏溢出的内容怎么办？隐藏的溢出将切断工具提示弹出窗口和出现在其中的窗口菜单等内容。
只需添加溢出：隐藏；和外 DIV 的边界半径

【解决方案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; 
}

【讨论】：

我希望底部有尖角。这将需要两个内部 div，一个给定负边距以与另一个重叠。
嗯...原来你可以设置单独的角落。所以我只设置了前两个。

【解决方案3】：

如果您希望底部有锋利的边缘：使用这些：

边框左上角半径：10px；边框右上角半径：10px； -moz-border-radius-topleft -moz-border-radius-topright

【讨论】：

【解决方案4】：

您是否尝试过为内部 div 设置 position:relative ???

即：

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

【讨论】：

使用position: relative 不起作用：/