Андрей Шаповалов (illuminor94) wrote in ru_css,
Андрей Шаповалов
illuminor94
ru_css

Закруглить углы с помощью CSS.

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


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

С выходом CSS3 появилась возможность без всяких извращений сделать этот эффект. Но опять-таки лежкой дегтя выступает Internet Explorer, даже 8 версия не поддерживает CSS3.

Приступим непосредственно к коду. Сначала создадим элемент div:



Далее пропишем стили:



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



Мы получили красный квадрат 100x100 с четырмя закруглёнными углами.

Теперь немного разберем код:
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. Нижний левый угол.

На этом всё, спасибо за внимание и всем удачи!
  • Post a new comment

    Error

    default userpic
  • 6 comments