Мода web 2.0 — нелюбовь к прямым углам и страсть к округлению всего и вся. Но и без моды надо признать, что закругление углов — вещь полезная. Рассмотрим, как это делается проще всего, без знания php и продвинутых навыков. Делается это с помощью CSS, а именно: атрибута border-radius, который, как нетрудно догадаться по его названию, указывает для угла степень скругления. Степень задается в пикселях: это значение радиуса окружности, касающейся данного угла.
Сразу надо заметить, что в довесок к border-radius используют для кросс-браузерности следующие атрибуты:
-webkit-border-radius — для Chrome до версии 4.0, Safari до версии 5.0, iOS;
-moz-border-radius — для Firefox до версии 4.0.
Если вам на чихать на поклонников древних браузеров, можете этот пункт проигнорировать.
А теперь пример:
#roundcorner { width:200px; /* длина блока*/ height:100px; /* высота блока*/ color: #0000; /* цвет текста */ font-size: 14px; /*размер шрифта */ background:#93CDEE; /* фон блока */ border: 3px #036EAC solid; /* стили рамки */ -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */ -khtml-border-radius:10px; /* закругление для браузера Konquerer системы Linux */ border-radius: 10px; /* закругление углов для всех, кто понимает */ padding: 5px; /* внутренние отступы */ } |
Результат выводим как
<div id="roundcorner">Lorem ipsum</div> |
Прелесть этого атрибута в том, что закругление можно задавать для разных углов свое или каким-то из углов не задавать его вовсе (0). Порядок перечисления углов стандартный — от левого верхнего по часовой стрелке без знаков препинания.
Пример:
#roundcorner1 { width:200px; height:100px; color: #0000; font-size: 14px; text-align:center; background:#F1FA05; border: 3px #FA4A05 solid; -moz-border-radius: 50px 50px 0 50px; -webkit-border-radius: 50px 50px 0 50px; -khtml-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; padding: 20px; } |
В данном случае получается вот такая штука:
Еще пример.
#roundcorner3 { width:250px; height:100px; background:#3AD425; border: 3px #127E04 solid; -moz-border-radius: 0 150px 0 150px; -webkit-border-radius: 0 150px 0 150px; -khtml-border-radius: 0 150px 0 150px; border-radius: 0 150px 0 150px; } |
Теперь о картинках. Чтобы закруглить углы картинки, предлагается вот такая хитрость: создается точно такой же div, но его фоном задается нужная нам картинка. Итог — закругление нужных углов изображения в нужной степени.
Пример. Берем картинку:
Создаем вот такой div:
#roundcorner2 { width:250px; height:318px; background: url('http://aprikablog.com/wp-content/uploads/2013/10/girl.jpg'); border: 5px #8D6402 solid; -moz-border-radius: 100px 100px 0 0; -webkit-border-radius: 100px 100px 0 0; -khtml-border-radius 100px 100px 0 0; border-radius: 100px 100px 0 0; } |
Результат:
Для тех случаев, когда нужно указать округление не всех углов, а только одного, тоже есть атрибуты. Это:
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
Нестандартные атрибуты для старых браузеров в этом случае такие: в случае левого верхнего угла —
-moz-border-radius-topleft;
-webkit-border-top-left-radius.
Для остальных углов — по аналогии.