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>

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!

css define if for using class Property this border viewport background ul li Other

Déclaration：

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