Закругление углов div’ов и картинок с помощью CSS

Среда, Октябрь 23, 2013, 21:33 | Вебмастеру | 2 368 просм. | Нет комментариев

Мода 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>
Lorem ipsum

Прелесть этого атрибута в том, что закругление можно задавать для разных углов свое или каким-то из углов не задавать его вовсе (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;
}

В данном случае получается вот такая штука:

Lorem ipsum

Еще пример.

#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.

Для остальных углов — по аналогии.

Похожие записи:

Понравилось? Поделись ссылкой с друзьями!

Метки: , ,

Оставить комментарий


Вы не бот? Докажите! Решите простой пример: *