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

小编典典

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

all

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

阅读 161

2022-07-30

共1个答案

小编典典

根据规格：

一个盒子的背景，而不是它的边框图像，被剪裁到适当的曲线（由“背景剪辑”确定）。剪辑到边界或填充边缘的其他效果（例如“干verflow”，而不是“可”）也必须剪辑到曲线。
被替换元素的内容总是修剪到内容边缘曲线。 此外，边框边缘曲线之外的区域不代表元素接受鼠标事件。

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

这意味着overflow: hiddenon#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/

2022-07-30