Safari で角の丸い部分が正しくないのはなぜですか? 修正するにはどうすればよいですか?

丸い角 (境界線の半径) Safari の問題の説明

CSS を使用して border-radius プロパティで丸い角を作成すると、Safari で予期しない問題が発生する可能性があります。この問題は、画像を境界線のある円に変換しようとする場合に特に顕著です。

Safari では、ブラウザーは要素の境界線ではなく、境界線を含む要素の外側の境界線に基づいて境界線の半径を計算します。

これを説明するために、境界線が 3 ピクセルの画像 (100 ピクセル x 100 ピクセル) を考えます。これにより、要素サイズは 106 ピクセル x になります。 106ピクセル。この要素に 20% の境界半径を追加すると、要素の外側の端から画像が切り取られ、周囲に白い領域が残ります。

この動作は、境界半径の値が高くなると (例: 50)、さらに顕著になります。 %) および境界線の色が白に設定されている場合。

Safari でこの問題を解決するには、画像とコンテナーの両方に border-radius を適用する必要があります。 element:

<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 サイトの他の関連記事を参照してください。