為什麼 CSS3 `border-radius` 在 Chrome/Opera 中溢出，如何修復？

如何解決Chrome/Opera 中CSS3 圓角溢位問題

在某些情況下，使用CSS3 的b-order-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中文網其他相關文章！