How to make CSS3 rounded corners hide overflow in Chrome/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.
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>
Example on JSFiddle
Thanks for the help!
UPDATE: The bug causing this issue has been since fixed in Chrome. I have not re-tested Opera or Safari however.
I found another solution for this problem. This looks like another bug in WebKit (or probably Chrome), but it works. All you need to do - is to add a WebKit CSS Mask to the #wrapper element. You can use a single pixel png image and even include it to the CSS to save a HTTP request.
#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 Example
将z-index添加到边界半径的项目中，并将掩盖其中的内容。
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>
Thanks everyone who helped!
→ http://jsfiddle.net/5fwjp/
链接地址: http://www.djcxy.com/p/65252.html上一篇: 识别和非识别有什么区别