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


206

Это CSS:

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

Как получается круг ниже?

Введите описание изображения здесь

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

Введите описание изображения здесь

После применения border-radius 30 пикселей это будет выглядеть так:

Введите описание изображения здесь

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

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


14
Это объект 0x0 с границей 180 пикселей вокруг него, которая имеет закругленные углы. Таким образом, закругленные углы являются квадрантами круга.
Каз

у меня есть глупый вопрос, почему вы хотите сделать circleс границей ??? мы можем легко сделать circleс widthи heightпоэтому, почему мы делаем сborder
Механик

7
К вашему сведению, для создания кругов используйте <code> border-radius: 50% </ code> - упрощает настройку ширины / высоты при правильной компоновке.
Дэвид Гилбертсон

Да, дамы, это математика
Медет Тлеукабилулы

Ответы:


372

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

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

Где widthи на heightсамом деле применяется?

Давайте посмотрим на области типичного окна ( источник ):

W3C: Области типичной коробки

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

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

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влияет на границу (представьте, что внутренний синий прямоугольник - это блок контента, внутренний черный - как граница отступа, пустое пространство - как отступ, а гигантская красная граница - ну, граница). Пересечения между внутренней рамкой и красной рамкой обычно влияют на край содержимого.


Я не думаю, что css3-background делает какие-либо ссылки на css3-box (css3-box ожидает переписывания).
BoltClock

@BoltClock: я думал, что css3-box определит края . Во введении есть только ссылка на css2.1-box (ненормативный раздел), и данное изображение также есть, поэтому css3-box на самом деле не нужно понимать border-radius(какие изменения следует ожидать при переписывании css3- коробка?).
Зета

@ Зета, у меня в голове глупый вопрос, почему ты хочешь сделать circleс бордюром ??? мы можем легко сделать circleс widthи heightпоэтому, почему мы делаем сborder
Механик

1
@Sarfaraz: Взгляните на вопрос ОП: «Итак, как граница с 180px height/width-> 0pxстановится кругом с радиусом 180px?» , Я просто ответил на вопрос. Существуют и другие способы создания круга, но OP интересовало только то, как работает этот конкретный метод.
Зета

@ Зета: Я не уверен, что именно изменится, но, учитывая, что WD не обновлялся в течение 6 лет, я подозреваю, что многое из этого будет. Я знаю, что раздел 11 ( overflowсемейство свойств) теперь живет в своем собственном модуле, css-overflow-3, но это еще не отражено в ED. Вы увидите множество проблем в ED, но я думаю, что это не исчерпывающий список: dev.w3.org/csswg/css3-box
BoltClock

94

демонстрация

Давайте рассмотрим вопрос по-другому с этой демонстрацией картины:

Давайте сначала посмотрим, как получается радиус границы?

Чтобы получить радиус, требуется две стороны его границы. Если вы установите border-radius на 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 пикселей

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

  • справа вверху: 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;
}

Введите описание изображения здесь

Почему для нанесения со всех сторон требуется только половина площади?

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

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


7
На самом деле текущая версия этого ответа занимает немного далеко. Вопрос заключается просто в том, «как этот CSS создает круг», а не в том, «как работает радиус границы в общем», так что, хотя технически правильно, это немного много. Также вы можете переформатировать вопрос и поместить реальный код в кодовые среды.
Зета

3

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


3

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


1

И то .aи другое .bдаст одинаковый вывод.

В. Почему я использовал 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;
}

9
А? "Как работает .a?" «Вот сравнение между .a и .b» Я не уверен, что вы пытаетесь сказать здесь.
BoltClock
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.