Кроссбраузерные закруглённые уголки


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

В табл. 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. Такой набор можно использовать для навигации по страницам или по фотографиям.

Вид уголков можно изменить и у изображений, добавляя к селектору 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>
Добавлено: 25-03-2018, 04:22
0
99

Похожие публикации


Добавить комментарий


Наверх