Voici le CSS:

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

Comment produit-il le cercle ci-dessous?

Supposons que si une largeur de rectangle est de 180 pixels et une hauteur de 180 pixels, elle apparaîtra ainsi:

Après avoir appliqué un rayon de bordure de 30 pixels, cela ressemblerait à ceci:

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 height/width-> 0pxdevient-elle un cercle avec un rayon de 180 pixels?

Comment une bordure de 180 pixels avec une hauteur / largeur-> 0px devient-elle un cercle avec un rayon de 180 pixels?

Reformulons cela en deux questions:

Où widthpuis- je heightpostuler?

Jetons un coup d'œil aux zones d'une boîte typique ( source ):

Le heightet widths'appliquent uniquement au contenu, si le modèle de boîte correct est utilisé (pas de mode excentrique, pas d'ancien Internet Explorer).

Où border-radiuss'applique?

Le border-radiuss'applique sur la bordure. S'il n'y a ni remplissage ni bordure, cela affectera directement votre bord de contenu, ce qui donne votre troisième exemple.

Qu'est-ce que cela signifie pour notre rayon / cercle frontière?

Cela signifie que vos règles CSS aboutissent à une boîte qui se compose 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'un autre côté, elle doit avoir un rayon maximum de la même taille:

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

Il est plus facile à comprendre si vous appliquez le border-radius seul aux 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 / bordures sont égaux, vous obtenez un cercle.

Autres ressources

Références

• W3C: Module Arrière-plans et bordures CSS niveau 3 (en particulier 5. coins arrondis )

Démonstrations

• Veuillez ouvrir la démo ci-dessous, qui montre comment la border-radiusaffecte la bordure (pensez à la boîte bleue intérieure comme boîte de contenu, la bordure noire intérieure comme bordure de rembourrage, l'espace vide comme rembourrage et la bordure rouge géante comme, eh bien, frontière). Les intersections entre la boîte intérieure et la bordure rouge affectent généralement le bord du contenu.

var all = $('#TopLeft, #TopRight, #BottomRight, #BottomLeft');

all.on('change keyup', function() {
  $('#box').css('border' + this.id + 'Radius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
});

$('#total').on('change keyup', function() {
  $('#box').css('borderRadius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
  all.val(this.value);
  all.each(function(){$('#' + this.id + 'Text').val(this.value + "%");})
});

#box {
  margin:auto;
  width: 32px;
  height: 32px;
  border: 100px solid red;
  padding: 32px;
  transition: border-radius 1s ease;
  -moz-transition: border-radius 1s ease;
  -webkit-transition: border-radius 1s ease;
  -o-transition: border-radius 1s ease;
  -ms-transition: border-radius 1s ease;
}
#chooser{margin:auto;}
#innerBox {
  width: 100%;
  height: 100%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div id="innerBox"></div>
</div>
<table id="chooser">    
  <tr>
    <td><label for="total">Total</label></td>
    <td><input id="total" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="totalText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopLeft">Top-Left</label></td>
    <td><input id="TopLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopLeftText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopRight">Top right</label></td>
    <td><input id="TopRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomRight">Bottom right</label></td>
    <td><input id="BottomRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomLeft">Bottom left</label></td>
    <td><input id="BottomLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomLeftText" value="0" type="text" /></td>
  </tr>
  <caption><code>border-radius</code> values. All values are in percent.</caption>
</table>
<p>This demo uses a box with a <code>width/height</code> of 32px, a <code>padding</code> of 32px, and a <code>border</code> of 100px.</p>

Démo

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

Voyons d'abord comment le rayon de bordure est produit?

Pour produire un rayon, il prend deux côtés de sa bordure. Si vous définissez border-radius à 50 pixels, cela prendrait 25 pixels d'un côté et 25 pixels d'un autre côté.

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

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

Maintenant, voyez combien cela peut prendre un maximum de carré pour appliquer sur un coin?

Il peut prendre jusqu'à 180 pixels du haut et 180 pixels de la droite. Ensuite, cela produirait comme ceci:

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

Et voyez comment cela produit-il si nous définissons une valeur de rayon non égale?

Supposons que si vous appliquez le rayon de bordure uniquement aux deux coins de manière inégale:

• coin supérieur droit à 180 pixels

• coin inférieur droit à 100 pixels

Ensuite, il faudrait

• en haut à droite: 90 pixels en haut et 90 pixels en partant de la droite

• en bas à droite: 50 pixels à partir de la droite et 50 pixels à partir du bas

Ensuite, cela produirait comme ça

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

Combien maximum de sa bordure peut-il prendre de carré à appliquer sur tous les côtés? Et voyez comment cela produit un cercle?

Cela peut prendre jusqu'à la moitié de la taille de la bordure, c'est-à-dire 180 pixels / 2 = 90 pixels. Ensuite, cela produirait 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 appliquer sur tous les côtés?

Parce que tous les coins doivent définir leur valeur de rayon également.

Prenant des parties égales de sa bordure, il produit un cercle.

Les bordures sont la boîte extérieure de tout contenu et si vous lui appliquez un rayon, cela produira simplement le bord circulaire.

Je pense qu'il crée initialement un rectangle avec height and width = 180pxpuis fait une courbe avec un rayon donné comme 30pxavec chaque coin. Donc, ça part borderavec donné radius.

Les deux .aet .bdonneront la sortie identique.

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

A. border: 180px solid red;dans des .aœuvres comme border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

J'espère que ce violon vous aidera à 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;
}