解决 WebKit 和 Opera 中 CSS3 圆角的溢出隐藏问题
屏蔽圆角下方的内容通常涉及使用溢出：隐藏属性。然而，当父元素相对或绝对定位时，这种技术在基于 WebKit 的浏览器（包括 Chrome）和 Opera 中可能会出现故障。
问题：
为了说明问题，请考虑以下代码：
#wrapper {
width: 300px;
height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute;
}
#box {
width: 300px;
height: 300px;
background-color: #cde;
}在这种情况下，#wrapper div 是绝对定位的并且具有圆角。但是，在基于 WebKit 的浏览器和 Opera 中，#box div 的内容会溢出到圆角之外。
解决方案：WebKit CSS Mask
解决此问题的替代解决方案是在 #wrapper 元素上使用 WebKit CSS Mask。这涉及使用单像素 PNG 图像作为遮罩：
#wrapper {
width: 300px;
height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute;
/* This fixes the overflow in Chrome/Opera */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}此技术成功隐藏了基于 WebKit 的浏览器和 Opera 中的溢出，允许圆角有效地遮盖子元素的内容。
以上是为什么带有'overflow:hidden”的圆角在 WebKit 和 Opera 中失败，我该如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！
