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 width
eheight
in realtà si applicano?
Diamo un'occhiata alle aree di un tipico riquadro ( fonte ):
Il height
ewidth
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-radius
con 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
dimostrazioni
- Apri la demo di seguito, che mostra come
border-radius
influisce 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>