Pourquoi « border-radius » se comporte-t-il différemment avec les pixels et les pourcentages ?

Border-Radius Discrepancy

Le comportement de la propriété border-radius diffère selon que des valeurs en pixels ou en pourcentage sont utilisées.

Pixel et EM Valeurs

Lors de l'utilisation de valeurs de pixel ou EM, le rayon de bordure crée un arc de cercle ou une forme de pilule. En effet, une seule valeur est spécifiée ; les rayons horizontal et vertical sont donc égaux. Si la valeur spécifiée dépasse la taille de l'élément, les rayons sont réduits à la moitié de la taille du plus petit côté.

Valeurs en pourcentage

En revanche, lorsque des valeurs en pourcentage sont utilisées, le rayon de bordure crée une forme ovale ou elliptique. En effet, le pourcentage fait référence à la dimension correspondante de la zone de bordure. Par exemple, border-radius : 50 % définit le rayon horizontal à 50 % de la largeur de l'élément et le rayon vertical à 50 % de la hauteur de l'élément.

Pour obtenir une forme circulaire avec des valeurs en pourcentage, deux valeurs doivent être spécifié, représentant les rayons horizontal et vertical. Par exemple, border-radius : 50%/25% crée un cercle avec un rayon horizontal de 50 % de la largeur de l'élément et un rayon vertical de 25 % de la hauteur de l'élément.

Cette différence provient du W3C spécifications, qui indiquent que les valeurs en pourcentage pour le rayon de bordure se réfèrent à la dimension correspondante de la zone de bordure.

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!