Chrome と Opera でオーバーフローするコンテンツを角丸でマスクする方法

Chrome と Opera で角の丸いオーバーフローを非表示にする

質問:

どうすればできますかChrome での適切なオーバーフロー動作を維持しながら、子のコンテンツをうまくマスクする角の丸い親 div を作成します。 Opera?

Webkit と Overflow: Hidden の非互換性

Firefox や IE9 などのブラウザでは、角の丸い親 div に「overflow: hidden」を適用すると、効果的にすべての要素が非表示になります。溢れ出るコンテンツ。ただし、WebKit ベースのブラウザ (Chrome、Safari) および Opera では、親 div が相対的または絶対的に配置されている場合、このアプローチは失敗します。

解決策: WebKit Mask

別の解決策には、親 div で Webkit マスクを使用することが含まれます。この方法では、丸い角の外側の領域がマスクされ、あふれたコンテンツが効果的に隠されます。

実装:

このソリューションを実装するには、次の CSS を親 div に追加します。

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

この CSS プロパティは、直接含めることができる単一ピクセルの透明な PNG 画像を参照します。追加の HTTP リクエストを避けるために CSS に追加します。

例:

次のコードを考えてみましょう:

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

これを組み込むことで、修正により、丸い角が Chrome と Opera のあふれたコンテンツを効果的に隠し、視覚的にクリーンで応答性の高いコンテンツを実現します。デザイン。

以上がChrome と Opera でオーバーフローするコンテンツを角丸でマスクする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。