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

Как сделать круг в html css

Как нарисовать круг на HTML-странице?

Вы не можете нарисовать круг как таковой. Но вы можете сделать что-то идентичное кругу.

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

Это вполне возможно в HTML 5. Ваши варианты: Встроенный SVG и <canvas> тег.

Чтобы нарисовать круг во встроенном SVG:

Есть несколько юникодовых кругов, которые вы могли бы использовать:

Вы можете наложить текст на круги, если хотите:

Вы также можете использовать собственный шрифт (например, этот), если вы хотите иметь более высокий шанс, что он будет выглядеть одинаково на разных системах поскольку не все компьютеры/браузеры имеют одинаковые шрифты.

border-radius:50% , если вы хотите, чтобы круг настраивался на любые размеры, которые получает контейнер (например, если текст является переменной длиной)

Не забывайте префиксы -moz- и -webkit- !

С 2015 года вы можете сделать это и сосредоточить текст всего на 15 строк CSS (Fiddle):

Без каких-либо -webkit- s это работает в IE11, Firefox, Chrome и Opera, на Windows7, и это действительно HTML5 (экспериментальный) и CSS3.

Технически не существует способа рисовать круг с HTML (нет тега <circle> HTML), но можно нарисовать круг.

Лучший способ сделать это — добавить border-radius: 50% к тегу, например div . Вот пример:

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

(Причина использования расширений -moz и -webkit заключается в поддержке предварительно-CSS3-окончательных версий Gecko и Webkit.)

На на этой странице больше примеров. Что касается вставки текста, вы можете это сделать, но вы должны помнить о позиционировании, так как в большинстве моделей браузеров для колодок по-прежнему используется внешний квадрат.

Вы можете использовать свойство border-radius или сделать div с фиксированной высотой и шириной и фоном с кругом png.

Как нарисовать круг на странице html?

Вы не можете нарисовать круг как таковой. Но вы можете сделать что-то идентичное кругу.

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

Ответ 2

Это вполне возможно в HTML 5. Ваши варианты: Встроенный SVG и <canvas> тег.

Чтобы нарисовать круг во встроенном SVG:

Ответ 3

Есть несколько юникодовых кругов, которые вы могли бы использовать:

Ответ 4

border-radius:50% , если вы хотите, чтобы круг настраивался на любые размеры, которые получает контейнер (например, если текст является переменной длиной)

Не забывайте префиксы -moz- и -webkit- !

Ответ 5

Начиная с 2015 года, вы можете сделать это и центрировать текст всего с 15 строками CSS (Fiddle):

Ответ 6

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

(Причина использования расширений -moz и -webkit заключается в поддержке предварительно-CSS3-окончательных версий Gecko и Webkit.)

На на этой странице больше примеров. Что касается вставки текста, вы можете это сделать, но вы должны помнить о позиционировании, так как в большинстве моделей браузеров для колодок по-прежнему используется внешний квадрат.

Ответ 7

Технически не существует способа рисовать круг с HTML (нет тега <circle> HTML), но можно нарисовать круг.

Лучший способ сделать это — добавить border-radius: 50% к тегу, например div . Вот пример:

Ответ 8

Вы можете использовать свойство border-radius или сделать div с фиксированной высотой и шириной и фоном с кругом png.

Ответ 9

Ответ 10

border-radius: 50%; превратит все элементы в круг, независимо от размера. По крайней мере, если height и width цели одинаковы, иначе она превратится в овал.

Как сделать круг с помощью CSS3 вокруг иконки font-awesome?

По возможности сделать это отзывчивым. Как лучше всего это сделать? Если возможно, было бы неплохо, чтобы размер круга и текста изменялся сам по себе, когда пользователь меняет размер.

4 ответа

Если вы хотите сделать его отзывчивым, то вам не следует использовать этот border-radius: 60px или что-то еще, для круга, border-radius: 50% работает идеально

Теперь, чтобы придать вашим иконкам Font-Awesome эффект круглого фона, вы можете решить это следующим образом:

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

Чтобы предотвратить это, вы можете исправить это, например:

Затем, используя медиа-запрос, вы можете изменить эти свойства для разных разрешений экрана.

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

HTML

CSS

Другой вариант — иметь 2 отдельных слоя; один для круга, а другой для шрифта, который вы хотите использовать. Вот код:

Также здесь находится jsfiddle, но, очевидно, классные шрифты там не работают. Кстати, это не отзывчивое решение.

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

Свойство 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%, то это все равно, как если бы было написано border-radius: 40px/20px;. Эти значения получились отсюда: 40px = 400px*10%, 20px = 200px*10%:

<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,
  которое является свойством-сокращением для границы

Круги в CSS – Полезное для разработчика

От автора: я постоянный эксперт Cloud Four по кругам. Я не планировал им быть. Некоторое время назад мы работали над проектом, в котором было много кругов: круглые контейнеры, круглые миниатюры, круглые кнопки. И сначала я стал парнем, с которым можно поговорить, если у вас возникли проблемы с кругами и CSS.

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

Создание кругов

Существует несколько методов определения динамических круглых форм в HTML и CSS, каждый из которых имеет свои плюсы и минусы. Вот те немногие, с которыми я экспериментировал больше всего, от самых распространенных и до наименее распространенных.

border-radius

Самая распространенная техника — это скруглить все углы на 50%. Это самый простой способ, и он широко поддерживается. Свойство border-radius также будет влиять на обводки, тени и целевой размер касания / клика элемента.

Если вы хотите, чтобы круг растягивался до формы таблетки, установите для border-radius половину высоты элемента вместо 50%. Если высота неизвестна, выберите произвольно большое значение (например, 99em).

SVG

SVG может включать в себя элемент <circle/>, который может быть стилизован аналогично любому другому контуру. Они очень хорошо поддерживаются и производительны для анимации, но требуют больше разметки, чем другие методы. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус круга (плюс половина ширины его обводки, если есть) немного меньше viewBox SVG.

clip-path

Это новая техника. Ее поддержка вполне достойная, но менее последовательная. clip-path не влияет на макет элемента, что означает, что оно влияет на обводку и, скорее всего, будет скрывать внешние тени. Это может быть хорошо или плохо в зависимости от того, чего вы пытаетесь достичь.

Радиальный градиент

Мы можем использовать background-image и radial-gradient, чтобы визуально заполнить элемент кругом. Любой контент будет располагаться поверх этой фигуры, но его расположение (включая целевой размер касания / клика) не будет затронуто. Это мой наименее любимый метод, потому что края круга могут казаться неровными или нечеткими в зависимости от браузера, но это может хорошо подходить для тонких фоновых деталей.

Центрирование контента

Можно использовать практически любой метод для центрирования вещей с помощью CSS. Но иногда вы можете заметить, что содержимое выглядит слегка смещенным. Хотя это не уникально для круглых контейнеров, их уменьшенная площадь поверхности делает проблему еще более заметной.

Сравнение методов центрирования для элементов разных размеров в Safari. Обратите внимание, что некоторые методы имеют более заметный джиттер в положении значка относительно его контейнера.

Это связано с тем, как браузеры рассчитывают субпиксели. Каждый раз, когда мы используем относительные единицы, единицы на основе окра просмотра или значения из модульной шкалы, есть вероятность, что мы просим браузер вычислять дробные значения, например 22.78125px. Когда-нибудь эта проблема может сломать нашу сетку или вызвать другие фундаментальные проблемы. В наши дни браузеры тщательно работают над изменением вычислений в зависимости от элемента, свойства и контекста, но это все равно не идеально.

По моему опыту, самый гибкий метод для центрирования — использовать комбинацию абсолютного позиционирования (чтобы установить центральную точку на основе расположения родительского элемента) и преобразования (чтобы поместить дочерний элемент с помощью относительных вычислений):

Обрезка содержимого

Центрирование это хорошо, но что, если мы хотим заполнить круг изображением?

С помощью HTML / CSS

Мы можем обрезать элемент img до круга, используя border-radius:

Это имеет некоторые ограничения:

Элемент не адаптируется к своему контейнеру.

Мы не можем применить какие-либо внутренние тени, чтобы как-то отделить изображение от фона (кроме как в самом изображении).

Мы используем object-fit: cover для предотвращения искажения неквадратных изображений, но это не поддерживается в IE11.

Вот более сложный пример. В нем используется элемент-оболочка, чтобы установить соотношения сторон блока для поддержания квадратных пропорций, в нем улучшается обработка неквадратных изображений с помощью @supports и применяется прозрачная внутренняя тень, чтобы отделить изображение от фона:

С помощью SVG

Мы можем сделать то же самое, используя SVG:

Но поскольку элементы SVG image не поддерживают srcset или sizes, это, вероятно, плохой выбор для шаблона эскизов изображений общего назначения.

Субпиксельные промежутки

Если вы наложите внутренние тени, границы или другие причудливые элементы поверх круглого содержимого, вы можете в конечном итоге заметить, что появляются некоторые субпиксельные артефакты:

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

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

Обтекание текстом

Текст! Это основа Интернета. Он заполняет прямоугольники и разбивается на строки. Что мы можем сделать с этим?

Внешний текст

Вы можете задать обтекание текстом вокруг круглой фигуры, используя свойство shape-outside:

Внутренний текст

Стоп! Это, наверное, плохая идея! Сделать его адаптивным практически невозможно! Просто подождите, пока у нас не будет свойства shape-inside!

Точно? Хорошо, хорошо, у Джонатана Скита есть интеллектуальный хак. Он использует псевдо-элементы для установки shape-outside по обе стороны от текста:

Вдоль контура

Мы можем установить текст по изогнутому контуру с помощью SVG и <textPath>:

К сожалению, <circle> поддерживается для <textPath> не во всех браузерах, но преобразование в <path> не слишком сложное.

Заключение!

Вот и все! Вы прочитали длинную статью о действительно важной теме, прошли по ее минным полям с вложенными заголовками и повторяющимися демонстрациями и обрели знание о кругах в качестве единственной награды! Продолжайте в том же духе, отважный читатель! Я верю в вас!

Автор: Tyler Sticka

Источник: https://cloudfour. com

Редакция: Команда webformyself.

Источник: https://webformyself.com/krugi-v-css/

Что можно делать с помощью CSS Border-Radius? / СоХабр

Как создать очень классные эффекты с помощью этого редко используемого свойства.

TL;DR: Когда вы используете восемь значений, задающих border-radius в CSS, вы можете создавать естественно выглядящие фигуры. Ничего себе. Нет времени читать? Мы сделали для вас наглядный инструмент. Вы найдете его здесь.

Введение

В рамках Frontend Conference в Цюрихе Рэйчел Эндрю рассказала о раскрытии возможностей CSS Grid Layout. В конце своего выступления она упомянула о старой особенности CSS, которая запала мне в голову: «Изображение настраивается с помощью хорошо поддерживаемого border-radius. Не забывайте, что старые свойства CSS все еще существуют и являются весьма полезными. Вам не нужно использовать что-то фантастическое для достижения эффекта».

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

Освоение border-radius

Единственное значение
Начнем с основ. Надеюсь, это не утомит вас. Если вы знакомы с CSS, то вы слышали о свойстве border-radius. Оно существует уже несколько лет и в основном используется с одним значением, например, border-radius: 1em, став одним из самых обсуждаемых/ любимых свойств CSS3 с 2010 года, когда сайт css3please.com стал вашим лучшим другом.

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

Как видно из приведенного выше примера, наряду с фиксированными значениями длины, такими как px, rem или

em, вы можете использовать проценты. Как правило, они используются для создания круга с border-radius 50%. Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете процентное значение для прямоугольника, у вас не будет симметричных углов. Ниже приведен пример, показывающий разницу между свойствами border-radius: 110px и border-radius: 30% применимо к прямоугольнику.

^{Заметьте, что углы на примере справа не симметричны. Мы вернемся к этому позже.}

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

Восемь значений, разделенных слешем (вот это представляет интерес)
Я думаю, что большинство из вас делали все то, о чем речь шла ранее. А вот сейчас мы добрались до наиболее захватывающей части. Что произойдет, если вы укажете до восьми значений, разделив их слешем? Давайте посмотрим, что говорит об этом спецификация

W3C

«Если значения заданы до и после слеша, то значения ДО заданы для горизонтального радиуса, а значения ПОСЛЕ для вертикального радиуса. Если слеш отсутствует, то значения задают оба радиуса».

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

Поэтому результаты будут совершенно разные при использовании свойства border-radius: 4em 8em и border-radius: 4em / 8em.

^{Симметричные углы слева формируют четверть круга, тогда как асимметричные углы справа являются частью эллипса.}

Откровенно говоря, фигуры, которые вы получаете, выглядят немного странно. Но помните круги, которые вы создали с помощью свойства border-radius: 50%. Вы получаете круг, поскольку оба значения, определяющие одну сторону, составляют 100% (50% + 50% = 100%), и не остается прямой линии, что напомнило бы вам первоначальный квадрат. Если применить эту же логику к синтаксису border-radius с восемью значениями, то можно создать фигуру, которая немного похожа на медиатор или органическую клетку:

^{В итоге получается пересечение четырех эллипсов, образующих конечную фигуру.}

Без паники… мы сделали для вас визуальный генератор
Мне потребовалось некоторое время, чтобы привыкнуть к этому синтаксису. Это не произошло интуитивным путем. Чтобы облегчить вам жизнь, мы сделали небольшой инструмент, который поможет вам создать естественную форму.

(НЕ) перекрещивать лучи
Теперь, когда вы имеете представление о 8 значениях, вам станет немного грустно, потому что наш border-radius инструмент не дает возможности установить каждое значение по отдельности. Не сдавайтесь, вот версия 8-POINT-FULL-CONTROL.

Если вы достаточно взрослые, то можете вспомнить цитату из фильма 1984 г. Ghostbusters (Охотники за привидениями):

«Никогда не скрещивайте лучи!» — «Почему?» — «Будет плохо»

Здесь что-то похожее: если вы поменяете местами ползунки на одной стороне, то форма поведет себя… скажем, непредсказуемо. Посмотрите на это сами. Конечно, это не приведет к изменению заряда протонов, но не говорите, что я вас не предупреждал.

PS: Огромная благодарность simurai. В далеком 2010 г. он создал CSS3 BonBon Buttons. Хотя они и выглядят немного устаревшими, но это единственное место, где я случайно нашел информацию о слеш-синтаксисе.

Вот это крутое свойство в действии:

Заглядывайте на VPS.today — сайт для поиска виртуальных серверов. 1500 тарифов от 130 хостеров, удобный интерфейс и большое число критериев для поиска самого лучшего виртуального сервера.

html — Создание круга с использованием `border-radius`

Вопрос задан 5 лет, 1 месяц назад

Изменено 5 лет, 1 месяц назад

Просмотрено 5k раз

Я читаю HTML и CSS Джона Дакетта и познакомился со свойством border-radius .

Я пытаюсь создать круг, используя приведенный ниже код, но круг не идеален. Я использую радиус 50px , но это не идеально.

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
}

стр. три {
  отступ: 0px;
  радиус границы: 50 пикселей;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
} 

Что я делаю не так?

• HTML
• CSS

1

отступ и ширина границы вычисляются дополнительно к ширине и высоте вашего элемента.

У вас есть разные варианты решения этой проблемы:

1. добавьте box-sizing: border-box к вашему элементу, который определяет, что должно включаться в расчет размера
2. использовать радиус границы: 50%
3. добавьте ширину границы и отступы к радиусу границы .

Здесь решение только с box-sizing

 p {
  отображение: встроенный блок;

  поле: 20 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;

  /* эти значения добавляются к вашим 100px по умолчанию */
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
}

стр. три {
  отступ: 0px;
  радиус границы: 50 пикселей;
  
  /* теперь ширина и высота определяют размер вашего
     элемент в целом */
  box-sizing: граница-коробка;
} 

Более подробное объяснение блочной модели CSS см. в этой статье на MDN.

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

См. ниже.

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
}

стр.  три {
  отступ: 0px;
  радиус границы: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
} 

0

Это потому, что вы не учли ширину, исходящую от ширины границы, которая составляет 5px на каждом конце. Таким образом, общая ширина составляет 110 пикселей , поэтому радиус границы должен быть 55 пикселей . Более простой способ для идеального круга — просто установить border-radius на 50% .

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
}

стр. три {
  отступ: 0px;
  радиус границы: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
} 

0

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

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
}

стр. три {
  отступ: 0px;
  радиус границы: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
} 

1

Еще один вариант — установить для свойства box-sizing вашего элемента значение border-box (как я делаю почти для всех элементов).

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
  box-sizing: граница-коробка; /* < -------------------- здесь */
}

стр. три {
  отступ: 0px;
  радиус границы: 50 пикселей;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
} 

Border-box учитывает границы при выполнении математических операций и обычно упрощает компоновку и стилизацию при повсеместном применении. Библиотеки вроде Bootstrap делают это за вас.

0

Твой ответ

Зарегистрируйтесь или войдите

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Овал в результате радиуса границы: 100% - CSS FAQ

axelkaban 28 сентября 2018 г. , 22:18

#1

Вопрос

почему установка радиуса границы #banner .content h2 на 100% дает мне овал, а не круг?

Ответ

Наличие 100% на радиусе границы должно дать вам идеальный круг, это правильно, только если высота и ширина элемента одинаковы. То есть вам нужно, чтобы квадратный элемент имел круглую границу. Кроме того, если ваш элемент не имеет определенных размеров, он зависит от размера контейнера и его собственного содержимого, и поэтому вам нужно будет настроить его размеры, если ваша цель — получить круглую границу.

31 лайк

gregbutler1016 2 сентября 2019 г., 4:38

#2

Отличный ответ! Спасибо.

1 Нравится

текст5695674026 25 октября 2019 г., 14:43

#3

Установка радиуса границы на 50% достаточна для получения овала.

4 нравится

объект8774281833 15 февраля 2020 г., 13:41

#4

Спасибо за информацию братан.

шафи.alvi99 30 апреля 2020 г., 16:15

#5

Спасибо за ответ.

Я немного не понимаю, почему содержимое выходит за границы? Разве содержимое не должно быть внутри границы, поскольку граница окружает область содержимого (в случае отсутствия отступов)?

2 лайка

байт0922555261 10 мая 2020 г. , 12:01

#6

, потому что по умолчанию для свойства переполнения установлено значение «видимый», и поэтому содержимое видно за пределами границы
Но если вы установите для свойства переполнения значение «скрытое/прокручиваемое»… в пределах границы элемента

6 лайков

разработчик26722

19 мая 2020 г., 12:07

#8

Capture d’écran 2020-05-19 à 14.03.11812×956 562 КБ

Здравствуйте, спасибо за ответ, но все равно текст не очень видно. Как я могу поместить текст в центр этого круга? Пробую с text-alight и margin-top, но весь блок меняет место, а не только текст внутри.
Спасибо!

4 лайков

dev26722

19 мая 2020 г. , 12:20

#9

Мне нужно добавить:
#banner .content h2
{
display: flex;
элементов выравнивания: по центру;
}

11 лайков

15 июля 2020 г., 13:02

#10

Здравствуйте!

Можно спросить и заинтересовать?
Почему, когда я пытаюсь создать радиус границы в моем поле границы здесь (в селекторе #banner .content h2) и хочу создать радиус границы круга, создается только овал? Я пытаюсь, поскольку он говорит, что радиус границы должен быть таким же, как ширина и высота вашего поля границы. Попробуйте также установить даже 100% (не только в пикселях). Что я могу сделать не так?

Большое спасибо

samyadel 28 августа 2020 г. , 19:35

#11

Чтобы граница элемента была идеальной окружностью, не только свойство border-radius должно быть установлено на 50% (да, этого достаточно, нет необходимости в 100% ), но и width и height свойства этого элемента должны быть одинаковыми. Это означает, что если бы мы не изменили border-radius этого элемента, граница должна получиться в виде идеального квадрата

3 лайков

солнечный мечтатель 27 ноября 2020 г., 19:35

#12

Как объяснить значение радиуса границы 50%/30%/100%…?

Макивелли 28 января 2021 г. , 2:35

№13

вы также можете просто добавить верхний отступ

брызгалки 9 марта 2021 г., 8:21

№14

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

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

самадель 21 апреля 2021 г. , 16:31

№15

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

2 «Нравится»

Использование свойства CSS Border Radius для создания круга

• Введение
• Что такое радиус границы CSS
• Создать круг
• Четверть круга и полукруг
• Значения радиуса границы
• Заключение

Введение:

  Это одно из свойств стиля в CSS, которое помогает настроить кривые вашего изображения или границы. Это в основном для привлечения клиентов и стильного. Это отличное мощное свойство радиуса границы CSS, но иногда его синтаксис может немного сбивать с толку. Мы знаем, что каждый элемент HTML занимает прямоугольную рамку в окне браузера. Вы можете заметить, что углы прямые.

Что такое радиус границы CSS:

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

При установке радиуса границы на одно значение. Все углы будут округлены на одно и то же значение. Если это статическое значение, такое как пиксель, вы всегда получите симметричный угол. Но если это проценты, радиус будет основан на ширине и высоте элемента. Вы также можете использовать специальные свойства угла, такие как граница вверху справа, они эквивалентны, но длиннее для ввода. По умолчанию border-radius будет применять одно и то же значение как к горизонтальному, так и к вертикальному радиусу, но вы также можете добавить косую черту к значению, чтобы управлять ими отдельно. Пример: border-radius: 100px/150px. Мы можем добавить до восьми значений с косой чертой, чтобы создать полную форму. Используя инструменты Mirko и Nils, чтобы упростить задачу, вы можете просто щелкнуть и перетащить каждую точку для управления. Большинство людей используют радиус границы для кнопок и изображений.

У нас есть элемент Div с определенной высотой и шириной, и мы хотели бы стилизовать его угол. Мы можем сделать это с помощью свойства радиуса границы, которое позволяет нам добавить закругленный угол к любому элементу.

Создать круг

 Круг {
ширина: 200 пикселей;
высота: 200 пикселей;
цвет фона: красный;
радиус границы: 50%;
отступ: 20 пикселей;
граница: сплошная черная 10px;
поле: 20 пикселей;
} 

Со свойством радиуса границы только для этого нам нужно дать более сильное значение здесь, на самом деле на этот раз давайте определим другую единицу вместо пикселей, мы можем использовать процент. Когда мы даем минимальное значение 50% или даже больше, оно полностью скругляет углы со всех сторон. Если мы хотим иметь овальную форму, мы можем увеличить высоту или ширину элемента. Одно единственное значение свойства радиуса границы скругляет все углы элементов.

Но на самом деле их также можно добавлять по одному для каждого угла, для этого также есть сокращение. Сначала позвольте мне показать вам обычную скорость, поэтому, скажем, мы хотим, чтобы это делали только верхние левые углы, поэтому давайте сначала удалим это. Нам нужно выбрать свойство (граница-верхний-левый-радиус) и снова на 50%, что округляет только верхний левый угол поля.

Четверть круга и полукруг

Четверть круга :

 .Четверть круга {
ширина: 300 пикселей;
высота: 300 пикселей;
цвет фона: красный;
граница-верхний-левый-радиус: 100%;
граница-верхний-правый-радиус: 0;
граница-нижний-левый-радиус: 0;
граница-нижний-правый-радиус: 0;
} 

Полукруг :

 . Полукруг {
ширина: 600 пикселей;
высота: 300 пикселей;
цвет фона: красный;
граница-верхний-левый-радиус: 50% 100%;
граница-верхний-правый-радиус: 50% 100%;
граница-нижний-левый-радиус: 0;
граница-нижний-правый-радиус: 0;
} 

  И вы можете легко создать полукруг и четверть круга, используя это свойство. Лучший способ написать код здесь. Сначала мы можем с помощью простых методов кода создать четверть круга. Эти значения ширины и высоты должны соответствовать одному и тому же значению, вы не можете увеличивать или уменьшать значение радиуса верхнего левого края границы, его точное значение равно 100%. Радиус остальных трех углов равен 0. Запустите этот код, и вы увидите, что создается четверть круга.

  Далее идет полукруг, он создается для выполнения следующих шагов: Значение высоты должно быть вдвое меньше значения ширины. Радиус верхней левой и правой границы должен составлять 50% 100%. На самом деле это означает, что горизонтальный радиус должен составлять 50% от ширины и будет составлять 600 на два 300. Здесь 100% означает вертикальный радиус. Вы знаете, что горизонтальный радиус имеет разные значения. Если вы сохраните одно единственное значение, это означает, что вы хотели бы, чтобы они оба были одинаковыми. Единственное значение 50% означает горизонтальный радиус по вертикали. В данном случае 50% от 600 — это 300. У меня были проценты роста 300 и 300 (9).0005

Значения радиуса границы:

 .values{
радиус границы: 20px 50% 0 50%;
} 

  Существуют также другие свойства для верхнего правого, нижнего правого и нижнего левого угла. Но определение их здесь по одному заполняет наш класс множеством ненужных текстов. Итак, теперь мы можем использовать его короткий конец, если снова определим свойство радиуса границы. Мы можем определить четыре значения для каждого из углов, первое значение равно 20px для верхнего левого угла. Второй для верхнего правого угла составляет 50%, затем идет нижний правый угол, давайте сделаем его равным нулю, и последний для нижнего левого угла, давайте также сделаем его 50%. Теперь вы можете запустить с помощью любого редактора кода, вы можете видеть, что верхний левый угол слегка закруглен, верхний правый и нижний левый округлены до максимального значения, а нижний правый угол - третье значение здесь не округлено.

Вывод:

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

CSS Border-Radius может это сделать?

Как создать очень крутые эффекты с помощью редко используемой функции.

TL/DR: Когда вы используете восемь значений, определяющих радиус границы в CSS, вы можете создавать органично выглядящие формы. ВОТ ЭТО ДА. Нет времени все читать? — мы сделали для вас визуальный инструмент. Найдите его здесь.

В этом году на Frontend Conference в Цюрихе Рэйчел Эндрю рассказала о «Раскрытие возможностей CSS Grid Layout ». В конце своего выступления она упомянула что-то о старом свойстве CSS, которое застряло у меня в голове:

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

 — Рэйчел Эндрю

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

 

Освоение Border-Radius

Single Value

Начнем с основ. Надеюсь, это не утомит вас. Вы, вероятно, знакомы с CSS, а также с радиусом границы. Он существует уже несколько лет, в основном используется с одним значением, подобным этому: border-radius: 1em и, возможно, была одной из самых обсуждаемых/любимых функций CSS3 в 2010 году, когда css3please.com был вашим лучшим другом.

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

Как вы можете видеть в приведенном выше примере, рядом со значениями фиксированной длины, такими как px , rem или em вы также можете использовать проценты. Они в основном используются для создания круга, установив радиус границы на 50%. Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете его на прямоугольнике, у вас больше не будет симметричных углов. Вот пример, показывающий разницу между border-radius: 110px и border-radius: 30% применяется к прямоугольнику.

Обратите внимание, что углы с правой стороны не симметричны, и имейте это в виду. Мы вернемся к этому позже.

Четыре разных значения

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

Восемь значений, разделенных косой чертой (это самое интересное)

Я думаю, что большинство из вас уже сделали все, что я объяснил выше. Теперь мы подошли к захватывающей части. Что произойдет, если вы разделите значения косой чертой и укажете до восьми значений? Посмотрим, что об этом говорит спецификация:

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

— W3C

Таким образом, значения до косой черты отвечают за горизонтальные расстояния, тогда как значения после косой черты определяют длины по вертикали. Но что это значит? Помните процентные значения прямоугольных фигур? У нас были разные абсолютные значения для вертикальных и горизонтальных расстояний и асимметрично закругленных углов, и это именно то, что вы получаете, когда используете синтаксис косой черты .

Итак, когда вы сравниваете border-radius: 4em 8em 9От 0014 до border-radius: 4em / 8em результаты совсем другие.

Симметричные углы слева образуют четверть круга, тогда как асимметричные углы справа являются частью эллипса.

Формы, которые вы получаете с этим, выглядят немного странно, если честно. Но помните круги, которые вы создаете с радиусом границы : 50% . Вы получаете круг, потому что оба значения, определяющие одну сторону, в сумме составляют 100% (50% + 50% = 100%), и прямой линии не осталось, что напоминает исходный квадрат. Если вы примените ту же логику к полному синтаксису границы-радиуса с восемью значениями, вы можете создать форму, которая немного похожа на плектр или органическую клетку:

В итоге четыре перекрывающихся эллипса создают окончательную форму. Легко ха!

Не паникуйте… Мы сделали для вас визуальный генератор

Мне потребовалось некоторое время, чтобы привыкнуть к этому синтаксису. Как-то не очень интуитивно. Чтобы упростить вам задачу, мы создали небольшой инструмент, который поможет вам создать собственную органическую форму.

 

Не пересекать потоки

Теперь, когда вы знаете о 8 значениях в общей сложности, вам может быть немного грустно, потому что наш инструмент радиуса границы не дает вам возможности установить каждое значение отдельно… Сидите спокойно, вот 8-ТОЧЕЧНЫЙ ПОЛНЫЙ УПРАВЛЕНИЕ Версия .

Если вы достаточно взрослые, вы, возможно, помните эту цитату из фильма «Охотники за привидениями» 1984 года:

«Не переходи ручьи». - "Почему?" — «Было бы плохо».

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

PS. Большое спасибо simurai. Еще в 2010 году он создал несколько кнопок BonBon на CSS3. Несмотря на то, что они выглядят немного устаревшими, это единственное место, где я когда-либо сталкивался и узнал о синтаксисе косой черты.

 

Посмотрите эту замечательную функцию в действии

Фотографии с сайта gratisography.com

 

Эта статья изначально была опубликована на Medium, перепечатана с разрешения автора.

Границы | Webflow University

Границы определяют радиус элемента и создают контуры на одной или нескольких сторонах границы элемента. Вы можете определить границу и радиус любого выбранного элемента на панели «Стиль».

На этом уроке:

1. RADIUS
2. Стиль
3. Ширина
4. Цвет
5. Формы
6. Antyside
Ervise Antipends AntiveDes AntiveDes AntiveDess. границы элемента. Границы занимают место, расширяя размеры элемента. В случае элементов с определенным размером границы будут сталкиваться с содержимым внутри.

Чтобы добавить эффект границы без увеличения размеров элемента, добавьте внутреннюю или внешнюю тень блока с размытием 0.

Радиус

Задайте радиус всех углов или отдельных углов элемента для создания закругленных углов.

По умолчанию радиус задается в пикселях (px). Чтобы использовать проценты, введите процентное значение и символ (%) в любое поле ввода границы. Вы также можете использовать любую единицу CSS из раскрывающегося списка единиц измерения.

Подробнее о ввод значений и единиц измерения .

Стиль

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

Некоторые встроенные элементы имеют границы по умолчанию, такие как поля ввода формы и блок-кавычки. Вы можете удалить границы по умолчанию, установив для стиля границы значение none.

Ширина

Ширина определяет толщину границы. Это значение может иметь любую единицу CSS из списка, доступного в раскрывающемся списке единиц измерения.

Подробнее о вводимых значениях и единицах измерения .

Цвет

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

Формы

По умолчанию установка радиуса элемента будет применяться ко всем углам. Вы можете установить значение, перетащив ползунок или введя значение в поле ввода.

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

Формы капсул

Для форм капсул установите значение радиуса в пикселях, превышающее половину самого короткого измерения элемента. Большее число, например 500, обычно работает, если вы хотите пропустить расчеты.

Эллипсы

Для эллипсов установите радиус 50%. Проценты основаны на ширине и высоте элемента


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


Круги

Для кругов установите радиус 50% и убедитесь, что ширина и высота элемента одинаковы.

Уникальные формы

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

Прямоугольник в круг

Чтобы сделать прямоугольное изображение круглым, не искажая его, вы можете использовать радиус и подгонку объекта, чтобы поместить изображение в блок Div — вот как:

1. Перетащите A Div Block на Canvas
2. Перетащите изображение внутри блока Div
3. Выберите Div Block
4. Нажмите на панель > SELECE (например, держатель изображения) 
5. Установите равную высоту и ширину (например, 400 пикселей)
6. Установите радиус на 50% (чтобы сделать его круглым, поскольку ширина и высота равны)
7. Сделать переполнение скрытым (чтобы скрыть любую часть изображения, выходящую за пределы круга)
8. Выбрать изображение на холсте
9. Установить для изображения ширину и высоту на 100%

   Установить

   4 для покрытия (для покрытия пространства внутри круглого блока div)
10. Нажмите на эллипсы рядом с , чтобы установить , чтобы расположить круглое покрытие (чтобы прикрепить его к углу или к центру)
    

Стороны и края

На панели «Стиль » > «Границы» можно стилизовать сразу все стороны (щелкнув в середине) или отдельные стороны.

Если вы создаете и оформляете рамку сверху, это влияет только на верхнюю часть. Если вы создаете и оформляете границу слева, это влияет только на левую сторону.

Скосы

Скосы придают изображению глубину.

‍
Чтобы добавить эффект скоса к кнопке, откройте панель стилей > Границы :

1. Добавьте границу со всех сторон кнопки (например, установите для всех сторон ширину 10 пикселей)
2. Добавьте цвет границы (отличный от цвета кнопки) для всех сторон 
3. Нажмите одну сторону границы на панели «Стиль»
4. Щелкните цвет и добавьте цвет (отличный от исходного цвета границы)
5. Изменение ширины одной стороны

Анимированные переходы

У вас есть возможность стилизовать что угодно на панели «Стиль» — давайте стилизуем кнопку для анимации парить.

‍
Чтобы скруглить углы кнопки при наведении:

1. Выберите кнопку на холсте
2. Нажмите на панель стилей > Selector и выберите Hover Прокрутите вниз до Border 6s
вниз и добавьте радиус (например, 10 пикселей) 

Измените селектор на наведение

Чтобы вернуть кнопку в исходное состояние при наведении и создать плавный переход:

1. Выберите кнопку на холсте
2. Нажмите на панель стиля > Селектор и выберите Нет из раскрывающегося
3. . Прокрутите вниз до Эффекты > Переход > Тип > ПЕРЕДИТЫ > Тип > ПЕРЕДИТЫ > Тип > ПЕРЕДИТЫ > Тип > . Селектор на noneДобавить переход на Border-Radius

   Чтобы удалить эту анимацию:

   1. Выберите кнопку на холсте
   2. Нажмите на панель стилей > Selector and choose Hover from the dropdown
   3. Scroll down to Borders > Radius > Reset
      

   To give your button rounded corners on click:

   4. Select the button on the холст
   5. Нажмите на панель Style > Selector и выберите Pressed из раскрывающегося списка
   6. Прокрутите вниз до Borders и добавьте радиус (например, 10 пикселей) 

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

   И обязательно ознакомьтесь с нашим полным курсом по анимации с помощью After Effects и Lottie.

   Попробуйте Webflow — это бесплатно

   Был ли этот урок полезен? Дайте нам знать!

   Спасибо за отзыв! Это поможет нам улучшить наш контент.

   Свяжитесь с нашим сообществом

   Свяжитесь со службой поддержки

   Что-то пошло не так при отправке формы.

   Связаться со службой поддержки

   У вас есть предложение по уроку? Дайте нам знать

   Спасибо! Ваша заявка принята!

   Ой! Что-то пошло не так при отправке формы.

   радиус границы | Коддропс

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

   Это сокращенное свойство полных свойств: граница-верхняя-левая-радиус , граница-верхняя-правая-радиус , граница-нижняя-правая-радиус и граница-нижняя-левая-радиус .

   border-radius может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/», от одного до четырех значений с каждой стороны косой черты.

   1. Если косой черты нет, то: может принимать одно, два, три или четыре значения.

      border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?; // '?' указывает, что значение является необязательным
                                   

      • Если даны четыре значения, то они одинаково определяют радиусы каждого из четырех углов; то есть первое значение будет определять радиусы x и y верхнего левого угла, поэтому это будет круговая кривая. Второе значение задает радиусы для правого верхнего угла, третье значение задает радиусы для правого нижнего угла, а четвертое значение задает радиусы левого нижнего угла.
      • Если даны три значения, первое указывает радиусы верхнего левого угла, второе указывает радиусы верхнего правого и нижнего левого углов, а третье указывает радиусы нижнего правого угла.
      • Если задано два значения, то первое указывает радиусы верхнего левого и нижнего правого углов, а второе значение указывает радиусы верхнего правого и нижнего левого углов.
      • Если задано одно значение, то оно указывает одинаковые радиусы четырех углов.

      Например, следующее:

      радиус границы: 1em 3em 2em;
                                       

      эквивалентно:

      радиус верхнего левого края: 1em;
      радиус верхней правой границы: 3em;
      граница-нижний-правый-радиус: 2em;
      радиус нижнего левого края: 3em;
                                       

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

      Два равных радиуса на каждом углу приведут к круглой кривизне. Каждый угол в этом примере имеет горизонтальный и вертикальный радиусы 50 пикселей.

   2. Если есть косая черта, то: она может принимать до восьми значений — от одного до четырех значений с каждой стороны косой черты.

      border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?
       

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

      Например, следующее:

      радиус границы: 2em 1em 4em / 0. 5em 3em;
                                   

      эквивалентно:

      граница-верхний-левый-радиус: 2em 0,5em;
      радиус верхней правой границы: 1em 3em;
      граница-нижний-правый-радиус: 4em 0.5em;
      граница-нижний-левый-радиус: 1em 3em;
                                   

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

      Два неравных радиуса на каждом углу приведут к эллиптической кривизне. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.

   Общая информация и заметки

   Если элемент имеет фоновый цвет или фоновое изображение, фон также будет обрезан до указанного радиуса границы.

   Фоновое изображение элемента обрезается до указанного радиуса границы.

   Однако иногда цвет фона элемента может «вытекать» за пределы кривизны границы при ее скруглении. Чтобы исправить это, вы можете использовать background-clip и установите для него значение padding-box .

   .элемент {
       радиус границы: 30px;
       фоновый клип: padding-box;
   }
                    

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

   Содержимое элемента может выйти за пределы элемента на закругленных углах, если у элемента недостаточно отступов, чтобы «протолкнуть» содержимое внутрь. (См. изображение ниже)

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

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

   .элемент {
       фон: черный;
       белый цвет;
       радиус границы: 1em;
       набивка: 1em;
   }
                    

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

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

   Процентные значения идеально подходят для создания полных круглых или эллиптических форм. Используя радиус границы : 50%; приведет к полной круглой форме элемента, высота и ширина которого равны.

   Элемент с одинаковой высотой и шириной и значением радиуса границы 50%;

   Если высота и ширина элемента не равны, результирующая форма будет эллипсом.

   Элемент с радиусом границы 50%, высота и ширина которого не равны.

   Значения

   Неофициальный синтаксис выглядит так:

   border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;
                                

   или это:

   border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?
    

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

   Каждый радиус может иметь значение <длина> или <процент> .

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

   <процент>

   См. запись для списка возможных значений.

   <длина>

   См. запись для списка возможных значений.

   Примеры

   радиус границы: 50%;
   радиус границы: 30px 20px 40px;
   радиус границы: 1em 2em;
   радиус границы: 3em / 2em 4em;
   радиус границы: 1em 2em 1em 3em / 2em 3em;
                    

   Поддержка браузера

   Рабочий стол

   • 5
   • 50
   • 10
   • 5

   Мобильный / Таблетка

   • 4,0
   • 2,2
   • NO
   • 105
   • 104
   9 0002 * Denotes Prefix.

   No related posts.