Safari で円形の画像が切り取られて表示されるのはなぜですか? どうすれば修正できますか?

Safari での角丸 (境界線の半径) の問題

Safari ユーザーが境界線を使用して円形の画像を作成しようとすると、奇妙な動作が発生する可能性があります。半径プロパティ。この問題は、枠線の丸めに関する Safari の独自の解釈に起因しており、他のブラウザとは異なります。

問題の説明:

要素に枠線を適用すると、Safari は要素の枠線を拡大します。追加された境界線の幅に対応する寸法。この拡張は丸い角の適用にも影響し、含まれる画像からではなく、要素の外側の境界から角が切り取られます。

解決策:

解決するにはこの問題を解決するには、コンテナ内に画像を配置して境界線を画像から分離することが重要です。そうすることで、コンテナと画像の両方に境界線の半径を適用し、一貫した円形を確保できます。

コード例:

<div class="activity_rounded"><img src="image.jpg" /></div>

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

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

この手法を採用すると、Safari で正しく表示され、異なるブラウザ間で均一性を維持できる円形の境界線を持つ画像を作成できます。

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