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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

谢谢您的帮助！

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

回答：

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

谢谢大家的帮助！

以上是 如何使CSS3圆角在Chrome / Opera中隐藏溢出 的全部内容， 来源链接： utcz.com/qa/402318.html

回到顶部