Як межа з 180 пікселів з висотою / шириною> 0 пікс стає колом із радіусом 180 пікселів?
Давайте переформулюємо це у два питання:
Де widthі як heightнасправді застосовуватись?
Давайте подивимося на області типового поля ( джерела ):
Застосовується heightта widthзастосовується лише до вмісту, якщо використовується правильна модель вікна (немає режиму примх, немає старого Internet Explorer).
Куди border-radiusподається заявка?
The border-radiusПоширюється на краю рамки . Якщо немає ні прокладки, ні рамки, це безпосередньо вплине на ваш край вмісту, що призводить до вашого третього прикладу.
Що це означає для нашого кордону-радіуса / кола?
Це означає, що ваші правила CSS призводять до поля, що складається лише з межі. У ваших правилах зазначено, що ця межа повинна мати максимальну ширину 180 пікселів з кожного боку, а з іншого боку, вона повинна мати максимальний радіус однакового розміру:
На малюнку фактичного вмісту вашого елемента (маленької чорної точки) насправді не існує. Якщо ви не застосували жодного, border-radiusви отримаєте зелене поле. border-radiusДає синій коло.
Це стає легше зрозуміти, якщо застосувати border-radius єдиний до двох кутів :
#silly-circle{
width:0; height:0;
border: 180px solid red;
border-top-left-radius: 180px;
border-top-right-radius: 180px;
}
Оскільки у вашому прикладі розмір та радіус усіх кутів / меж рівні, ви отримуєте коло.
Подальші ресурси
Список літератури
Демонстрації
- Відкрийте демонстраційну демонстрацію нижче, де показано, як
border-radiusвпливає кордон (подумайте про внутрішню синю рамку як поле вмісту, про внутрішню чорну облямівку як облямівку, про порожній простір як прокладку та гігантську червону облямівку як, ну, кордон). Перехрестя між внутрішньою рамкою та червоною облямівкою зазвичай впливає на край вмісту.
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>
