Открывая новый раздел сайта посвященный CSS, хочу начать с темы которая будоражит умы многих веб разработчиков и верстальщиков - создание блоков с закругленными углами.
Вопрос далеко не новый и на эту тему уже немало было сказано. Но предлагаю взглянуть на это с учетом современного состояния web технологий)))
С одним из методов верстки блоков со скругленными углами можно ознакомиться, например здесь - http://dimox.name/. Основа такого метода - вставка дополнительных тегов размером 1 на 1 пиксел нужного цвета, которые, будучи правильно расположенными, создают эффект закругленных углов))) Недостатком является - сами понимаете - избыточность HTML кода.
border-radius
Но веб технологии не стоят месте, и мы, поспевая за ними изо всех сил, заглянем в рекомендацию CSS3 - и чудом обнаружим свойство border-radius. Учитывая что стандарт CSS3 является самым последним, то не все браузеры его поддерживают, или поддерживают только самые последние версии браузеров.
По моим наблюдениям свойство border-radius поддерживает браузер Google Chrome версии 4.0 и Opera версии 10.50 Beta.
Браузер FireFox версии 3.6 это свойство не поддерживает, но для него существует т.н. проприетарное свойство -moz-border-radius.
Существует еще несколько проприетарных свойств для других браузеров:
- -webkit-border-radius - Safari/Chrome
- -opera-border-radius - Opera
- -khtml-border-radius - Konquerer
Их всех тоже следует добавлять в правила CSS... так - для надежности))
Internet Explorer - естественно - не поддерживает, впрочем как и многие другие CSS свойства.
Пример
Если у Вас установлена последняя версия одного из современных браузеров (кроме IE), то ниже Вы увидите два красивых блока с закругленными углами.
border:3px solid #999; padding:1em; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px;
border-radius:32px;