Questo è il CSS:

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

Come produce il cerchio qui sotto?

Supponiamo che se una larghezza del rettangolo è di 180 pixel e l'altezza è di 180 pixel, sembrerebbe così:

Dopo aver applicato il bordo-raggio di 30 pixel, sembrerebbe così:

Il rettangolo sta diventando più piccolo, cioè quasi scompare se la dimensione del raggio aumenta.

Quindi, in che modo un bordo di 180 pixel height/width-> 0pxdiventa un cerchio con un raggio di 180 pixel?

In che modo un bordo di 180 pixel con altezza / larghezza-> 0px diventa un cerchio con un raggio di 180 pixel?

Riformuliamolo in due domande:

Dove fare widtheheight in realtà si applicano?

Diamo un'occhiata alle aree di un tipico riquadro ( fonte ):

Il heightewidth si applicano solo sui contenuti, se il modello casella corretta è in uso (senza quirks mode, nessun vecchio Internet Explorer).

Dove border-radius applica?

Il border-radius applica al limite. Se non c'è né riempimento né bordo, ciò influirà direttamente sul bordo del contenuto, risultando nel terzo esempio.

Cosa significa questo per il nostro raggio-bordo / cerchio?

Ciò significa che le tue regole CSS risultano in una casella che consiste solo di un bordo. Le tue regole affermano che questo bordo dovrebbe avere una larghezza massima di 180 pixel su ogni lato, mentre d'altra parte dovrebbe avere un raggio massimo della stessa dimensione:

Nella foto, il contenuto reale del tuo elemento (il piccolo punto nero) è davvero inesistente. Se non ne hai fatto richiesta, finiresti border-radiuscon la casella verde. Ilborder-radius ti dà il cerchio blu.

Diventa più facile capire se si applica l' border-radius unico a due angoli :

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

Poiché nel tuo esempio le dimensioni e il raggio di tutti gli angoli / bordi sono uguali, ottieni un cerchio.

Ulteriori risorse

Riferimenti

• W3C: CSS Background and Borders Module Level 3 (esp. 5. Rounded Corners )

dimostrazioni

• Apri la demo di seguito, che mostra come border-radiusinfluisce sul bordo (pensa alla casella blu interna come alla casella del contenuto, al bordo nero interno come al bordo dell'imbottitura, allo spazio vuoto come all'imbottitura e al gigantesco bordo rosso come al, beh, confine). Le intersezioni tra la casella interna e il bordo rosso influirebbero generalmente sul bordo del contenuto.

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>

dimostrazione

Esaminiamo la domanda in un altro modo con questa dimostrazione illustrata:

Vediamo prima come viene prodotto il raggio di confine?

Per produrre il raggio ci vogliono due lati del suo bordo. Se imposti il ​​raggio del bordo su 50 pixel, occorrerebbero 25 pixel da un lato e 25 pixel da un altro lato.

E prendendo 25 pixel da ogni lato produrrebbe in questo modo:

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

Ora vedi quanto può richiedere al massimo un quadrato per applicare su un angolo?

Può richiedere fino a 180 pixel dall'alto e 180 pixel da destra. Quindi produrrebbe così:

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

E vedi come si produce se impostiamo un valore non uguale di raggio?

Supponiamo che se si applica il raggio del bordo solo a due angoli in modo diseguale:

• angolo in alto a destra a 180 pixel

• angolo inferiore destro a 100 pixel

Quindi ci vorrebbe

• in alto a destra: 90 pixel dall'alto e 90 pixel da destra

• in basso a destra: 50 pixel da destra e 50 pixel da sotto

Quindi produrrebbe così

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

Quanto massimo del suo bordo può richiedere il quadrato da applicare su tutti i lati? E vedi come produce un cerchio?

Può richiedere fino a metà della dimensione del bordo, ovvero 180 pixel / 2 = 90 pixel. Quindi produrrebbe un cerchio come questo

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

Perché è necessaria solo la metà del quadrato per applicare su tutti i lati?

Perché tutti gli angoli devono impostare il loro valore di raggio allo stesso modo.

Prendendo parti uguali del suo bordo, produce un cerchio.

I bordi sono la casella esterna di qualsiasi contenuto e se si applica il raggio su di esso, produrrà semplicemente il bordo circolare.

Penso che inizialmente crei un rettangolo con height and width = 180pxe poi crei una curva con un raggio dato come 30pxcon ogni angolo. Quindi inizia bordercon dato radius.

Entrambi .ae.b daranno l'output identico.

D. Perché l'ho usato width: 360px; height: 360px; ?

A. border: 180px solid red;in .aopere comeborder-width: 180px 180px 180px 180px; /* Top Right Bottom Left */ .

Spero che questo violino ti aiuti a capire il concetto.

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