Maison > interface Web > tutoriel CSS > Pourquoi mes coins arrondis sont-ils incorrects dans Safari et comment puis-je les corriger ?

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

Linda Hamilton
Libérer: 2024-12-18 22:03:12
original
589 Les gens l'ont consulté

Why Are My Rounded Corners Incorrect in Safari, and How Can I Fix Them?

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 :

1

2

3

<div class="activity_rounded">

  <img src="http://placehold.it/100" />

</div>

Copier après la connexion

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

}

Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal