Как этот CSS создает круг?

Это CSS:

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

Как это сделать круг ниже?

Предположим, если ширина прямоугольника равна 180 пикселям, а высота - 180 пикселей, то она будет выглядеть так:

После применения граничного радиуса 30 пикселей он будет выглядеть следующим образом:

Прямоугольник становится меньше, то есть почти исчезает, если размер радиуса увеличивается.

Итак, как граница 180 пикселей с height/width-> 0px становится кругом с радиусом 180 пикселей?

Ответ 1

Как граница 180 пикселей с высотой/шириной → 0px становится кругом с радиусом 180 пикселей?

Переформулируйте это на два вопроса:

Где применяются `width` и `height`?

Посмотрим на области типичного окна (источник):

height и width применяются только к содержимому, если используется правильная модель окна (нет режима quirks, нет старого Internet Explorer).

Где применяется `border-radius`?

border-radius применяется к границе. Если нет ни заполнения, ни границы, это напрямую повлияет на ваш край содержимого, что приведет к третьему примеру.

Что это значит для нашего border-radius/circle?

Это означает, что ваши правила 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;
}

Так как в вашем примере размер и радиус для всех углов/границ равны, вы получаете круг.

Дополнительные ресурсы

Ссылки

W3C: CSS Backgrounds and Borders Module Level 3 (особенно 5 Rounded Corners)

Демонстрации

Пожалуйста, откройте демонстрационную версию ниже, в которой показано, как 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>

Ответ 2

Демо

Давайте рассмотрим вопрос по-другому с демонстрацией этого изображения:

Посмотрите сначала, как создается радиус границы?

Чтобы создать радиус, он принимает две стороны границы. Если вы установите граничный радиус на 50 пикселей, это займет 25 пикселей с одной стороны и 25 пикселей с другой стороны.

И, взяв по 25 пикселей с каждой стороны, он будет выглядеть следующим образом:

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

Теперь посмотрим, сколько может потребоваться максимум квадрата для применения на одном углу?

Он может занимать до 180 пикселей сверху и 180 пикселей справа. Затем он будет выглядеть следующим образом:

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

И посмотрите, как это получается, если мы установим не равное значение радиуса?

Предположим, если вы примените радиус границы только к двум углам неравномерно:

верхний правый угол до 180 пикселей
нижний правый угол до 100 пикселей

Тогда это займет

top-right: 90 пикселей сверху и 90 пикселей справа
внизу справа: 50 пикселей справа и 50 пикселей снизу

Тогда он будет производить как это

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

Насколько максимальна его граница может потребоваться квадрат для применения со всех сторон? И посмотрите, как он создает круг?

Это может занимать до половины границы, то есть 180 пикселей /2 = 90 пикселей. Тогда он создаст такой круг

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

Зачем использовать только половину квадрата со всех сторон?

Поскольку все углы должны одинаково устанавливать значение радиуса.

Принимая равные части своей границы, он создает круг.

Ответ 3

Я думаю, что изначально он создает прямоугольник с height and width = 180px, а затем с каждым углом делает кривую с заданным радиусом, как 30px. Поэтому он устанавливает border с заданным radius.

Ответ 4

Границы - это внешний ящик любого контента, и если вы нанесете на него радиус, он просто произведет круговой ребро.

Ответ 5

Оба .a и .b выдадут идентичный результат.

Q. Почему я использовал width: 360px; height: 360px;?

а. border: 180px solid red; в .a работает как border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

Надежда эта скрипка поможет вам понять концепцию.

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