WebKit と Opera で「overflow: hidden」の丸い角が失敗するのはなぜですか? どうすれば修正できますか?

WebKit および Opera の CSS3 角丸によるオーバーフロー非表示の問題への対処

角丸の下のコンテンツをマスクするには、多くの場合、overflow: hidden プロパティを使用します。ただし、この手法は、親要素が相対的または絶対的に配置されている場合、WebKit ベースのブラウザー (Chrome を含む) および Opera で誤動作する可能性があります。

問題:

この問題については、次のコードを検討してください。

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

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

この場合、#wrapper div は絶対位置に配置され、角が丸くなっています。ただし、#box div のコンテンツは、WebKit ベースのブラウザーや Opera では丸い角の外側にはみ出します。

解決策: WebKit CSS マスク

この問題に対処する代替ソリューション#wrapper 要素に WebKit CSS マスクを使用することです。これには、単一ピクセルの PNG 画像をマスクとして使用することが含まれます。

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

この手法は、WebKit ベースのブラウザーと Opera でオーバーフローを隠すことに成功し、丸い角によって子要素のコンテンツを効果的にマスクできるようになります。

以上がWebKit と Opera で「overflow: hidden」の丸い角が失敗するのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。