如何在 Chrome 和 Opera 中用圆角掩盖溢出的内容？

在 Chrome 和 Opera 中用圆角隐藏溢出

问题：

你怎么能创建一个带有圆角的父 div，成功屏蔽其子级的内容，同时在 Chrome 中保持正确的溢出行为Opera？

Webkit 与 Overflow: Hidden 不兼容

在 Firefox 和 IE9 等浏览器中，对带有圆角的父 div 应用“overflow:hidden”可以有效地隐藏任何圆角元素。内容溢出。但是，在基于 webkit 的浏览器（Chrome、Safari）和 Opera 中，当父 div 相对或绝对定位时，此方法会失败。

解决方案：WebKit Mask

另一种解决方案是在父 div 上使用 webkit 掩码。这种方法掩盖了圆角之外的区域，有效地隐藏了任何溢出的内容。

实现：

要实现此解决方案，请将以下 CSS 添加到父 div：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

此CSS属性引用单像素透明PNG图像，可以将其直接包含在CSS中以避免额外的HTTP 请求。

示例：

考虑以下代码：

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* original CSS that broke overflow in webkit browsers */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* webkit mask fix */
}

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

<div>

通过合并此修复，圆角现在将有效隐藏 Chrome 和 Opera 中任何溢出的内容，从而实现视觉上干净且响应式的设计。

以上是如何在 Chrome 和 Opera 中用圆角掩盖溢出的内容？的详细内容。更多信息请关注PHP中文网其他相关文章！