Pourquoi mes images circulaires apparaissent-elles rognées dans Safari et comment puis-je y remédier ?

Problème de coins arrondis (rayon de bordure) dans Safari

Les utilisateurs de Safari peuvent rencontrer un comportement particulier lorsqu'ils tentent de créer des images circulaires à l'aide de la bordure. propriété de rayon. Ce problème provient de l'interprétation unique de Safari de l'arrondi des bordures, qui diffère des autres navigateurs.

Explication du problème :

Lors de l'application d'une bordure à un élément, Safari étend l'espace de l'élément. dimensions pour s’adapter à la largeur de bordure ajoutée. Cette expansion a également un impact sur l'application des coins arrondis, les obligeant à être rognés à partir de la limite extérieure de l'élément, et non à partir de l'image contenue.

Solution :

Pour surmonter Pour résoudre ce problème, il est crucial de séparer la bordure de l'image en plaçant l'image dans un conteneur. Ce faisant, vous pouvez appliquer un rayon de bordure à la fois au conteneur et à l'image, garantissant une forme circulaire cohérente.

Exemple de code :

<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;
}

En employant cette technique, vous pouvez créer des images avec des bordures circulaires qui s'affichent correctement dans Safari et maintiennent l'uniformité entre les différents navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!