Safari で円形の画像がトリミングされるのはなぜですか?どうすれば修正できますか?

Safari の丸い角 (境界線の半径)

特に Safari で円形の画像を作成しようとすると、境界線の半径を使用すると問題が発生することがあります。

Safari では、境界線の半径が割り当てられた画像は、画像自体ではなく要素の外側の境界線から切り取られます。この問題は、画像とは異なる背景色のコンテナ内に画像が存在する場合に顕著になります。

この問題を解決するには、画像をコンテナ内に配置して境界線を画像から分離します。その後、画像とコンテナの両方に境界線の半径を適用します。

<div class="activity_rounded">
  <img src="http://placehold.it/100" />
</div>

.activity_rounded {
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  border: 3px solid #fff;
}

.activity_rounded img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  vertical-align: middle;
}

これにより、画像と境界線の両方の角が丸くなり、Safari で画像の周囲に円の境界線が表示されます。

以上がSafari で円形の画像がトリミングされるのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。