Pourcentages par rapport aux pixels/Ems pour « border-radius » : quelle est la différence ?

Pourcentages de bordure-radius par rapport aux pixels et Ems

La propriété border-radius est utilisée pour définir les coins arrondis d'un élément . Il prend deux valeurs, représentant les rayons horizontal et vertical d'une courbe elliptique. Le comportement du rayon de bordure diffère selon que des pourcentages ou des pixels/ems sont utilisés comme unités.

Pourcentages

Conformément aux spécifications du W3C, lorsque les pourcentages sont utilisés pour border-radius, ils font référence à la dimension correspondante de la zone de bordure. Cela signifie :

• Le rayon horizontal est 50 % de la largeur de l'élément.
• Le rayon vertical est 50 % de la hauteur de l'élément.

Ceci donne une forme elliptique où les deux rayons sont proportionnels à la taille du element.

Pixels et Ems

D'un autre côté, l'utilisation d'une seule valeur autre qu'un pourcentage (telle que pixels ou ems) pour le rayon de bordure sera toujours résultat en un cercle. En effet, le même rayon est appliqué aux axes horizontal et vertical.

Dans votre exemple avec border-radius : 999px, les rayons du cercle devraient théoriquement être de 999px. Cependant, une règle supplémentaire est appliquée pour éviter le chevauchement des courbes, réduisant ainsi le rayon à la moitié de la taille du plus petit côté de l'élément. Ainsi, le rayon dans ce cas devient 50px.

Comparaison entre le rayon de bordure en pourcentage et sans pourcentage

Pour les éléments de tailles fixes, comme dans votre exemple , vous pouvez obtenir des résultats similaires en utilisant à la fois des pourcentages et des pixels. Dans votre cas, border-radius : 50 % ; équivaut à border-radius : 115px/50px ; (50% des deux côtés).

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!