Pixel et pourcentage dans CSS `border-radius` : en quoi diffèrent-ils ?

Border-radius : Pixel or Percentage?

Lorsque vous utilisez CSS pour définir le rayon de bordure d'un élément, vous remarquerez peut-être que la forme résultante diffère selon que vous utilisez une valeur en pixel ou en pourcentage. Dans cet article, nous verrons pourquoi cela se produit et explorerons les implications pour vos conceptions.

Border-radius Property

La bordure La propriété radius spécifie les courbes aux coins d'un élément. Il accepte deux valeurs, représentant les rayons sur les axes X et Y du quart d'ellipse définissant la forme du coin.

Valeurs en pourcentage

Selon selon les spécifications du W3C, les valeurs en pourcentage pour border-radius font référence à la largeur et à la hauteur de la bordure de l'élément box.

Par exemple, border-radius : 50 % ; définit les rayons comme suit :

• Rayon de l'axe X : 50 % de la largeur du conteneur

< ;li>Rayon de l'axe Y : 50 % de la hauteur du conteneur

Il en résulte une forme elliptique avec des rayons égaux sur les deux axes.

Pixel et Autre Unités

L'utilisation de toute unité autre qu'un pourcentage (par exemple, pixels, em, unités de fenêtre) produira une ellipse avec des rayons égaux, créant ainsi un cercle.

Cependant, si le cercle résultant chevauche la bordure de l'élément, une règle différente est appliquée. Les rayons sont réduits à la moitié de la taille du plus petit côté de l'élément. Cela garantit que les courbes ne s'étendent pas au-delà des limites de l'élément.

Dans votre exemple :

 background : sarcelle ;<br> border-radius : 999px;<br> largeur : 230px;<br> hauteur : 100px;<br> ...<br>}

<p></div></p>
<p><p>Le rayon-bordure : 999px ; produirait un cercle. Cependant, comme le cercle chevauche la hauteur de l'élément, les rayons sont ajustés à 50 px, soit la moitié de la hauteur.</p><br><p>Pour cet élément, vous pouvez obtenir le même résultat en utilisant à la fois des pixels et des pourcentages, car 50 % de la largeur et de la hauteur équivaut à 115px/50px :</p></p>
<p><div><div class="snippet-code"><br><pre class="brush:php;toolbar:false"> rayon de bordure : 50 % ;<br>}<br>.pixels {<br> border-radius : 115px/50px;<br>}<br>/<em> ... </em>/

<div class="pixels">border-radius : 115px/50px;</div>