Border-radius en pourcentage (%) et en pixels (px) ou em

Si j'utilise un d'un pixel ou d'em de la valeur pour border-radius, le rayon du bord est toujours un arc de cercle ou un forme de gélule même si la valeur est plus grande que le plus grand côté de l'élément.

Lorsque j'utilise pourcentages, le rayon du bord est de forme elliptique et commence au milieu de chaque côté de l'élément résultant en une ovale ou en forme d'ellipse :

Valeur de Pixel pour border-radius :

CSS:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

HTML:

<div>border-radius:999px;</div>

Pour cent de la valeur pour border-radius :

CSS:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

HTML:

<div>border-radius:50%;</div>

Pourquoi ne pas la frontière de rayon dans les pourcentages d'agir de la même manière que border-radius ensemble avec un pixel ou d'un em valeurs?

InformationsquelleAutor web-tiki | 2015-04-30

147

Border-radius :

Tout d'abord, vous devez comprendre que le border-radius de la propriété prend 2 valeurs. Ces valeurs sont les rayons sur l'axe X/Y d'un quart d'ellipse définir la forme de coin.

Si une des valeurs est définie, alors la deuxième valeur est égale à la première. Donc border-radius: x est équivalent à border-radius:x/x;.

Pourcentages des valeurs

Se référant aux spécifications du W3C : CSS Milieux et des Frontières au Niveau du Module 3 border-radius de la propriété c'est ce qu'on peut lire concernant les valeurs en pourcentage:

Pourcentages: se Référer à la dimension correspondante de la zone de bordure.

Donc border-radius:50%; définit la raddi de l'ellipse de cette façon :
- les rayons sur la de l'axe X est de 50% des conteneurs largeur
- les rayons sur la axe Y est de 50% des conteneurs hauteur
Pixel et d'autres unités

À l'aide de une valeur autre qu'un pourcentage de la frontière, rayon (em, en, fenêtre d'affichage unités, cm...) entraînera toujours une ellipse avec la même X/Y les rayons. En d'autres termes, un cercle.

Lorsque vous définissez border-radius:999px; le rayon du cercle doit être 999px. Mais un autre la règle est appliquée lorsque les courbes se chevauchent réduire le rayon du cercle à la moitié de la taille du plus petit côté. Donc dans votre exemple, il est égal à la moitié de la hauteur de l'élément : 50px.

Pour cet exemple (avec une taille fixe de l'élément), vous pouvez obtenir le même résultat avec les deux px et les pourcentages. Que l'élément est 230px x 100px, border-radius: 50%; est équivalent à border-radius:115px/50px; (50% des deux côtés) :

CSS:
```
div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}
```
HTML:
```
<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>
```
- Excellente réponse. Il est dommage que le pourcentage des valeurs de rayon sont calculés séparément pour la largeur et la hauteur. Cela signifie que je ne peux pas obtenir circulaire coins de l'échelle avec la taille de l'objet, sans connaître le ratio d'aspect de l'objet. Ne serait-il pas agréable si le pourcentage appliqué à la plus grande des objets de dimensions?
- Ce n'est pas vrai. Comme l'OP dit, vous pouvez tout simplement utiliser border-radius: 999px;. De cette façon, vous obtenez votre circulaire coins et être sûr qu'ils à l'échelle de votre élément
- Mais je ne pourrais pas envie semi-circulaire se termine à la boîte. J'aimerais être capable de spécifier x-rayon de, disons, 10% de la largeur et y-rayon égal à x-rayon.
- Hey, avez-vous fait d'autres auto répondu à ce poste ? Je vous remercie de la lecture de ceux-ci.
- Mais ce qui fonctionne réellement avec le pourcentage est de: border-radius: 50%/100% (Testé dans Chrome 60 + 61)
- 50%/100% fonctionne sur Firefox aussi! J'ai testé sur Firefox 58.
- Vous pouvez utiliser vw ou vh au lieu de pourcentage en essayant de se référer à un pour cent de la largeur ou de la hauteur respectivement.
InformationsquelleAutor web-tiki
4

Juste diviser la première valeur par la % vous voulez.. donc si vous voulez un border-rayon de 50%, écrire:
```
border-radius: 25%/50%; 
```
ou un autre exemple:
```
border-radius: 15%/30%;
```
Vous pouvez facilement faire le calcul en js ou SASS.
- N'est-ce pas que seulement 25% de la largeur et de 50% de la hauteur? Ce n'est pas la même chose que 50% de la hauteur dans les deux directions X et Y.
InformationsquelleAutor CyberJ
0

N'est pas une véritable réponse à la question, mais de la convivialité des conseils pour quelqu'un qui pourrait tomber sur ça:

Si vous souhaitez utiliser une unité relative, mais ne veulent pas le vélo elliptique comportement de % vous pouvez toujours utiliser em ou rem. E. g. border-readius: 1em;

InformationsquelleAutor Raven

Vous devez vous connecter pour publier un commentaire.

Border-radius :

Pourcentages des valeurs

Pixel et d'autres unités