Tout en explorant le marquage génial du support, a trouvé un moyen intéressant de faire de beaux boutons de style de pilule en utilisant Border-rayon: 999em. Cependant, cela a soulevé une question: Pourquoi Border-Rayon: 50% fait un ovale au lieu d'une pilule?
Voici un exemple en direct: http://codepen.io/eefgreenv/pen/ykpba/ < / a>
3 Réponses :
Vous avez une DIV rectangulaire.
dans un, le rayon frontalier arrondit chaque coin 50% de la largeur / hauteur de la div.
en B, frontière-rayon arrondit tous les coins avec le même montant (999em, uniquement par rapport à la taille de la police).
La propriété de la frontière de la frontière effectue tout ce qui est en mesure de manipuler le même rapport entre le rayon général, lorsque vous utilisez mais lorsque vous utilisez Border-rayon: 999EM , il garde les mêmes proportions du plus petit coin.
frontière-rayon: 50% , il rend la bordure réglée sur les proportions de l'objet entier, en supposant que l'axe des x pour 50% de la largeur et de l'axe de Y pour le 50% de la hauteur de l'objet, tous les coins combinés le font apparaître comme si l'objet est circulaire.
Pourcentage dans frontière-rayon est maintenant largement pris en charge. Que le dernier paragraphe et le blockquote devraient être supprimés.
OK, il fait un ovale en utilisant Tout en appliquant CSS Vous avez donc la forme de la pilule. frontière-rayon: 50% car il compte les bordures d'un élément de la direction x et y, ce qui signifie par largeur et hauteur et que vous avez la largeur de 120px et de la hauteur de la hauteur. 60px de sorte qu'il calculille comme cette bordure sur x direction de X signifie 60px et sur Y son rayon de 30px et en combinant qu'il fait un ovale.
Border-rayon: 100px
Ça fait
bordure-top-radius: 100px;
frontière-droite-rythme: 100px;
frontière-bas-droit-rythme: 100px;
frontière-bas-gauche-rayon: 100px;