Как закруглить блок css

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

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

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

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

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

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

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

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

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

Пример 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 2. Круглая кнопка

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

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

Пример 3. Свечение

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

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

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

Пример 4. Эллипсы

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 4. Использование эллиптических уголков

Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.

Пример 5. Изображения

HTML5 CSS3 IE 9+ Cr Op Sa Fx

     body < background: #4b5457; >img 
 
  

Как скруглить углы внутрь блока с обводкой

Интересует верстка блока с закругленными внутрь углами. Важно не просто их скруглить, но и сохранить обводку у блока.

Отслеживать
задан 26 окт 2016 в 8:35
Katerina Pidan Katerina Pidan
165 1 1 серебряный знак 7 7 бронзовых знаков

Можно еще посмотреть в сторону jquery решения если не хочется возиться с css malsup.com/jquery/corner

26 окт 2016 в 9:02

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Версия @Ruslan_K, но с границами:

#main < margin: 40px; height: 100px; background-color: #1abc9c; position: relative; overflow: hidden; >#main .edge < position: absolute; >#main .edge.top < top: 0; left: 10px; right: 10px; bottom: 0; border-top: 1px solid #000; border-bottom: 1px solid #000; >#main .edge.left < left: 0; top: 10px; bottom: 10px; right: 0; border-left: 1px solid #000; border-right: 1px solid #000; >#main .corner < position: absolute; width: 20px; height: 20px; border-radius: 100%; background-color: #FFF; border: 1px solid #000; >#main .corner.top < top: -10px; >#main .corner.bottom < bottom: -10px; >#main .corner.left < left: -10px; >#main .corner.right

Отслеживать
ответ дан 26 окт 2016 в 8:52
Surfin Bird Surfin Bird
2,362 1 1 золотой знак 9 9 серебряных знаков 22 22 бронзовых знака

Основная идея: вырезать лишние области с помощью псевдоэлементов.
Понадобится всего два блока в разметке ( .wrapper и .content ):

* < box-sizing: border-box; >.wrapper < background-color: #efefef; width: 300px; height: 60px; margin: 40px; /** * Ключевые свойства * С помощью position: relative будем позиционировать псевдоэлементы для вырезания границ * С помощью overflow: hidden будем делать сектора */ position: relative; overflow: hidden; >/* Для наглядной демонстрации работы, не нужно в проекте */ .wrapper.demo < border: 2px solid #bad; overflow: visible; >.content < /* Цвет границы блока должен совпадать с границей будущих вырезанных секторов */ border: 2px solid #07c; width: 100%; height: 100%; >.wrapper::before, .wrapper::after, .content::before, .content::after < /* Цвет следует подобрать в цвет фона сайта для перекрытия части основного блока */ background-color: #fff; /* Цвет границы блока должен совпадать с границей основного блока */ border: 2px solid #07c; /* Делаем окружность */ border-radius: 50%; content: ''; /* Позиционируется относительно .wrapper. Это важно для понимания. */ position: absolute; width: 30px; height: 30px; >/* Позиционирование будущих секторов: верхний ряд */ .wrapper::before, .wrapper::after < top: -15px; >.wrapper::before < left: -15px; >.wrapper::after < right: -15px; >/* Позиционирование будущих секторов: нижний ряд */ .content::before, .content::after < bottom: -15px; >.content::before < left: -15px; >.content::after

Блок с классом .demo добавлен только для понимания того, как это все работает.

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

Сгенерировать градиент можно с помощью online-сервиса Ultimate CSS Gradient Generator.

Как полностью заполнить блок изображением?

2ое изображение не заполняет блок. Как это сделать?

.photos__img < width: 100%; >.photos__content < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); text-align: center; padding-top: 1%; opacity: 0; transition: all .25s; &: hover < opacity: 1; padding-top: 5%; >> .photos__item < padding: 0; >.photos__btn, .photos__desc < color: #fff; >.photos__content .photos__btn

 
  
title
 
photos__desc
 Посмотреть 
 
 
  
title
 
photos__desc
 Посмотреть 
 

Отслеживать
1,640 14 14 серебряных знаков 20 20 бронзовых знаков
задан 21 янв 2017 в 12:58
1,698 2 2 золотых знака 18 18 серебряных знаков 55 55 бронзовых знаков
в смысле растянуть?
21 янв 2017 в 13:03

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

21 янв 2017 в 13:10
@StepanIvanov, вставьте изображения фоном блока и задайте размер background-size: cover;
21 янв 2017 в 13:15

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Все просто: Замените картинку

.you_img_1

Свойство background-size: cover заполняет изображением весь блок

Отслеживать
ответ дан 21 янв 2017 в 13:18
Vlad Starkovsky Vlad Starkovsky
157 7 7 бронзовых знаков

да это как один из вариантов. Но допустим если будет 100 изображений, то для них нужно будет 100 классов писать?

21 янв 2017 в 13:52

На момент публикации ответа, свойство не поддерживается браузерами ИЕ и Эдж, для Оперы мини необходимо использовать префикс -o- . Покрытие рынка браузеров — 79,1%.

div < width: 400px; height: 400px; border: 1px solid; >.photos__item

Отслеживать
ответ дан 21 янв 2017 в 14:10
Sasha Omelchenko Sasha Omelchenko
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак

Можете, пожалуйста, добавить запускаемый пример? И желательно добавить, что это свойство object-fit не поддерживается IE.

21 янв 2017 в 18:46
добавил запускаемый пример
22 янв 2017 в 19:07

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

.full_bg

Отслеживать
ответ дан 21 янв 2017 в 13:59
Vlad Starkovsky Vlad Starkovsky
157 7 7 бронзовых знаков

Если вам нужно именно img , то можно для картинки сделать position: absolute и дальше играться:

.photos < display: flex; width: 100%; >.photos__img < /* Эти стили для фото */ position: absolute; top: 0; height: 100%; transform: translateX(calc((100% - 140px) / -2)); /* Это что бы картинка отображалась по середине */ >.photos__content < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); text-align: center; padding-top: 1%; opacity: 0; transition: all .25s; &: hover < opacity: 1; padding-top: 5%; >> .photos__item < position: relative; /* Добавить это */ padding: 0; width: 140px; height: 100px; margin: 0 3px; overflow: hidden; /* Это */ >.photos__btn, .photos__desc < color: #fff; >.photos__content .photos__btn

 
 
  
title
 
photos__desc
 Посмотреть 
 
 
  
title
 
photos__desc
 Посмотреть 
 
 

Скругление углов блока в CSS

Cуществует возможность установить скругление углов рамки блока. При этом, фон заполняет только область внутри рамки. Если рамки нет, то скругляется только фон.

В CSS cкругление углов устанавливает свойство border-radius . В значении указывается радиус скругления в единицах, доступных в CSS.

Создадим блок и зададим рамку со скруглёнными углами.

#div1

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

Скругление отдельных углов

Можно скруглить любой угол отдельно. Для этого есть свойства:

border-top-left-radius — скругление верхнего левого угла

border-top-right-radius — скругление верхнего правого угла

border-bottom-left-radius — скругление нижнего левого угла

border-bottom-right-radius — скругление нижнего правого угла

Создадим ещё один блок и сделаем скругление правого верхнего угла с радиусом 8 пикселей, а правого нижнего угла с радиусом 20 пикселей. Чтобы между блоками было расстояние, установим и внешние отступы:

13
14
15
16
17
18
19
20
#rightrad

Блок с отдельными скруглёнными углами

Краткая запись

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

• Сначала идёт верхний левый угол
• затем верхний правый
• затем нижний правый
• затем нижний левый

Создадим блок и укажем ему радиусы скругления для каждого угла:

21
22
23
24
25
26
27
#allradius

Скругление всех углов по отдельности

Скругление в виде эллипса

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

Для этого свойству border-radius сначала указывается горизонтальный радиус, затем через слеш вертикальный радиус. Такой блок создаётся так:

28
29
30
31
32
33
34

#elradius < width: 300px; height: 50px; background-color: #CCC; border-radius: 80px/20px; >

Для отдельных углов, такое скругление указывается по-другому. Горизонтальный и вертикальный радиус перечисляются через пробел. Пример:

35
36
37
38
39
40
41

Скругление в виде эллипса

Скругление в процентах

В CSS cкругление углов может указываться в процентах. Проценты берутся от сторон, образующих угол. Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10 процентов нижней части рамки и 10 процентов левой части рамки. Если указать 50%, то на скругление уйдёт по половине длинны сторон рамки. А если указать 100%, то на скругление уйдйт вся нижняя сторона и вся левая сторона рамки. Скругление в процентах можно указывать как для всех углов, так и для каждого угла отдельно.

42
43
44
45
46
47
48

Скругление в процентах

Указание скругления в процентах позволяет создавать блоки с различными интересными формами без расчёта размеров. Например такие:

Такой блок создаётся очень просто. Для его создания нужно:

1. Создать квадрантый блок. Длинну и ширину нужно указывать не пикселях, а в абсолютных единицах, например в сантиметрах, чтобы длинна и ширина были одинаковыми.
2. Задать фон блока.
3. Установить скругление всех углов 50 процентов.

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2023 © basecourse.ru Все права защищены