Это CSS:
div {
width: 0;
height: 0;
border: 180px solid red;
border-radius: 180px;
}
Как получается круг ниже?
Предположим, что если ширина прямоугольника равна 180 пикселям, а высота равна 180 пикселям, то это будет выглядеть так:
После применения border-radius 30 пикселей это будет выглядеть так:
Прямоугольник становится меньше, то есть почти исчезает при увеличении размера радиуса.
Итак, как же граница 180 пикселей height/width-> 0px
становится кругом с радиусом 180 пикселей?
html
css
css-shapes
Навин Раунияр
источник
источник
circle
с границей ??? мы можем легко сделатьcircle
сwidth
иheight
поэтому, почему мы делаем сborder
Ответы:
Давайте переформулируем это на два вопроса:
Где
width
и наheight
самом деле применяется?Давайте посмотрим на области типичного окна ( источник ):
Символ «
height
и»width
применяется только к контенту, если используется правильная блочная модель (без режима причуд, без старого Internet Explorer).Где
border-radius
применяется?border-radius
Распространяется на края рамки . Если нет ни отступов, ни границ, это напрямую повлияет на границы вашего контента, что приводит к вашему третьему примеру.Что это значит для нашей границы-радиуса / круга?
Это означает, что ваши правила CSS приводят к блоку, который состоит только из рамки. Ваши правила гласят, что максимальная ширина этой границы должна составлять 180 пикселей с каждой стороны, а с другой стороны - максимальный радиус того же размера:
На картинке фактическое содержание вашего элемента (маленькая черная точка) действительно не существует. Если вы не примените ничего,
border-radius
вы получите зеленую коробку. Этоborder-radius
дает вам синий круг.Это станет легче понять, если применить
border-radius
только два угла :Так как в вашем примере размер и радиус для всех углов / границ равны, вы получите круг.
Другие ресурсы
Ссылки
Демонстрации
border-radius
влияет на границу (представьте, что внутренний синий прямоугольник - это блок контента, внутренний черный - как граница отступа, пустое пространство - как отступ, а гигантская красная граница - ну, граница). Пересечения между внутренней рамкой и красной рамкой обычно влияют на край содержимого.Показать фрагмент кода
источник
border-radius
(какие изменения следует ожидать при переписывании css3- коробка?).circle
с бордюром ??? мы можем легко сделатьcircle
сwidth
иheight
поэтому, почему мы делаем сborder
height/width-> 0px
становится кругом с радиусом 180px?» , Я просто ответил на вопрос. Существуют и другие способы создания круга, но OP интересовало только то, как работает этот конкретный метод.overflow
семейство свойств) теперь живет в своем собственном модуле, css-overflow-3, но это еще не отражено в ED. Вы увидите множество проблем в ED, но я думаю, что это не исчерпывающий список: dev.w3.org/csswg/css3-boxдемонстрация
Давайте рассмотрим вопрос по-другому с этой демонстрацией картины:
Давайте сначала посмотрим, как получается радиус границы?
Чтобы получить радиус, требуется две стороны его границы. Если вы установите border-radius на 50 пикселей, то потребуется 25 пикселей с одной стороны и 25 пикселей с другой стороны.
И, взяв 25 пикселей с каждой стороны, получилось бы так:
Теперь посмотрим, сколько может потребоваться максимум квадрата для применения на одном углу?
Это может занять до 180 пикселей сверху и 180 пикселей справа. Тогда это будет выглядеть так:
И посмотрите, как это получается, если мы устанавливаем неравное значение радиуса?
Предположим, если вы примените радиус границы только к двум углам неравномерно:
верхний правый угол до 180 пикселей
нижний правый угол до 100 пикселей
Тогда это займет
справа вверху: 90 пикселей сверху и 90 пикселей справа
справа внизу: 50 пикселей справа и 50 пикселей снизу
Тогда это будет производить так
Какую максимальную площадь его границы может занять площадь, чтобы применить ее со всех сторон? И посмотрите, как получается круг?
Это может занять до половины размера рамки, то есть 180 пикселей / 2 = 90 пикселей. Тогда бы получился такой круг
Почему для нанесения со всех сторон требуется только половина площади?
Потому что все углы должны установить одинаковое значение радиуса.
Взяв равные части своей границы, он производит круг.
источник
Границы - это внешний блок любого содержимого, и если вы примените к нему радиус, он просто создаст круговой край.
источник
Я думаю, что он изначально создает прямоугольник с,
height and width = 180px
а затем делает кривую с заданным радиусом, как30px
с каждым углом. Так оно и устанавливаетсяborder
с учетомradius
.источник
И то
.a
и другое.b
даст одинаковый вывод.В. Почему я использовал
width: 360px; height: 360px;
?А.
border: 180px solid red;
в.a
работах вродеborder-width: 180px 180px 180px 180px; /* Top Right Bottom Left */
.Надеюсь, что эта скрипка поможет вам понять концепцию.
источник