Радиус

Содержание

border — radius
Пример
Как понять
Как пишется
Подсказки
На практике
Realetive советует
Алёна Батицкая советует
Инвертировать закругленный угол в CSS?
10 ответов
Использование изображения рамки
Использование радиального градиента
Скруглённые уголки

border — radius

Свойство border — radius закругляет углы почти у любого элемента. И даже если у блока не задана явная рамка.

🔮 Волшебное свойство! Часто нужно в работе, поскольку дизайнеры не любят острые углы.

Пример

Скопировать ссылку «Пример» Скопировано

Самая простая штука — кнопка с закруглёнными краями:

  button class="btn">Купитьbutton>

 .btn  border: none; border-radius: 5px;> .btn  border: none; border-radius: 5px; >

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

Если при нажатии добавлять кнопке внутреннюю тень такого же цвета, что и фон, она будет «нажиматься» — получится привлекательно и современно 😉

 body  background-color: #e6e6e6;> .btn:focus  box-shadow: inset 0 0 0 3px #e6e6e6; transition: all 0.2s;> body  background-color: #e6e6e6; > .btn:focus  box-shadow: inset 0 0 0 3px #e6e6e6; transition: all 0.2s; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство border — radius задаёт радиус закругления каждого из углов элемента.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 div  /* радиус в пикселях */ border-radius: 5px; /* радиус в процентах */ border-radius: 50%; /* разные радиусы для каждого из четырёх углов элемента */ border-radius: 5px 0 0 50%;> div  /* радиус в пикселях */ border-radius: 5px; /* радиус в процентах */ border-radius: 50%; /* разные радиусы для каждого из четырёх углов элемента */ border-radius: 5px 0 0 50%; >

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

 .ellipse  border-radius: 5em / 50%;> .ellipse  border-radius: 5em / 50%; >

Такая запись совсем не означает, что наше скругление будет равно результату деления 5em на какой-то размер, а эквивалентна такой записи:

 .ellipse  border-top-left-radius: 5em 50%; border-top-right-radius: 5em 50%; border-bottom-right-radius: 5em 50%; border-bottom-left-radius: 5em 50%;> .ellipse  border-top-left-radius: 5em 50%; border-top-right-radius: 5em 50%; border-bottom-right-radius: 5em 50%; border-bottom-left-radius: 5em 50%; >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 border — radius сработает даже если не будет задана видимая рамка.

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

💡 Можно управлять радиусом закругления каждого угла в отдельности при помощи свойств:

border — top — left — radius — радиус закругления для левого верхнего угла.
border — top — right — radius — радиус закругления для правого верхнего угла.
border — bottom — right — radius — радиус закругления для правого нижнего угла.
border — bottom — left — radius — радиус закругления для левого нижнего угла.

На практике

Скопировать ссылку «На практике» Скопировано

Realetive советует

Скопировать ссылку «Realetive советует» Скопировано

🛠 Если вы не уверены, что блок всегда будет квадратным, то для подстраховки можно указывать закругление в абсолютных единицах. Причём указать значение, бо́льшая чем максимальная ширина и высота блока. Например, border — radius : 9999px . Если в этой ситуации указывать закругление в процентах, то значение будет считаться от ширины и высоты. Что приведёт к вытягиванию блока в яйцо:

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Самый крутой лайфхак — это круглые элементы при помощи border — radius . Они часто нужны для всяких лейблов на странице.

 button class="icon" data-notifications="3">button>

 .icon  background-image: url(eyes.png);> .icon::after  content: attr(data-notifications); /* равные ширина */ width: 25px; /* и высота */ height: 25px; /* закругляем углы на 50% */ border-radius: 50%; color: #ffffff; background-color: #ed4242;> .icon  background-image: url(eyes.png); > .icon::after  content: attr(data-notifications); /* равные ширина */ width: 25px; /* и высота */ height: 25px; /* закругляем углы на 50% */ border-radius: 50%; color: #ffffff; background-color: #ed4242; >

Источник

Инвертировать закругленный угол в CSS?

Получаю результат: Есть ли какие-либо возможности для этого:

10 ответов

Просто для обновления, кажется, вы можете несколькими способами. Lea Verou опубликовала решение Вот мое использование border-image

Использование изображения рамки

Использование радиального градиента

В современных браузерах вы можете использовать mask-image :

Кроме того, посмотрите http://www.html5rocks.com/en/tutorials/masking/adobe/, в котором описывается, как добиться аналогичного результата с помощью mask-box-image .

Большое спасибо за этот радиальный градиент — я использовал тот, который не был идеальным, но теперь я смог достичь того, что я пытался сделать! Посмотрите, получилось довольно круто 🙂 jsfiddle.net/emilbroll/dgtceno3/3

Вы также можете использовать inline svg с элементом :

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

При таком подходе вы также можете заполнить фигуру изображением или градиентом:

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

Вам нужен браузер, который понимает: before/: after и box-shadow:).

Для IE8 вы можете рисовать границы hudge вместо теней. http://codepen.io/anon/pen/fFgDo

псевдоэлемент может принимать любую форму и преобразовывать через css и устанавливать любое место в своем элементе, чтобы нарисовать вид отверстий через: examples: http://codepen.io/gc-nomade/pen/nKAka

К сожалению, в настоящее время не существует решения на основе официальных или реализованных спецификаций CSS: (

Однако, как добавили другие люди, существуют возможные решения (или читы?), которые вы можете сделать для достижения такого же эффекта с использованием JS-библиотек или сложных реализаций HTML/CSS. Я столкнулся с этим вопросом, ища способ сделать еще более сложные углы, чем OP без использования изображений.

Я зарегистрировал ошибку (Feature Request) на сайте webkit — поскольку, похоже, не было уже зарегистрировано.

Есть способы решить эту проблему, используя только CSS — однако это будет зависеть от цвета вашего фона (если это будет проще), если у вас есть шаблон для фона, он может быть немного сложнее.

В качестве примера я расскажу о том, как сделать обратный радиус границы в CSS (здесь). Это использует трюк с размером Border для использования внутри, вам может потребоваться некоторое позиционирование, чтобы заставить его работать правильно, но, как вы можете видеть, это возможно. Особенно, если вы укажете background-color для каждого span .

Если вам нужны все 4 угла, вам нужно будет добавить отдельный класс для каждого span внутри вашего div, и каждый класс будет имитировать угол, верхний левый, верхний правый и т.д.

Источник

Скруглённые уголки

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

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

Код	Описание	Вид
div	Радиус скругления для всех уголков сразу.
div	Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div	Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div	Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

В примере 1 показано создание блока со скруглёнными уголками.

HTML5 CSS3 IE 9+ Cr Op Sa Fx

       Меня — супплетивная форма винительного падежа от я.

Результат данного примера показан на рис. 1.

Рис. 1. Блок со скруглёнными уголками

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 2.

В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .

Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

HTML5 CSS3 IE 9+ Cr Op Sa Fx