Pourquoi « border-radius » produit-il différentes formes avec des pourcentages par rapport aux pixels/ems ?

Border-Radius en pixels (%) et pixels (px) ou Em

Pourquoi Border-Radius Agir différemment avec les pourcentages et Pixels?

Border-radius vous permet d'arrondir les coins de vos éléments Web. Cependant, lorsque vous utilisez des pourcentages ou des pixels, la forme des coins change.

Valeurs en pourcentage

Selon le module CSS Backgrounds and Borders niveau 3, les pourcentages font référence à la dimension correspondante de la zone de bordure. Par exemple, si vous définissez border-radius: 50%;, les rayons sur l'axe X sont 50 % de la largeur du conteneur et les rayons sur l'axe Y sont 50 % de la hauteur du conteneur. Cela donne une forme elliptique.

Pixels et autres valeurs unitaires

Utilisation d'une seule valeur de pixel ou d'une autre unité (par exemple, em, in) pour la bordure- le rayon produit toujours une ellipse, ou en d'autres termes, un cercle.

Cependant, lorsque le les courbes se chevauchent, une règle est appliquée qui réduit les rayons à la moitié de la taille du plus petit côté. Par exemple, si vous définissez border-radius: 999px; sur un élément de 230 px x 100 px, les rayons seraient réduits à 50 px, soit la moitié de la hauteur de l'élément.

Example

Considérez ce qui suit extrait de code :

.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

/* For the demo : */
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;
  text-align: center;
}

Avec border-radius : 50% ; les coins auront une forme elliptique. Avec border-radius : 115px/50px;, les coins auront la même forme elliptique puisque 115px/50px équivaut à 50% des deux côtés pour un élément qui fait 230px x 100px.

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!