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

CSS3Тема закругленных углов всегда была актуальна среди веб – мастеров и дизайнеров. Ведь посудите сами, одними квадратами оригинальный дизайн не создашь. Да и плавность в некоторых случаях придает более приятный внешний вид элементам дизайна.

Как выкручивались дизайнеры:

  • закругленные углы делались с помощью изображений; (то есть для каждого угла подготавливалась своя картинка, которая и делала этот эффект)
  • использовали Java script; (соответственно если у пользователя отключены скрипты, то и не видать закругленности)
  • использовали громоздкий код из большого количества html тегов; (настоящие извращение, чем больше углов, тем громоздкей становилась html страница)

И только с выходом CSS3 появилась возможность без всяких извращений сделать этот эффект.

Но опять-таки лежкой дегтя выступает Internet Explorer, даже 8 версия не поддерживает CSS3.

Я лично для себя давно решил, мне на IE плевать. Благо как показывает статистика на мой блог очень мало людей приходят с Internet Explorer.

При этом все, что они потеряют это закругленные углы.

Делаем закругленные углы CSS

Сначала создадим элемент div

1
<div id=”test”></div>

Пропишем стили:

1
2
3
4
5
#test{
background:#F00;
width:100px;
height:100px
}

Наш квадрат готов.

Теперь зададим свойства закругления. Для этого используем команду: border-radius

1
2
3
4
5
6
7
8
#test{
Width:100px;
Height:100px;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}

Смотрим результат и радуемся.

квадрат

Теперь немного разберем код:
border-radius:6px — Свойство CSS3. Чем больше значение в пикселях, тем сильнее скруглённые углы;

-webkit-border-radius:6px — Хак для включения поддержки закругления в браузерах на основе webkit (Google Chrome и Safari).

Но стоит заметить, в последних версиях браузеров Chrome и Safari для поддержки border-radius не нужны никакие хаки.

-moz-border-radius:5px — Хак для включения поддержки закругления в браузере Firefox. Без него будет просто квадрат;

-khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux.

Так, что наш код можно записать так:

1
2
3
4
5
6
7
#test{
Width:100px;
Height:100px;
border-radius:6px;  
-moz-border-radius:5px;
-khtml-border-radius:10px;
}

Закругления для выбранных углов

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

Там закруглены только нижней правый и левый угол.

Для этого изменим наш код:

1
2
3
4
5
6
7
#test{
Width:100px;
Height:100px;
border-radius: 0 0 6px 6px;
-moz-border-radius:0 0 6px 6px;
-khtml-border-radius: 0 0 6px 6px;
}

Результат:

Разбор полета:

1
border-radius: 1 2 3 4;
  1. Верхний левый угол;
  2. Верхний правый угол;
  3. Нижний правый угол;
  4. Нижний левый угол;

Освоив данную технику, вы сможете делать красивые сглаженные углы на своем сайте. На этом все, удачи!!!

С уважением Тригуба Сергей!

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев174 комментария

на ИЕ 8.0.6001 все норм отображается

на Гугл хроме не пашит( а на опере норм страно?

Спасибо! То что искал. Все отлично везде работает

4

Прекрасно! Кратко и ясно! Супер!

6

Дополните, в последних версиях FF -moz-border-radius тоже указывать не обязательно 🙂

семён
7

Спасибо за ссыль... нашёл то, что искал.

Андрей
8

Привет, получилось закруглить угли, спасибо за урок. Подскажи если знаешь как в CSS делают стрелочку в блоке, которая указывает на второй блок.

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

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет