Comment ce CSS produit-il un cercle ?

Question

Voici le CSS :

div {
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}

Comment cela produit-il le cercle ci-dessous ?

Supposons qu'un rectangle ait une largeur de 180 pixels et une hauteur de 180 pixels, il apparaîtra comme suit :

Après avoir appliqué un rayon de bordure de 30 pixels, il apparaîtrait comme suit :

Le rectangle devient plus petit, c'est-à-dire qu'il va presque disparaître si la taille du rayon augmente.

Alors, comment une bordure de 180 pixels avec height/width-> 0px devient un cercle avec un rayon de 180 pixels ?

Answer 1

Comment border 180px avec height/width-> 0px devient un cercle dont le rayon est de 180px ?

Reformulons cela en deux questions :

Où est-ce que width et height s'appliquent réellement ?

Examinons les zones d'une boîte typique ( source ) :

Le site height et width ne s'appliquent que sur le contenu, si le modèle de boîte correct est utilisé (pas de mode quirks, pas de vieux Internet Explorer).

Où se trouve border-radius appliquer ?

Le site border-radius s'applique au bord de la bordure. S'il n'y a ni rembourrage ni bordure, cela affectera directement le bord du contenu, ce qui donne votre troisième exemple.

Qu'est-ce que cela signifie pour notre rayon/cercle de bordure ?

Cela signifie que vos règles CSS se traduisent par une boîte constituée uniquement d'une bordure. Vos règles stipulent que cette bordure doit avoir une largeur maximale de 180 pixels de chaque côté, tandis que d'autre part, elle doit avoir un rayon maximal de la même taille :

Sur l'image, le contenu réel de votre élément (le petit point noir) est vraiment inexistant. Si vous n'avez pas appliqué de border-radius vous vous retrouveriez avec la boîte verte. Le site border-radius vous donne le cercle bleu.

C'est plus facile à comprendre si vous appliquez le border-radius seulement à deux coins :

#silly-circle{
    width:0; height:0;
    border: 180px solid red;
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
}

Étant donné que, dans votre exemple, la taille et le rayon de tous les coins/bords sont égaux, vous obtenez un cercle.

Autres ressources

Références

• W3C : Module Fond et Bordures CSS Niveau 3 (esp. 5. Coins arrondis )

Démonstrations

• Démonstration JavaScript qui montre comment le border-radius affecte la bordure (considérez la boîte bleue intérieure comme la boîte de contenu, la bordure noire intérieure comme la bordure de remplissage, l'espace vide comme le remplissage et la bordure rouge géante comme la, eh bien, bordure). Les intersections entre le cadre intérieur et la bordure rouge affectent généralement le bord du contenu.

Notez que vous avez besoin d'un navigateur qui supporte border-radius sans le préfixe du fournisseur.

Answer 2

Démo

Examinons la question d'une autre manière avec cette démonstration en images :

Voyons d'abord comment le rayon de la frontière est produit ?

Pour produire du rayon, il faut deux côtés de sa frontière. Si vous définissez border-radius à 50 pixels, il prendra 25 pixels d'un côté et 25 pixels de l'autre côté.

Et en prenant 25 pixels de chaque côté, cela donnerait ceci :

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 50px 0 0;
}

Maintenant, voyez combien il faut au maximum de carrés à appliquer sur un coin ?

Il peut prendre jusqu'à 180 pixels en haut et 180 pixels à droite. Dans ce cas, le résultat serait le suivant :

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 0 0;
}

Et voyez ce que cela donne si nous définissons une valeur non égale du rayon ?

Supposons que vous appliquiez le rayon de la bordure uniquement à deux coins de manière inégale :

• coin supérieur droit à 180 pixels

• le coin inférieur droit à 100 pixels

Alors il faudrait

• haut-droit : 90 pixels du haut et 90 pixels de la droite

• bas-droit : 50 pixels à partir de la droite et 50 pixels à partir du bas.

Le résultat serait alors le suivant

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 100px 0;
}

Quelle quantité maximale de son bord peut-elle prendre de carré à appliquer sur tous les côtés ? Et voir comment cela produit un cercle ?

Il peut prendre jusqu'à la moitié de la taille de la bordure, c'est-à-dire 180 pixels / 2 = 90 pixels. Il produirait alors un cercle comme celui-ci

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 180px;
}

Pourquoi faut-il seulement la moitié du carré pour l'appliquer sur tous les côtés ?

Parce que tous les coins doivent définir leur valeur de rayon de la même manière.

En prenant des parties égales de son bord, il produit un cercle.

Answer 3

Je pense qu'il crée initialement un rectangle avec height and width = 180px et ensuite faire une courbe avec un rayon donné comme 30px à chaque coin. Ainsi, il fixe border avec un radius .

Answer 4

Les bordures sont le cadre extérieur de tout contenu et si vous leur appliquez un rayon, cela produira simplement un bord circulaire.

Answer 5

Les deux sites .a et .b donnera le même résultat.

Q. Pourquoi ai-je utilisé width: 360px; height: 360px; ?

A. border: 180px solid red; sur .a fonctionne comme border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */ .

Espoir ce violon vous aide à comprendre le concept.

.a{
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}
.b{
    background:red;
    width: 360px;
    height: 360px;
    border-radius: 180px;
}