border-radius является одним из первых свойств CSS большинство людей узнают и одним из последних они полностью понимают, Округление всех четырех углов карты на 12 пикселей легко.Тогда кнопка должна быть таблетка на любой ширине, аватар должен быть круг, пузырь чата нуждается в одном остром углу, и вдруг стенографический порядок, разница между 50% а 999px, и радиус, который & quot;прекращает расти& quot; все имеет значение.
В этом руководстве объясняется, как работает свойство от спецификации вверх: что означает каждый счет значения, как проценты отличаются от пикселей, как браузеры масштабируют слишком большие радиусы, как строить общие формы и почему закругленные углы иногда не появляются. примеры сверяются с Генератор радиусов границы CSS, который предпросматривает каждый угол в прямом эфире и выводит кратчайшее допустимое сокращение Это один из Инструменты CSS на Toolz.
TL;DR:
border-radiusокругляет углы элемента & #39;s. одно значение устанавливает все четыре угла, два значения устанавливают пары верх-левый/нижний-правый и верхний-правый/нижний-левый, три значения устанавливаются вверх-левый, затем вверх-правый и нижний-левый вместе, затем вниз-правый, и четыре значения, идущие по часовой стрелке сверху-левый. радиусы пикселей являются фиксированными кривыми; проценты измеряются против ширины и высоты отдельно, так что50%делает круг только на квадрате Когда радиусы вдоль стороны в сумме больше, чем сторона, браузер масштабирует каждый радиус вниз пропорционально.The генератор радиуса границы обрабатывает стенографию для вас, со стороны клиента, бесплатно, без регистрации.
Что делает свойство пограничного радиуса CSS?
выше border-radius свойство обходит внешние углы элемента's бордюрный ящик.Каждый угол становится четвертью эллипса с горизонтальным радиусом и вертикальным радиусом. когда оба радиуса равны, угол представляет собой четверть круга.
Он определен в W3C Модуль CSS "Фон и границы", уровень 3, и поддерживается непрефиксом в каждом крупном браузере уже более десяти лет, поэтому префиксы поставщиков не требуются.
Округление влияет больше, чем линия границы. Фон элемента & #39;s обрезается до округлой формы, box-shadow следует кривой, и в современных браузерах тоже outline. Содержимое внутри элемента не обрезается, если вы не добавите overflow: hidden, что является наиболее распространенной причиной выхода из строя закругленных углов.
Как работает стенография границы-радиуса?
border-radius это сокращение от четырех свойств длинной руки: border-top-left-radius, border-top-right-radius, border-bottom-right-radius а border-bottom-left-radius. Количество значений, которые вы даете, определяет, к каким углам применимо каждое значение.
| Ценности | пример | Верхний левый | Верховой правый | Внизу справа | Внизу слева |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16px | 16px | 16px | 16px |
| 2 | border-radius: 24px 8px; |
24px | 8px | 24px | 8px |
| 3 | border-radius: 24px 8px 0px; |
24px | 8px | 0px | 8px |
| 4 | border-radius: 20px 10px 5px 0px; |
20px | 10px | 5px | 0px |
Шаблон имеет тот же порядок по часовой стрелке, что и шаблон margin а padding, начиная с верхнего левого угла вместо верхней стороны. пропущенные значения заполняются от их диагонального партнера: с двумя значениями, нижние правые копии верхние левые и нижние левые копии верхние правые. с тремя, нижние левые копии верхние правые.
Генератор переворачивает этот процесс Вы устанавливаете каждый угол своим собственным ползунком, и он записывает наименьшее количество значений, которые производят одну и ту же форму:
- Все четыре равных угла дают одно значение.
- Верхний левый равен нижнему правому, а верхний правый равен нижнему левому, дает два значения.
- Правый верхний, равный левому низу (но другая диагональ отличается), дает три значения.
- Все остальное дает четыре.
Одно последствие удивляет людей. Округлите только верхний левый угол на 20px, и результат будет border-radius: 20px 0px 0px;, а не четырехзначное значение 20px 0px 0px 0px. Оба верны; форма трех значений короче, потому что верхнее правое и нижнее левое равны нулю. Каждое значение сохраняет свою единицу, поэтому нулевой угол печатает как 0px, йо-
В чем разница между PX и % для Border-Radius?
Радиус пикселя - это абсолютный размер. Процентный радиус относительно размера элемента 's, а горизонтальная и вертикальная части измеряются отдельно: горизонтальный радиус относительно ширины, вертикальный радиус против высоты.
На квадрате - это одинаковое число На прямоугольнике их нет, поэтому 50% превращает квадрат в круг, а прямоугольник в эллипс.
Возьмите коробку предварительного просмотра генератора 's, ширина которой составляет 224 пкс, а высота - 160 пкс:
| стоимость | Горизонтальный радиус | Вертикальный радиус | Форма |
|---|---|---|---|
16px |
16px | 16px | Округлый прямоугольник, круговые углы |
50% |
112px (50% от 224) | 80px (50% от 160) | Эллипс |
25% |
56px | 40px | Округлый прямоугольник, эллиптические углы |
999px |
999px, масштабированный до 80px | 999px, масштабированный до 80px | Таблетка с круглыми концами |
Два других блока после разрешения ведут себя как пиксели. em относится к элементу & #39;s собственный размер шрифта и rem к размеру корневого шрифта, так что 1rem это 16px с настройками браузера по умолчанию. Использование em или rem позволяет масштабировать углы с размером текста, который подходит для кнопок и тегов, которые растут вместе с их меткой.
В генераторе ползунки выполняются от 0 до 200 для px, от 0 до 50 для % и от 0 до 10 для em и rem, на этапах целого числа. переключение устройства сохраняет числа и меняет местами единицу, поэтому 16px становится 16%, а не преобразованным значением.
Почему большой пограничный радиус перестает быть круглее?
Потому что спецификация не позволяет угловые кривые перекрываться Когда радиусы на одной стороне в сумме больше, чем эта сторона 's длина, браузер сокращает каждый радиус на элементе на один и тот же коэффициент, пока они не подходят.
выше правило перекрытия углов работает так Для каждой из четырёх сторон разделите длину стороны's на сумму двух радиусов, которые касаются её. возьмите наименьшее из этих отношений, назовите это f. Если f меньше 1, умножьте каждый радиус на f.
Вот расчет для border-radius: 999px в поле предварительного просмотра 224 на 160:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
Каждый угол в конечном итоге с радиусом 80px, ровно половина высоты 160px, поэтому короткие концы становятся идеальными полукругами То же самое происходит при 200px, верхняя часть ползунка пикселя: f равно 160 /400 = 0,4, а 200 × 0,4 снова составляет 80px. За половину более короткой стороны радиус пикселя перестает что-либо менять.
Далее следуют два практических результата. кнопка таблетки может использовать любое очень большое значение пикселя, и она остается таблеткой на любой ширине. и поскольку масштабирование пропорционально по всем четырем углам, один угол увеличенного размера также уменьшает другие. Установите верхний левый на 999px, а остальное оставьте на 20px, и углы 20px уменьшатся вместе с ним.
Как сделать общие формы с бордюр-радиусом?
Большинство округлых форм в интерфейсах взяты из горстки рецептов. генератор имеет предустановки для обычных.
| Форма | CSS | банкноты |
|---|---|---|
| Острый | border-radius: 0px; |
По умолчанию для большинства элементов |
| Тонкий | border-radius: 6px; |
Входы, маленькие кнопки |
| Карточка | border-radius: 12px; |
Панели и карты |
| Округленный | border-radius: 16px; |
Начальное значение генератора's |
| Таблетка | border-radius: 999px; |
Работает в любую ширину посредством масштабирования перекрытия |
| Круг | border-radius: 50%; |
Требуется равная ширина и высота |
| Лист | border-radius: 0px 24px; |
Два противоположных угла закруглены |
| Блоб | border-radius: 60% 40%; |
Органическая форма из неравных процентов |
| Речевой пузырь | border-radius: 16px 16px 16px 0px; |
Один острый угол возле динамика |
| Вкладка | border-radius: 8px 8px 0px 0px; |
Закругленный верх, плоское дно |
Круг. Набор 50% на элементе с равной шириной и высотой Для аватаров добавьте aspect-ratio: 1 а object-fit: cover на изображении неквадратное фото не растягивается в эллипс.
Таблетка. Используйте большое значение пикселя, а не 50%. На широкой кнопке, 50% дает эллипс с заостренными концами, потому что горизонтальный радиус вдвое меньше ширины. 999px вместо этого масштабируется до половины высоты, образуя круглые концы.
Капля. Пресет 60% 40% устанавливает верхний левый и нижний правый на 60% и два других на 40%. на поле предварительного просмотра горизонтальные радиусы вдоль верхнего края составляют 134,4px и 89,6px, которые в сумме составляют ровно 224px, поэтому масштабирования не происходит, и две кривые встречаются без прямого края, оставшегося между ними. Пресеты могут пройти за пределы диапазона ползунка: Blob использует 60%, Pill использует 999px, и на выходе сохраняются эти значения, пока вы не переместите ползунок.
Речевой пузырь и вкладка. Ни одна форма не имеет совпадающей диагональной пары, поэтому обеим нужны все четыре значения. Установите углы индивидуально в генераторе, и это подтвердит, что более короткой формы не существует.
Каков синтаксис косой черты в пограничном радиусе?
Косая черта отделяет горизонтальные радиусы от вертикальных радиусов, поэтому каждый угол может представлять собой некруглый эллипс с размерами, которые вы выбираете напрямую.
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Значения на каждой стороне косой черты следуют тем же правилам один к четырем, что и обычная стенография. генератор Toolz не записывает синтаксис косой черты: он устанавливает один радиус на угол, который охватывает круги, таблетки, карты и капли. Для форм яиц и пользовательских форм линз начните с генератора и #39;s выведите и добавьте косую часть вручную.
Почему не показывают мои закругленные углы?
Когда border-radius кажется, ничего не делаешь, причина почти всегда одна из них.
| Симптом | Причина | Исправить |
|---|---|---|
| Изображение или ребенок высунуты из углов | Дети не подрезаны по умолчанию | Добавить overflow: hidden округленному родителю или округляющему ребенка тоже |
| Никаких видимых изменений вообще | Элемент не имеет фона, границы или тени | Придайте ему цвет фона или рамку, чтобы форма была видна |
| Уголки стола остаются квадратными | border-collapse: collapse на столе |
обычай border-collapse: separate с border-spacing: 0, или вокруг обертки |
| Круг выглядит как овал | Ширина и высота различаются | Установите равные размеры или aspect-ratio: 1 |
| Таблетка имеет заостренные концы | Использование 50% на широком элементе |
Используйте большое значение px, например 999px |
| Радиус перестает увеличиваться | Масштабирование перекрытия | Ожидаемый; радиус ограничен половиной более короткой стороны |
| Внутренние углы элемента выглядят толще | Внутренний радиус равен внешнему радиусу внутренней набивки | Установите внутренний радиус на внешний радиус минус набивка |
Последний тонкий Карта с border-radius: 16px а padding: 8px содержащий изображение с тем же радиусом 16px выглядит неравномерно, потому что внутренняя кривая должна быть более плотной Внутренний радиус, который следует за внешней кривой, равен 16 минус 8, поэтому 8px.
Как граница-радиус сочетается с тенями и градиентами?
Закругленные углы редко доставляются в одиночку. карта обычно имеет тень и часто градиентный фон, и оба следуют закругленной форме автоматически.
box-shadow прослеживает округлую рамку, поэтому мягкая тень под картой 12px имеет закругленные углы 12px без какой-либо дополнительной работы.The генератор тени коробки предварительный просмотр теней на округленном элементе и теневой путеводитель коробки объясняет значения смещения, размытия и спреда позади них.
Фон, включая градиенты, также обрезается до закругленной формы. Чтобы спроектировать заливку, используйте Генератор градиента CSS; Градиентный справочник CSS проходит через синтаксис. Если размер угла должен масштабироваться с помощью окна просмотра, а не оставаться фиксированным, Генератор зажима CSS строит а clamp() значение, которое вы можете использовать в качестве радиуса, например, карта, которая составляет 8px на телефонах и 20px на широких экранах.
С помощью генератора, шаг за шагом
- Выберите предустановленный например, Card, Pill, Circle или Blob, или начинать с углов 16px по умолчанию.
- Отрегулируйте углы. Угловой переключатель по умолчанию используется в Independent, где каждый ползунок перемещает только свой угол. Переключите его на Linked, чтобы переместить все четыре вместе.
- Выберите единицу: px, %, em или rem.
- Проверьте предварительный просмотр. Градиентное поле обновляется при перетаскивании, включая масштабирование перекрытия по большим значениям.
- Скопируйте CSS. Кнопка "Копировать CSS" копирует полную версию
border-radius:декларация в кратчайшем виде.
Все работает на стороне клиента: предварительный просмотр и код генерируются JavaScript в вашем браузере, ничего не загружается, и страница продолжает работать в автономном режиме после загрузки. Когда вы будете готовы, откройте генератор границы-радиуса, установите углы и вставьте объявление прямо в таблицу стилей.
