CSS3边框半径裁剪发出

我有边界半径设置为某个值一个div（假设10px的），和一个嵌套的div是其母公司的整个宽度和高度。CSS3边框半径裁剪发出

<!-- ... --> 
<style type="text/css"> 
div.parent { 
    display: block; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    border-radius: 10px; 
    background: #0000ff; 
    overflow: hidden; 
} 
div.inner { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #ff0000; 
} 
</style> 
<!-- ... --> 
<div class="parent"> 
    <div class="inner"></div> 
</div> 
<!-- ... -->

我注意到，尽管溢出被设置为隐藏，父母并没有在圆角处夹住孩子。另一个计算器线程表明，这种行为是 “设计”：

How do I prevent an image from overflowing a rounded corner box with CSS3?

然而，在挖了CSS3背景和边框工作草案...

http://www.w3.org/TR/css3-background/#corner-clipping

......我不由得注意下下面的说明“角限幅”部分：

其它效果该剪辑的边界或填充边缘（如“溢出” 比“可见的”其他）也必须夹到曲线。更换元素的含量始终修剪成内容边缘曲线

所以我缺少什么？内容是否被限制在角落？我在看过时的信息吗？我做错了吗？

来源

2010-07-14 cdata

[编辑]我已经上传了一个快速页面，演示了我的问题：http://aethermedia.net/sandbox/border-radius-test.html – cdata 2010-07-14 20:34:11

您可以使用代码段编辑问题吗？您的链接已死亡。 – evolutionxbox 2016-08-03 13:39:58

它不是由设计，有一个outstanding defect in Firefox这个问题。应该可以在任何WebKit浏览器中正常工作。在Firefox中，您必须为包含的元素添加边框半径，或者use some sort of hack。

来源

2010-07-14 17:29:20 robertc

+13

我很想相信，但我现在正在盯着webkit，但仍然看到问题= /但是，看到它被列为错误，这是一个巨大的解脱！ – cdata 2010-07-14 17:30:43

@cdata有意思的是，如果你把两个位置：你的样式表中的相对线条都在Chrome 6中正常工作，那么它是正确的。 – robertc 2010-07-14 17:52:36

哇，这是完全正确的..所以外观是定位需要是静态的正确剪辑？对我来说，看起来仍然很有趣...... ...当然，这在Firefox中仍然失败。感谢您的帮助！我会坚持一点点的其他答案.. – cdata 2010-07-14 17:55:47

如果在这两个元素删除position: relative;外构件夹在孩子周围的圆角。不知道为什么，如果它是一个错误。

来源

2011-02-17 20:16:39 knut

我来到这里寻找一个答案，因为我在Chrome 18

我想有一个圆形的盒子里面它两个元素也有类似的问题 - 标题和索引号 - 索引号为绝对定位在盒子的左下角。

我注意到的是，如果我有这样的HTML，标题元素会流血圆角（边框半径），即使溢出被设置为隐藏父元素之外：

<a> 
    <div style="overflow:hidden; border-radius:15px; position:relative;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a>

但如果我搬到了相对定位了一个父元素的一切看起来很不错：

<a style="position:relative;"> 
    <div style="overflow:hidden; border-radius:15px;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a>

来源

2012-05-06 19:45:00

只是想帮腔就这一个，因为我发现这类似的问题。

在其溢出设置为滚动一个div，滚动时，除非内容已滚动到的绝对顶部或底部边框半径没夹的内容。即使如此，如果我将文档滚动到绝对顶部或底部，裁剪只会有时重新出现。

在云雀上，我为元素添加了一个透明边框，并且似乎强制在角上进行剪裁。由于我已经在元素周围有了一些空间，所以我只是将它切成两半，并将其余部分应用到边界厚度。不理想，但我最终得到了我想要的结果。

在Mac，Chrome，Safari和Firefox上测试。

来源

2013-05-01 16:08:29 Eric

CSS3边框半径裁剪发出

回答

相关问题