如何在Chrome/Opera中使CSS 3圆角隐藏溢出

Question

如何在Chrome/Opera中使CSS 3圆角隐藏溢出

我需要圆角上的父母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>

JSFiddle实例

谢谢你的帮助！

最新情况：导致这一问题的缺陷已在Chrome中修复。不过，我还没有重新测试过Opera或Safari。

Answer 1

我找到了另一个解决这个问题的方法。这看起来像WebKit(或者Chrome)中的另一个bug，但它可以工作。您所需要做的就是添加一个WebKit CSS掩码到#Wrapper元素。您可以使用单个像素的PNG图像，甚至可以将其包含到CSS中以保存HTTP请求。JSFiddle示例#wrapper {width: 300px; height: 300px;border-radius: 100px;overflow: hidden;position: absolute; /* this breaks the overflow:hidden in Chrome/Opera *//* this fixes the overflow:hidden in Chrome */-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);}#box {width: 300px; height: 300px;background-color: #cde;}JSFiddle示例