如何在Chrome/Opera中使用CSS3圆角使溢出内容隐藏

Question

如何在Chrome/Opera中使用CSS3圆角使溢出内容隐藏

165

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

- jmotes

12个回答

123

将 z-index 添加到您的带有 border-radius 的项目中，它将遮蔽其中的内容。

- Jackolai

7

@simon: 请记住，在 z-index 能够生效之前，必须满足一定的条件（例如需要设置 position）。详情请见这里。 - Nick F

将 z-index 1 分配给容器，将 z-index -1 分配给绝对定位元素，这对我解决了问题。 - aZtraL-EnForceR

这个对我起作用了。上面的包装器解决方案不行。 - Ruwen

可以验证这个命题，但在当前版本的Chrome上仍然无法正常工作（在我的情况下，在对元素进行动画处理后更改渲染模式时）。 - Paracetamol

5

2021年，这个漏洞仍然存在（Safari版本14.0.3 (16610.4.3.1.4) 桌面版）。 - Matt

显示剩余7条评论

60

大家不用管了，我通过在包装器和盒子之间添加一个额外的

来解决了这个问题。

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

超文本标记语言

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

感谢所有帮忙的人！

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

- jmotes

12

这样做的原因是在Webkit中，定位元素不会把其内容裁剪成边框半径形状。这个额外的层只是使带有边框半径的 div 不被定位，并且简单地位于一个定位元素内部。 - Daniel Beardsley

9

你是否知道这是一个 bug/意图行为？ - jmotes

4

+1票支持修复Bug...当你有一个自动生成div并将位置设置为绝对定位的图片库时，那么这个“特性”真的很糟糕... - inf3rno

@RunLoop 我刚在 Safari 7.1 中测试了这个 jsfiddle，它可以正常工作。你能否更具体地说明哪里出了问题？ - jmotes

1

我们的同事，即平面设计师，在找到这个答案之前实际上在20秒前“发现”了它:D - Pere

22

opacity: 0.99; 在容器上可以解决Webkit浏览器的问题。

- flavi1

4

transform: translateY(0); 是一种替代方式，可以达到相同的效果，而不会干扰对象的视觉表现（除非你使用透视效果）。 - kontur

16

看起来这个有效：

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

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

- nakrill

4

transform: translateZ(0) 对我来说已经足够了。 - kalvn

请注意，这将隐式地为您的元素启用硬件加速（特别是translateZ），这在某些情况下会带来一些问题。 - doldt

transform: translateZ(0) 对我也起作用。在我的情况下，这个元素进行硬件加速并不是一个坏主意。 - Sebastien Lorber

15

最新版本的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/！

- antoni

2

我认为你可以更进一步缩短它，只需要使用 clip-path: inset(0%); 就可以了 :-) - Jakob E

哇，这是完美的答案。 - Shashank Bhatt

6

这不是一个答案，但这是在Chromium源代码下的一个已报告的错误：

http://code.google.com/p/chromium/issues/detail?id=62363

不幸的是，看起来没有人在处理它。 :(

- ryan

1

三年过去了，它仍然没有被修复 >.< - Nathan Hornby

4

改变具有边框的父元素的不透明度，这将重新组织堆叠的元素。在经过数小时的研究和失败尝试后，这对我产生了神奇的效果。只需添加0.99的不透明度即可重新组织浏览器的绘图过程。请查看http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

- Rami Awar

3

对我而言，没有任何一个解决方案效果良好，只有使用：

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

在包装元素上进行操作。

以下是示例：http://jsfiddle.net/gpawlik/qWdf6/74/

- Grzegorz Pawlik

2

基于graycrow的优秀回答...

下面是一个更实际的例子，其中有两个圆形的div，带有一些填充内容。我用十六进制值替换了硬编码的png背景，即

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

被替换为

-webkit-mask-image:#fff;

请查看这个 JSFiddle... http://jsfiddle.net/hqLkA/

- gts101

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- graycrow · Accepted Answer

我找到了另一个解决这个问题的方法。这似乎是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 */
    -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>