Webkit ブラウザでの CSS3 の角丸オーバーフローの問題を修正するにはどうすればよいですか?

CSS3 角丸マスキング オーバーフロー: クロスブラウザー ソリューション

Web デザインの領域では、角丸は不可欠なデザイン要素となっています。 。ただし、親 div に適用すると、Chrome や Opera などの Webkit ベースのブラウザでオーバーフロー コンテンツが公開される可能性があります。この問題は、特に親 div が相対的または絶対的に配置されている場合に発生します。

Webkit/Opera のジレンマ

以下の CSS コードは、Firefox および IE9 で問題なく動作します。このため、Webkit ベースのブラウザでは失敗しますバグ:

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

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

クロスブラウザー ソリューション

幸いなことに、この問題をブラウザー間で解決する賢いソリューションが登場しました:

1. WebKit CSS マスクを追加します: -webkit-mask-image プロパティを単一ピクセルの PNG 画像を持つ親 div に追加します。 CSS 自体に画像を埋め込んで HTTP リクエストを排除します。

更新されたコード:

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

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

このソリューションは、望ましい動作、マスキングを再確立します。 Webkit ベースのブラウザであっても、丸い角の範囲内でコンテンツがオーバーフローすることはありません。ブラウザ固有のバグを効果的に修正し、さまざまなプラットフォーム間で一貫したスタイルを保証します。

以上がWebkit ブラウザでの CSS3 の角丸オーバーフローの問題を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。