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

2022-01-30 00:00:00 html css rounded-corners

我需要父 div 上的圆角来掩盖其子级的内容.overflow: hidden 适用于简单的情况，但在基于 webkit 的浏览器和 Opera 中，当父级相对或绝对定位时会中断.

I need round corners on a parent div to mask content from its childen. overflow: hidden works in simple situations, but breaks in webkit based browsers and Opera when the parent is positioned relatively or absolutely.

这适用于 Firefox 和 IE9:

This works in Firefox and 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.

UPDATE: The bug causing this issue has been since fixed in Chrome. I have not re-tested Opera or Safari however.

推荐答案

没关系，我设法通过在包装器和盒子之间添加一个额外的 div 解决了这个问题.

Nevermind everyone, I managed to solve the problem by adding an additional div between the wrapper and box.

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/

相关文章