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

我有一个div里面的另一个div。#outer和#inner。#outer有弯曲的边框和白色背景。#inner没有曲线边框和绿色背景。#inner延伸到#outer的弯曲边界之外。有办法阻止吗?

#{外显示:块; 浮:正确; 保证金:0; 宽度:200 px; 背景颜色:白色; 溢出:隐藏; -moz-border-radius: 10 px; -khtml-border-radius: 10 px; -webkit-border-radius: 10 px; border - radius: 10 px; ｝ #{内部 background - color: # 209400; 高度:10 px; border-top:没有; ｝ < div id = "外" > < div id = "内部" > < / div > <！——其他东西需要白色背景——> <！——底角需要白色背景——> < / div >

不管我怎么试，还是会重叠。我怎样才能让“内”服从“外”的边界?

edit

下面的黑客现在达到了目的。但是问题仍然存在(也许对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;
}

当前回答

根据规格:

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

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

这意味着在#outer上隐藏的overflow:应该可以工作。但是，这在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/

2010-09-16 06:28:34

其他回答

这有什么错呢?

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

2010-09-15 06:25:17

你有没有试过使位置:相对的内部div ??

那就是:

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

2010-09-15 07:05:27

你可以简单地使用

border - radius:继承;

跟随父结点

.parent { 宽度:100 px; 身高:100 px; 边框:1px纯绿色; 边框半径:16px 16px 0 0; 填充:10 px; } .child { 宽度:100 px; 身高:100 px; 边框:1px纯红色; 背景:蓝色; border - radius:继承; } < div class = "父" > < div class = "孩子" > < / div > < / div >

2022-11-15 14:38:27

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

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

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

2010-09-15 15:30:21