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


147

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

Answers:


183

我找到了解决该问题的另一种方法。这看起来像WebKit(或可能是Chrome)中的另一个错误,但是可以工作。您需要做的-将WebKit CSS掩码添加到#wrapper元素。您可以使用单个像素的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示例


3
感谢您的修复。今天在野生动物园(v6.0.2)中进行了尝试,并在那里为我工作!
billythetalent12年

6
但是,这将打破元素上的任何阴影。
杰克·詹姆斯

1
这也适用于带有绝对定位子项的包装器,而这里的其他解决方案则不行。真好!
Dan Tello 2013年

2
使用Chrome 42.0.2311.90(64位),并且仍然需要此修复程序...谢谢!
simon 2015年

2
您的解决方案将消除父元素的阴影。
ABDeveloper

105

在边框半径项目中添加一个z-index,它将掩盖其中的内容。


@Sifu:你错了。无论出于何种原因,按照建议添加z-index都能为我解决此确切问题(在当前版本的Chrome中),这是比最简单的解决方案更简单,更通用的解决方案。
尼克F

7
@simon:请记住,要使z-index生效,需要满足某些条件(例如,需要设置位置)。有关详细信息,请参见此处
Nick F

@NickF-这是Chrome(-ium)中的错误;-webkit-mask-image: -webkit-radial-gradient(circle, white, black);是一种有效的解决方法,但值得庆幸的是,该错误已在我收到的Chrome最新更新中修复。
simon

容器的Z索引1。绝对元素的z-index -1为我解决了它。
aztraL-EnForceR 2015年

这个为我工作。上面的包装器解决方案没有。
Ruwen

58

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


12
之所以可行,是因为在Webkit中,定位的元素不会将其内容剪切到其边界半径。这个额外的层只是使其变得简单,因此不定位具有边界半径的div,而只是将其放置在定位的元素内。
Daniel Beardsley

9
您是否会偶然发现这是否是错误/预期的行为?
jmotes 2011年

4
+1投票赞成bug ...如果您有一个会自动生成div并将其位置设置为绝对位置的图片库,则此“功能”确实非常有用...
inf3rno 2012年

@RunLoop我刚刚在Safari 7.1中测试了jsfiddle,并且工作正常。您能更详细地说明哪些无效吗?
jmotes 2014年

1
我们的图形设计师实际上是在发现答案之前的20秒内“发现”的:D
Pere,

18

不透明度:0.99;在包装上解决webkit错误


2
transform: translateY(0);是一种可在不干扰对象的视觉表示的情况下实现相同结果的替代方法(除非使用透视图)。
kontur

15

似乎这一作品:

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

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


4
transform: translateZ(0)对我来说足够了。
kalvn 2015年

请注意,这(尤其是translateZ)将隐式地为您的元素启用硬件加速,令人遗憾的是,在某些情况下,这会打开一堆崭新的蠕虫。
doldt '16

transform: translateZ(0)也为我工作。对于我来说,硬件加速是一个不错的主意。
塞巴斯蒂安·洛伯

9

在最新的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/


我认为您可以缩短此剪切路径:inset(0%); ...仅仅具有剪切路径似乎可以解决问题:-)
Jakob E

哇。这是完美的答案。
Shashank Bhatt,




2

基于Graycrow的出色答案...

这是一个更真实的示例,其中包含两个带有某些填充物含量的球状div。我只用一个十六进制值替换了硬编码的png背景,即

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

被替换为

-webkit-mask-image:#fff;

看到这个JSFiddle ... http://jsfiddle.net/hqLkA/


1

这里看看我是如何做到的;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在这种情况下,为什么还要麻烦地使用包装器,只需将其设置为on,您就会得到相同的结果#box。另外,如果#box边界半径仅用于修复WebKit,则可以在其中包含该-webkit-属性。
robertc 2011年

迷宫,这在某些情况下可能会起作用,但就我而言,我正在寻找一种不会改变盒子形状的解决方案(包装器仍然可以作为遮罩使用)。我的示例非常简化,但是我尝试使用包装器将阴影从盒子中隐藏起来(使用包装器上的填充仅使我想要的阴影边缘可见)。
jmotes 2011年

1
感谢迷宫的帮助!您的解决方案帮助我更加认真地考虑了问题。顺便说一句,您可以忽略我对您的帖子所做的编辑。我本打算自己做。抱歉:)
jmotes 2011年

@ user480837没问题的伴侣,很高兴我能为您提供帮助。:)
Maze

1
@Maze如果施加任何形式的边框将无法工作:jsfiddle.net/ptW85/228
抗毒

1

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

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

0

如果要为图像创建遮罩并将图像放置在容器内,请不要设置'position:absolute'属性。您所需要做的就是更改左边距和右边距。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;
        }
    }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.