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

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

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

Код Описание Вид div { border-radius: 10px; } как сделать закругленный блок Радиус скругления для всех уголков сразу. div { border-radius: 0 10px; } Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. div { border-radius: 20px 10px 0; } Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. div { border-radius: 20px 10px 5px 0; } Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

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

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

HTML5CSS3IE 9+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Радиус</title> <style> div { background: #007E3E; / Цвет фона / color: #fff; / Цвет текста / padding: 10px; / Поля вокруг текста / border-radius: 5px; / Уголки / } </style> </head> <body> <div>Меня — супплетивная форма винительного падежа от я.</div> </body> </html>

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

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> <style> button { background: #f2f6f8; / Цвет фона / border: 1px solid #7a7b7e; / Параметры рамки / width: 60px; / Ширина кнопки / height: 60px; / Высота / border-radius: 30px; } </style> </head> <body> <button><img src="images/done.png" alt="Продолжить"></button> </body> </html>

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

Круглая кнопка

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свечение</title> <style> body { background: #608DA2; / Фон веб-страницы / } ul { list-style: none; / Убираем маркеры / } li { display: inline-block; / Строчно-блочный элемент / border: 2px solid #fff; / Параметры контура / margin-right: 5px; / Отступ справа / background: #000; / Чёрный фон / width: 10px; height: 10px; / Ширина и высота / border-radius: 10px; / Делаем кружок / } li.active { background: #b00; / Красный фон / box-shadow: 0 0 4px 2px #fff; / Параметры свечения / } </style> </head> <body> <ul> <li></li> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </body> </html>

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

Свечение вокруг кружка

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

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

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

HTML5CSS3IE 9+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Эллиптические уголки</title> <style> div { position: relative; } span { position: absolute; / Абсолютное позиционирование / background: rgba(255,255,255,0.9); / Белый полупрозрачный фон / }.bulb1 { width: 10px; height: 10px; / Ширина и высота / left: 65px; top: 85px; / Положение / border-radius: 10px; / Превращаем в кружок / }.bulb2 { width: 20px; height: 14px; / Ширина и высота / left: 45px; top: 60px; / Положение / border-radius: 10px/6px; / Превращаем в эллипс / }.bulb3 { left: 10px; top: 15px; / Положение / padding: 5px 10px; border-radius: 60px/15px; / Создание эллипса / } </style> </head> <body> <div> <span class="bulb3">Вы сами себе учитель</span> <span class="bulb2"></span> <span class="bulb1"></span> <img src="images/monk.jpg" alt="Монах"> </div> </body> </html>

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

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изображения</title> <style> body { background: #4b5457; } img { border-radius: 10px; } </style> </head> <body> <p><img src="images/thumb1.jpg" alt=""> <img src="images/thumb2.jpg" alt=""></p> </body> </html>
Источник: http://htmlbook.ru/css3-na-primerakh/skruglennye-ugolki




Рекомендуем посмотреть ещё:


Закрыть ... [X]


Border-radius делает круглый блок. Но мышь ведет себя на скрыт. и Почему зубы такого цвета

Как сделать закругленный блок Html - Как сделать круглыми углы блоков div без картинок? - Stack
Как сделать закругленный блок Создаем объёмный блок с тенью средствами CSS3 / Хабрахабр
Как сделать закругленный блок Создаем закруглённые уголки с помощью CSS 3 / Хабрахабр
Как сделать закругленный блок Как сделать блок с закругленными углами только на CSS
Как сделать закругленный блок Делаем рамки и закругленные углы с помощью html и css
Закруглённые углы (свойство border-radius) CSS Примеры Cтатусы про друзей Лучшие статусы для социальных сетей Аргументы и Факты: новости Индустрия красоты - оборудование и материалы для салонов Картинки с Днем Рождения : Цветы Кризис в отношениях, симптомы - советы, как пережить тяжелый период МК по изготовлению валентинки ко дню Святого Валентина Мезонити - цена, фото до и после процедуры, отзывы Написание слов с заглавной буквы, или Имена собственные

Похожие новости