Тема закругленных углов всегда была актуальна среди веб – мастеров и дизайнеров. А ведь одними квадратами оригинальный дизайн не создашь. Да и плавность в некоторых случаях придает более приятный внешний вид элементам дизайна.
И как же выуручивались дизайнеры?
- закругленные углы делались с помощью изображений; (то есть для каждого угла подготавливалась своя картинка, которая и делала этот эффект)
- использовали громоздкий код из большого количества html тегов; (настоящие извращение, чем больше углов, тем громоздкей становилась html страница)
C выходом CSS появилась возможность, без всяких извращений сделать этот эффект.
Сначала создадим элемент div
<div id=”test”</div>
Пропишем стили:
#test{
background:#F00;
width:100px;
height:100px;}
Наш квадрат готов.
Зададим свойства закругления. Для этого используем команду: border-radius
#test{
background:#F00;
width:100px;
height:100px;
border-radius:6px;
}
Смотрим результат и радуемся.
Теперь немного разберем код:
border-radius:6px — Свойство CSS. Чем больше значение в пикселях, тем сильнее скруглённые углы;
Закругления для выбранных углов
Допустим, вы хотите закруглить только выбранные углы.
Делаем нижней правый и левый угол.
Для этого изменим наш код:
#test{
background:#F00;
width:100px;
height:100px;
border-radius: 0 0 6px 6px;
}
Результат:
Разбор:
border-radius: 1 2 3 4;
- Верхний левый угол;
- Верхний правый угол;
- Нижний правый угол;
- Нижний левый угол;
Теперь, вы сможете делать красивые сглаженные углы
На этом все, удачи!!!