Border radius круг: Круг | CSS примеры

50% против 100% / Песочница / Хабр

В последнее время я пытался переосмыслить правила CSS, которые я принял в своей практике. Я написал огромное количество кода без реального понимания того, почему он работает именно так.

Я просто решал задачи определенным способом, основываясь на общепринятой практике. Но с недавних пор я задумался, могу ли я узнать хотя бы приблизительно причину, почему все работает так, а не иначе?

Некоторые детали реализации браузера нечеткие, наверное потому что я в действительности не читал спецификацию. Теперь все чаще я пытаюсь себя спрашивать — почему все работает именно так? И все это привело меня к моментам озарения, которыми я надеюсь поделиться с вами.

Идеальные круги в CSS

Общепринятый шаблон в дизайне, который мы часто видим на сайтах — это идеальный круг. Иногда круг имеет какой-либо цветовой фон или изображение в качестве фона.

CSS круги на Rdio, Dribbble, и Codecademy

Такой трюк часто достигается использованием CSS свойства border-radius. Я решал эту задачу следующим образом — создавал квадрат и устанавливал border-radius в 50%. Я никогда не задавался вопросом, почему нужно делать именно так, я просто согласился с тем, что если установить радиус как половину высоты/ширины квадрата на всех углах, то я получу круг.

Рассмотрим пример. Пусть у нас есть квадрат размерами 150px на 150px, превратим его в круг, установив радиус для каждого угла в 50%. Согласно стандарту W3C в разделе о border-radius, процентные единицы для border-radius относятся к ширине и к высоте элемента. В моем примере, ширина/высота элемента составляет 150px, таким образом 50% вернет нам значение в 75px.

Преобразование квадрата в круг на CSS свойства border-radius (см. на CodePen)

Как же действительно работает border-radius?

Иногда я вижу реализацию данной дизайнерской задумки путем установки border-radius в 100%. Я сам сделал также в своем проекте несколько дней назад, даже не задумываясь. Это выглядело точно также, образуя идеальный круг. Но почему?

В презентации Lea Verou, The Humble Border Radius, указывает на W3C правило о пересекающихся изгибах:
если суммарное значение радиуса границы для двух смежных углов превышает размер элемента, то браузер выполняет дополнительные вычисления для пропорционального масштабирования радиуса границы каждого угла до тех пор, пока они не пересекутся.

Если верхний левый угол границы квадрата равен 100%, тогда радиус простирается от нижнего левого угла до верхнего правого угла квадрата. Это тоже самое, что и установка радиуса границы в 150px, то есть размер квадрата. И если верхний правый радиус границы также равен 100%, то суммарное значение двух углов составит 200%. И тогда браузер говорит: «Это недопустимо — установите значение для правого угла!» и масштабирует оба радиуса до тех пор, пока они не войдут в квадрат. В этот момент каждый угол становится равным половине от 100%.

Как браузер уменьшает border-radius 100% при масштабировании CodePen

Браузер также будет масштабировать все остальные углы, пока каждый угол не будет иметь радиус 50%, и мы не получим наш круг.

Даже если вы укажете радиус в 150px для каждого угла, в действительности вы получите радиус в 75px, так как это максимальное значение которое позволяет установить браузер для каждого угла.

Вывод

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

По крайней мере, это кажется довольно бессмысленным, если вы заранее знаете, что браузер в любом случае будет масштабировать радиусы до 50%. Использование 50% кажется верным решением.

А для меня время исправить расставленные мною случайные CSS свойства за последнею неделю…

Свойство border-radius — скругленные уголки

Свойство border-radius создает скругленные уголки для границы и фона. Значением свойства служат любые единицы для размеров. Значение по умолчанию: 0.

Является сокращением для свойств border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Синтаксис

селектор { border-radius: значение; }

Количество значений

Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:

Количество	Описание
1	Для всех углов одновременно.
2	Первое значение задает скругление для верхнего правого и нижнего левого углов, второе — для верхнего левого и нижнего правого.
3	Первое значение задает скругление для верхнего левого угла, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого угла.
4	Первое значение задает скругление для верхнего левого угла, второе — для верхнего правого, третье — для нижнего правого угла, а четвертое — для нижнего левого угла.

Эллиптическое скругление

Два значения через слеш устанавливают эллиптическое скругление. Значение перед слешем указывает горизонтальное скругление, а значения после слеша — вертикальное:

селектор { border-style: горизонтальное / вертикальное; }

Если задаются скругления для нескольких углов, то до слеша перечисляются все горизонтальные скругления, а после него — все вертикальные.

Пример

Установим скругление 10px для всех углов:

<div></div>#elem { border-radius: 10px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

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

<div></div>#elem { border-radius: 10px; border: 1px dotted black; width: 300px; height: 100px; }

:

Пример

Установим скругление в 10px для углов одной диагонали, и скругления в 40px — для углов второй диагонали:

<div></div>#elem { border-radius: 10px 40px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Установим скругление в 10px для верхнего левого угла, скругление в

30px для нижнего правого угла, и скругления в 50px — для углов второй диагонали:

<div></div>#elem { border-radius: 10px 50px 30px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Установим различные скругления для каждого из углов:

<div></div>#elem { border-radius: 10px 30px 50px 70px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Давайте сделаем эллиптическое скругление, установив 20px для горизонтальной части скругления, а 40px — для вертикальной:

<div></div>#elem { border: 1px solid black; border-radius: 20px / 40px; width: 300px; height: 100px; }

:

Пример

А сейчас установим разное эллиптическое скругление для всех углов по отдельности:

<div></div>#elem { border: 1px solid black; border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px; width: 300px; height: 100px; }

:

Пример

Если поставить для квадратного блока скругления, равное половине стороны квадрата, то получится круг:

<div></div>#elem { border-radius: 100px; border: 1px solid black; width: 200px; height: 200px; }

:

Пример

Если поставить скругление, большее чем сторона квадрата, то все равно получится круг:

<div></div>#elem { border-radius: 200px; border: 1px solid black; width: 200px; height: 200px; }

:

Пример

Круг можно также получить, если установить border-radius в 50% (преимущество в том, что при изменении размеров квадрата не придется менять скругление):

<div></div>#elem { border: 1px solid black; border-radius: 50%; width: 200px; height: 200px; }

:

Пример

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

400px, высота в 200px, а border-radius в 10%, то это все равно, как если бы было написано 40px/20px:

<div></div>#elem { border-radius: 10%; border: 1px solid black; width: 400px; height: 200px; }

:

Пример

Установим значение border-radius в 50% для прямоугольника — получится эллипс:

<div></div>#elem { border-radius: 50%; border: 1px solid black; width: 400px; height: 200px; }

:

Пример

Свойство border-radius скругляет не только уголки не границы, но и фона:

<div></div>#elem { border-radius: 20px; width: 300px; height: 100px; background-color: #e4f1ed; }

:

Смотрите также

• свойство border,
  которое является свойством-сокращением для границы

border-radius · WebPlatform Docs

Резюме

Свойство CSS border-radius позволяет авторам закруглять углы элемента. Скругление может быть разным для каждого угла, и оно может иметь разные горизонтальные и вертикальные радиусы для создания эллиптических кривых.

Обзорная таблица

Исходное значение

0

Применяется к

Все элементы, кроме элемента таблицы, если свернуть границу

Унаследовано

Нет

СМИ

визуальный

Расчетное значение

В соответствии с индивидуальными свойствами

Анимируемый

Да

Свойство объектной модели CSS

границаРадиус

Проценты

См. соответствующий размер (ширину или высоту) рамки.

Синтаксис

• радиус границы: длина
• радиус границы: длина / длина
• радиус границы: процент
• радиус границы: процент / процент

Значения

длина

Обозначает размер радиуса окружности или горизонтального и вертикального радиусов для эллиптических кривых. Он может быть выражен в любых единицах измерения, разрешенных в типах данных CSS . Единицы em полезны для элементов управления, которые масштабируются пропорционально размеру шрифта. Единицы, относящиеся к области просмотра (vw, vh, vmin, vmax), могут быть полезны для элементов управления, которые масштабируются вместе с размером области просмотра. Отрицательные значения недействительны. Вы можете указать одну длину для всех четырех углов или две, три или четыре длины, чтобы указать разные длины для разных углов: дополнительные сведения см. в разделе о синтаксисе.

процентов

Обозначает размер углового радиуса в процентах от размеров рамки блока. В частности, проценты по горизонтальной оси относятся к ширине рамки, проценты по вертикальной оси относятся к высоте рамки. Отрицательные значения недействительны. Вы можете указать один процент для всех четырех углов или два, три или четыре процента, чтобы указать разные проценты для разных углов: дополнительные сведения см. в разделе о синтаксисе.

длина / длина

Указание двух наборов значений длины, разделенных косой чертой, равнозначно указанию отдельных длин для радиусов X и Y углов, что приводит к эллиптическим углам, если радиусы X и Y имеют разную длину. Каждый набор может состоять из одного, двух, трех или четырех значений.

процент / процент

Указание двух наборов процентных значений, разделенных косой чертой, равносильно указанию отдельных процентных значений для радиусов X и Y углов, что приводит к эллиптическим углам, если радиусы X и Y имеют процентные значения, что приводит к различным вычисленным значениям (в зависимости от ширины и высота элемента, разные проценты могут привести к одним и тем же вычисленным значениям; дополнительные сведения см. в разделе примечаний). Каждый набор может состоять из одного, двух, трех или четырех значений.

Примеры

Пример одного значения

 border-radius: 1em;
/* эквивалентно: */
радиус верхнего левого края: 1em;
радиус верхнего правого края: 1em;
граница-нижний-правый-радиус: 1em;
радиус нижнего левого края: 1em;
 

Посмотреть пример в реальном времени

Пример с несколькими значениями

 border-radius: 20px 1em 1vw / 0. 5em 3em;
/* эквивалентно: */
граница-верхний-левый-радиус: 20px 0.5em;
радиус верхней правой границы: 1em 3em;
граница-нижний-правый-радиус: 1vw 0.5em;
граница-нижний-левый-радиус: 1em 3em;
 

Просмотреть живой пример

Создать эллипс, если

 border-radius: 50%;
/* Будет кругом, если ширина элемента равна его высоте */
 

Посмотреть пример в реальном времени

Уменьшение кривых во избежание наложения

 border-radius: 100% 150%;
/* эквивалентно: */
радиус границы: 40% 60%;
/* Значения уменьшаются пропорционально, все они умножаются на один и тот же коэффициент, пока не будет перекрытия */
 

Посмотреть пример в реальном времени

Использование

 Как и в случае любого сокращенного свойства, отдельные унаследованные значения невозможны, то есть border-radius:0 0 inherit inherit, что частично переопределит существующие определения. В этом случае необходимо использовать отдельные свойства полной записи.
 

Синтаксис

border-radius может принимать от одного до четырех значений:

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

Примечания

Примечания

• Свойство border-radius является составным свойством, которое определяет до четырех свойств border-*-radius . Если значения указаны до и после косой черты, значения до косой черты задают горизонтальный радиус, а значения после косой черты задают вертикальный радиус. Если косая черта («/») отсутствует, значения задают оба радиуса одинаково. Четыре значения для каждого радиуса даны по часовой стрелке, начиная с верхнего левого угла. Если предоставлено менее четырех значений, они повторяются до тех пор, пока мы не получим четыре значения, аналогично другим свойствам CSS, таким как ширина границы.
• Можно получить эллиптические углы, даже указав один радиус. Это происходит, когда вы используете проценты, поскольку они разрешаются в разные числа для каждой оси (по горизонтали они представляют собой проценты от ширины рамки, по вертикали от высоты). Для демонстрации обратитесь к приведенному выше примеру эллипса (пример № 3)
.
• Поскольку border-radius скругляет рамку элемента, внутренние углы (padding box) будут иметь меньшие радиусы (в частности, border-radius — border-width) или даже не скругляться, если рамка толще, чем border-radius ценить. Другим следствием этого является то, что когда на соседних сторонах есть границы разной ширины, кривые поля заполнения будут эллиптическими.
• Обратите внимание, что хотя в сокращении радиуса границы есть косая черта (/) для отделения горизонтального радиуса от вертикального, в полном описании они разделены пробелом.

Связанные характеристики

Модуль фона и границ CSS Уровень 3: Закругленные углы:

Рекомендация кандидата

Модуль фона и границ CSS, уровень 4: закругленные углы:

Редакторский черновик

См. также

Статьи по теме

Граница

• Граница

• нижняя граница

• цвет нижней границы

• граница-нижний-левый-радиус

• нижняя граница

• ширина нижней границы

• цвет рамки

• граница изображения

• граница-изображение-начало

• граница-изображение-повтор

• граница-изображение-срез

• граница-источник изображения

• ширина изображения границы

• граница левая

• граница левая цвет

• граница слева

• граница слева ширина

• радиус-граница

• граница правая

• граница правого цвета

• бордюр справа

• граница справа ширина

• верхняя граница

• цвет верхней границы

• граница-верхний-левый радиус

• граница-верхний-правый-радиус

• бордюрный верх

• ширина верхней границы

• ширина границы

Связанные страницы

• CSSStyleDeclarationCSSStyleDeclaration
• текущий стиль текущий стиль
• стильстиль
• по умолчаниюпо умолчанию
• среда выполненияStyleruntimeStyle
• Артикул
• граница-верхний-левый-радиусграница-верхний-левый-радиус
• граница-верхний-правый-радиусграница-верхний-правый-радиус
• граница-нижняя-правая-радиусграница-нижняя-правая-радиус
• граница-нижняя-левая-радиусграница-нижняя-левая-радиус

Атрибуции

• Новички
• Концепции
• HTML
• УС
• Доступность
• JavaScript
• ДОМ
• СВГ

Радиус границы CSS | EASEOUT

Свойство CSS border-radius определяет радиус углов элемента. Мы можем использовать это свойство, чтобы добавить закругленные углы к нашим элементам! Он часто используется для кнопок, изображений и более сложных форм CSS. Давайте углубимся в это полезное свойство…

Обычно border-radius принимает от одного до четырех значений, а порядок, в котором указываются значения, определяет, к какому углу относится каждое значение.

Вот пример:

 .my-element {
  радиус границы: 15px 50px 30px 5px;
}
 

Обратите внимание, что значения применяются к каждому порядку в следующем порядке: вверху слева, вверху справа, внизу справа и внизу слева.

Это дало бы верхний левый угол радиусом 15 пикселей, верхний правый угол радиусом 50 пикселей, нижний правый угол радиусом 30 пикселей и нижний левый угол радиусом 5 пикселей.

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

• border-top-left-radius
• граница-верхний-правый-радиус
• граница-нижняя-правая-радиус
• граница-нижний-левый-радиус

Например:

 . мой-элемент {
  граница-верхний-левый-радиус: 15px;
  граница-верхний-правый-радиус: 50px;
  граница-нижний-правый-радиус: 30px;
  радиус нижнего левого края: 5px;
}
 

Результат тот же, что и в предыдущем примере.

Свойство border-radius на самом деле является сокращенным свойством border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom -левый радиус свойства.

Создание фигур с радиусом границы

Свойство радиуса границы также можно использовать для создания фигур, таких как круги или эллипсы.

Чтобы создать круг, задайте для радиуса значение, равное или превышающее ширину или высоту элемента. Например:

 .my-circle {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  радиус границы: 50%; /* радиус равен половине ширины и высоты элемента */
}
 

Это создаст круг с радиусом 50 пикселей, так как радиус равен половине ширины и высоты элемента.

Вы также можете использовать свойство border-radius для создания эллиптических фигур, задав разные значения для горизонтального и вертикального радиуса. Например:

 .мой-эллипс {
  ширина: 200 пикселей;
  высота: 100 пикселей;
  радиус границы: 50%/25%; /* горизонтальный радиус 50% и вертикальный радиус 25% */
}
 

Это создаст эллипс с горизонтальным радиусом 100 пикселей (50% ширины) и вертикальным радиусом 25 пикселей (25% высоты).

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

Похожие сообщения:

• Базовые селекторы
• Псевдоклассы
• Псевдоэлементы

Немного обо мне..

Привет, я Тим! 👋

Я разработчик, технический писатель и автор. Если вы хотите увидеть все мои статьи, вы находитесь в правильном месте! Просмотрите категории блога, чтобы найти то, что вас интересует.

В настоящее время я работаю над своим Полным руководством по фрилансу.