Pourquoi mes images sont-elles recadrées lors de l'utilisation de « border-radius » dans Safari ?

Problème des coins arrondis de Safari

Lors de l'utilisation du rayon de bordure pour créer des coins arrondis sur les images, Safari peut présenter un comportement erratique. En effet, le moteur de rendu du navigateur prend en compte à la fois l'image et toute bordure environnante dans le calcul des coins arrondis, ce qui entraîne un recadrage indésirable.

Comprendre le problème

Voyons illustrez le problème en utilisant une image de 100 px x 100 px. L'ajout d'une bordure de 3 px augmente les dimensions de l'élément à 106 px x 106 px. Désormais, l'application d'un rayon de bordure de 20 % entraîne le recadrage des coins à partir de la limite extérieure de l'élément plutôt que de l'image elle-même.

Solution : Séparer l'image et la bordure

Pour résoudre ce problème dans Safari, nous devons nous assurer que l'image et la bordure ont des coins arrondis. Une façon d'y parvenir consiste à séparer la bordure de l'image à l'aide d'un élément conteneur, en appliquant border-radius à la fois au conteneur et à l'image.

Exemple

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

Cette approche garantit que l'image et la bordure ont des coins arrondis, ce qui donne un apparence cohérente sur tous les 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!