如何在 Chrome 和 Opera 中用圓角掩蓋溢出的內容？

在Chrome 和Opera 中用圓角隱藏溢出

問題：

問題：

問題：

問題：

問能創建一個帶有圓角的父div，成功屏蔽其子級的內容，同時在Chrome中保持正確的溢出行為Opera？

Webkit 與Overflow: Hidden 不相容

在Firefox 和IE9 等瀏覽器中，對帶有圓角的父div 應用「overflow:hidden」可以有效地隱藏任何圓角元素。內容溢出。但是，在基於 webkit 的瀏覽器（Chrome、Safari）和 Opera 中，當父 div 相對或絕對定位時，此方法會失敗。

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

解決方案：WebKit Mask

另一個解決方案是在父 div 上使用 webkit 遮罩。這種方法掩蓋了圓角之外的區域，有效地隱藏了任何溢出的內容。

實作：

#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>

要實現此解決方案，請將以下CSS 新增至父div：

此CSS屬性引用單像素透明PNG圖像，可以直接包含在CSS中以避免額外的HTTP 請求。 例如：考慮以下程式碼：透過合併此修復，圓角現在將有效隱藏中任何溢出的內容，從而實現視覺上乾淨且響應式的設計。

以上是如何在 Chrome 和 Opera 中用圓角掩蓋溢出的內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！