为什么带有'overflow:hidden”的圆角在 WebKit 和 Opera 中失败，我该如何修复它？

解决 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中文网其他相关文章！