首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何让CSS3圆角在Chrome/Opera中隐藏溢出

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

Stack Overflow用户
提问于 2011-04-21 04:53:19
回答 11查看 115.6K关注 0票数 156

我需要父div上的圆角来屏蔽它的子级内容。overflow: hidden在简单的情况下工作,但在基于webkit的浏览器和Opera中,当父级相对或绝对定位时会中断。

这在火狐和IE9中是有效的:

CSS

代码语言:javascript
复制
#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

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

HTML

代码语言:javascript
复制
<div id="wrapper">
  <div id="box"></div>
</div>

Example on JSFiddle

谢谢你的帮助!

更新:导致这个问题的bug 已经在Chrome中修复了。然而,我没有重新测试Opera或Safari。

EN

回答 11

Stack Overflow用户

回答已采纳

发布于 2011-04-21 23:12:58

不管大家,我设法通过在包装器和盒子之间添加一个额外的div来解决这个问题。

CSS

代码语言:javascript
复制
#wrapper {
    position: absolute;
}

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

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

HTML

代码语言:javascript
复制
<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

感谢所有帮助过我们的人!

http://jsfiddle.net/5fwjp/

票数 59
EN

Stack Overflow用户

发布于 2012-04-24 18:37:14

我为这个问题找到了另一个解决方案。这看起来像是WebKit中的另一个bug (或者可能是Chrome),但它是有效的。您所需要做的就是向# WebKit CSS Mask元素添加一个包装器。您可以使用单像素png图像,甚至可以将其包含在CSS中以保存HTTP请求。

代码语言:javascript
复制
#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;
}
代码语言:javascript
复制
<div id="wrapper">
    <div id="box"></div>
</div>

票数 188
EN

Stack Overflow用户

发布于 2014-08-08 22:37:49

将z索引添加到您的边界半径项目中,它将屏蔽其中的内容。

票数 115
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5736503

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档