我需要父 div 上的圆角来掩盖其子级的内容。 overflow: hidden 在简单的情况下工作，但在基于 webkit 的浏览器和 Opera 中，当父级相对或绝对定位时会中断。
这适用于 Firefox 和 IE9：
CSS
#wrapper {
width: 300px;
height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute;
}
#box {
width: 300px;
height: 300px;
background-color: #cde;
}
HTML
<div id="wrapper">
<div id="box"></div>
</div>
感谢您的帮助！
更新：导致此问题的错误已在 Chrome 中修复。不过，我还没有重新测试过 Opera 或 Safari。
【问题讨论】：
标签： html rounded-corners css
我为这个问题找到了另一种解决方案。这看起来像是 WebKit（或者可能是 Chrome）中的另一个错误，但它确实有效。您需要做的就是将WebKit CSS Mask 添加到#wrapper 元素。您可以使用单像素 png 图像，甚至可以将其包含到 CSS 中以保存 HTTP 请求。
#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}
#box {
width: 300px; height: 300px;
background-color: #cde;
}<div id="wrapper">
<div id="box"></div>
</div>【讨论】：
在最新的 chrome、opera 和 safari 中支持，您可以这样做：
-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);
你一定要看看http://bennettfeely.com/clippy/这个工具！
【讨论】：
不透明度：0.99；关于 wrapper 解决 webkit 的 bug
【讨论】：
transform: translateY(0); 是一种替代方法，它可以在不干扰对象的视觉表示的情况下达到相同的结果（除非您使用透视）。
如果您要为图像创建蒙版并将图像放置在容器内，请不要设置“位置：绝对”属性。您所要做的就是更改左边距和右边距。 Chrome/Opera 将遵守溢出：隐藏和边框半径规则。
// Breaks in Chrome/Opera.
.container {
overflow: hidden;
border-radius: 50%;
img {
position: absolute;
left: 20px;
right: 20px;
}
}
// Works in Chrome/Opera.
.container {
overflow: hidden;
border-radius: 50%;
img {
margin-left: 20px;
margin-right: 20px;
}
}
【讨论】：
用边框改变父元素的不透明度，这将重新组织堆叠的元素。经过数小时的研究和失败的尝试，这对我来说奇迹般地奏效了。就像添加 0.99 的不透明度来重新组织浏览器的绘制过程一样简单。查看http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
【讨论】：
为你的边框半径项目添加一个 z-index，它会掩盖它里面的东西。
【讨论】：
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); 是一种有效的解决方法，但幸运的是，该错误已在我收到的 Chrome 最新更新中得到修复。
看来这个可行：
.wrap {
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
【讨论】：
transform: translateZ(0) 对我来说已经足够了。
translateZ）会隐式地为您的元素启用硬件加速，遗憾的是，在某些情况下，这会打开一个全新的蠕虫罐。
transform: translateZ(0) 也为我工作。在我的情况下，这个项目是硬件加速的不是一个坏主意。
就我而言，没有一个解决方案效果很好，只使用：
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
在包装元素上完成了这项工作。
【讨论】：
基于 graycrow 的出色回答...
这是一个更真实的示例，它有两个带有一些填充内容的圆形 div。我只用一个十六进制值替换了硬编码的 png 背景，即
-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
替换为
-webkit-mask-image:#fff;
查看这个 JSFiddle...http://jsfiddle.net/hqLkA/
【讨论】：
没关系，我设法通过在包装器和盒子之间添加一个额外的 div 来解决这个问题。
CSS
#wrapper {
position: absolute;
}
#middle {
border-radius: 100px;
overflow: hidden;
}
#box {
width: 300px; height: 300px;
background-color: #cde;
}
HTML
<div id="wrapper">
<div id="middle">
<div id="box"></div>
</div>
</div>
感谢所有帮助过的人！
【讨论】：
不是答案，但这是 Chromium 源下的一个归档错误： http://code.google.com/p/chromium/issues/detail?id=62363
不幸的是，看起来没有人在研究它。 :(
【讨论】：
这里看看我是怎么做到的； Jsfiddle
通过我输入的代码，我设法让它在 Webkit (Chrome/Safari) 和 Firefox 上运行。 我不知道它是否适用于最新版本的 Opera。 是的，它适用于最新版本的 Opera。
#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}
#box {
width: 300px; height: 300px;
background-color: #cde;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-o-border-radius: 100px;
}
【讨论】：
border-radius 放在包装器上，只需将其设置在#box 上就会得到相同的结果。此外，如果 #box 边框半径只是为了修复 WebKit，您可以在其中包含 -webkit- 属性。