Safari で「border-radius」を使用すると画像がトリミングされるのはなぜですか?

Safari の角が丸い問題

border-radius を使用して画像に丸い角を作成すると、Safari で不安定な動作が発生することがあります。これは、ブラウザのレンダリング エンジンが角丸の計算で画像と周囲の境界線の両方を考慮し、望ましくないトリミングが発生するためです。

問題を理解する

見てみましょう100px x 100px の画像を使用して問題を説明します。 3 ピクセルの境界線を追加すると、要素の寸法が 106 ピクセル x 106 ピクセルに増加します。現在、20% の境界線の半径を適用すると、画像自体ではなく要素の外側の境界線から角が切り取られます。

解決策: 画像と境界線を分離する

Safari でこの問題を解決するには、画像と境界線の両方の角が丸いことを確認する必要があります。これを実現する 1 つの方法は、コンテナ要素を使用して境界線を画像から分離し、コンテナと画像の両方に border-radius を適用することです。

Example

< ;div>

CSS:

.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 で「border-radius」を使用すると画像がトリミングされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。