为什么 CSS3 `border-radius` 在 Chrome/Opera 中溢出，如何修复？

如何解决 Chrome/Opera 中 CSS3 圆角溢出问题

在某些情况下，使用 CSS3 的 border-radius 属性创建圆角父 div 上的角可能会导致 Chrome 和 Opera 浏览器中的内容溢出。当父级相对或绝对定位时，就会出现此问题。

原始方法

以下代码演示了 Chrome/Opera 中的问题：

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

这种方法适用于 Firefox 和 IE9，但无法屏蔽溢出的内容Chrome/Opera。

改进的解决方案

解决方案涉及将 WebKit CSS Mask 添加到 #wrapper 元素：

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  /* This fixes the overflow:hidden in Chrome/Opera */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

此方法采用一个单像素 PNG 图像来定义一个 CSS 掩码来屏蔽溢出的内容。有效解决Chrome/Opera中的溢出问题，保持圆角。

以上是为什么 CSS3 `border-radius` 在 Chrome/Opera 中溢出，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！