Chrome/Opera で CSS3 `border-radius` がオーバーフローする理由とその修正方法は?

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.

改善された解決策

解決策には、#wrapper 要素に WebKit CSS マスクを追加することが含まれます。

#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 のオーバーフローの問題を効果的に解決し、丸い角を維持します。

以上がChrome/Opera で CSS3 `border-radius` がオーバーフローする理由とその修正方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。