Pourquoi mes coins arrondis sont-ils incorrects dans Safari et comment puis-je les corriger ?

Coins arrondis (radius de bordure) Problème Safari expliqué

Lors de l'utilisation de CSS pour créer des coins arrondis avec la propriété border-radius, un problème inattendu peut survenir dans Safari. Ce problème est particulièrement évident lorsque l'on tente de transformer une image en cercle avec une bordure.

Dans Safari, le navigateur calcule le rayon de la bordure en fonction de la limite extérieure de l'élément, y compris les éventuelles bordures, plutôt que sur la image elle-même.

Pour illustrer cela, considérons une image (100px x 100px) avec une bordure de 3px, ce qui donne une taille d'élément de 106px x 106px. L'ajout d'un rayon de bordure de 20 % à cet élément recadre l'image à partir du bord extérieur de l'élément, laissant une zone blanche autour de lui.

Ce comportement devient encore plus apparent à des valeurs de rayon de bordure plus élevées (par exemple, 50 % %) et lorsque la couleur de la bordure est définie sur blanc.

Pour résoudre ce problème dans Safari, il est nécessaire d'appliquer border-radius à la fois à l'image et au conteneur 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;
}

Cette séparation garantit que le rayon de bordure est appliqué correctement à la fois à l'image et à l'élément environnant, ce qui entraîne une bordure circulaire autour de l'image dans Safari.

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!