border-radius: 16px;Генератор радиусов границы CSS — это визуальный редактор для свойства CSS Border-Radius. Вы перетаскиваете ползунок для каждого угла, смотрите в режиме реального времени элемент предварительного просмотра и копируете точные CSS, которые он производит — никаких пиксельных значений пикселей и перезагрузки страницы.
Свойство border-radius выглядит просто, но имеет компактную сокращенную, которая сбивает людей с толку: одно значение закругляет все четыре угла, два значения устанавливают две диагонали и четыре значения по часовой стрелке сверху слева. Этот инструмент позволяет вам установить каждый угол независимо, а затем автоматически выводит кратчайший эквивалентный график, поэтому ваш CSS остается чистым.
Все работает в вашем браузере. Начните с предустановленной карты, таблеток, круга или капли, настройте каждый угол, переключите устройство между пикселями и процентами и скопируйте объявление. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Выберите пресет, например, округление, пилюлю, круг или каплю для мгновенной отправной точки или начните с угла, закругленных по умолчанию.
Перетащите верхний левый, верхний правый, нижний правый и нижний левый ползунки, чтобы закруглить каждый угол независимо, или установите их все на одинаковое значение для равномерного радиуса.
Переключитесь между PX, %, EM и REM. Проценты создают эллиптические углы относительно размера элемента — устанавливают 50% по всем углам, чтобы создать идеальный круг или эллипс.
Скопируйте сгенерированное объявление границы, которое уже свернуто, в кратчайшие допустимые сокращения, и вставьте его в свою таблицу стилей.
Независимые ползунки для всех четырех углов позволяют создавать асимметричные формы, такие как радиусы листа, табуляции и речи, а не только однородные радиусы
Инструмент автоматически сворачивает ваши четыре угла до кратчайшего эквивалента кратности радиуса, сохраняя ваш CSS чистым и читабельным
Переключение между px, %, em и REM — проценты создают эллиптические углы относительно размера коробки, как создаются круги и пузырьки
Элемент предварительного просмотра обновляется мгновенно при перетаскивании, поэтому вы можете точно увидеть, как округляются углы, прежде чем что-либо скопировать
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity — build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!