Question

我需要父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>

Example on JSFiddle

感谢您的帮助！

更新：导致此问题的错误已在Chrome中修复。我没有重新测试Opera或Safari。

Answer 1

我找到了解决此问题的另一种方法。这看起来像WebKit（或可能是Chrome）中的另一个错误，但它确实有效。您需要做的就是向#wrapper元素添加WebKit CSS Mask。您可以使用单个像素的png图像，甚至可以将其包含在CSS中以保存HTTP请求。

#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 Example

Answer 2

在你的border-radius＆＃d; d项中添加一个z-index，它会掩盖其中的内容。

Answer 3

没关系所有人，我设法通过在包装器和盒子之间添加一个额外的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>

感谢所有帮助过的人！

→http://jsfiddle.net/5fwjp/

Answer 4

不透明度：0.99;在包装器上解决webkit bug

Answer 5

似乎这个有效：

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Answer 6

支持最新的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/！

Answer 7

不是答案，但这是Chromium来源下提交的错误： http://code.google.com/p/chromium/issues/detail?id=62363

不幸的是，看起来并没有人在研究它。：（

Answer 8

使用边框更改父元素的不透明度，这将重新组织堆叠元素。经过数小时的研究和尝试失败后，这对我来说奇迹般地起作用。就像添加0.99的不透明度来重新组织浏览器的绘制过程一样简单。查看http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 9

基于graycrow的优秀答案...

这是一个更真实的例子，它有两个带有一些填充内容的cicular div。我将硬编码的png背景替换为十六进制值，即

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

替换为

-webkit-mask-image:#fff;

请参阅此JSFiddle ... http://jsfiddle.net/hqLkA/

Answer 10

至于我，没有一个解决方案运作良好，只使用：

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

包装元素上的

完成了这项工作。

此处示例：http://jsfiddle.net/gpawlik/qWdf6/74/

Answer 11

这里看看我是如何做到的; 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;
}

Answer 12

我尝试了所有答案，但没有成功。经过几个小时的调查，我找到了解决此问题的方法。在您的类中使用此属性将不允许div元素溢出容器。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Answer 13

如果您要为图像创建蒙版并将图像放置在容器内，请不要设置'position：absolute'属性。您所要做的就是更改margin-left和margin-right。 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;
        }
    }

如何使CSS3圆角隐藏Chrome / Opera中的溢出

13 个答案: