Pourquoi les images circulaires sont-elles recadrées dans Safari et comment puis-je y remédier ?

Coins arrondis (rayon de bordure) dans Safari

On peut rencontrer des problèmes lors de l'utilisation du rayon de bordure, en particulier dans Safari, lorsque l'on essaie de créer des images circulaires.

Dans Safari, une image affectée d'un rayon de bordure est recadrée à partir de la limite extérieure de l'élément plutôt qu'à partir de l'image elle-même. Cela devient évident lorsque l'image se trouve dans un conteneur avec une couleur d'arrière-plan différente de celle de l'image.

Pour résoudre ce problème, séparez la bordure de l'image en plaçant l'image à l'intérieur d'un conteneur. Ensuite, appliquez un rayon de bordure à l'image et au conteneur.

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

Cela garantit que l'image et la bordure ont des coins arrondis, ce qui donne 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!