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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (36)

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

提问于
用户回答回答于

在你边界半径的项目中添加一个z索引,它会隐藏覆盖里面的东西。

用户回答回答于

我找到了另一个解决这个问题的方法。这看起来像WebKit(或者Chrome)中的另一个bug。所需要做的就是添加一个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示例

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问8 回答
  • uncle_light

    5 粉丝518 提问7 回答
  • 富有想象力的人

    3 粉丝0 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答

扫码关注云+社区

领取腾讯云代金券