Скруглённые углы средствами CSS

[01.09.2011 | 00:44]

Не люблю я разные фичи и примочки АКА *.htc для IE разных поколений. В своё время не раз обжогся на разном поведении фич в ИЕ6 под разными сервис паками винды. И разным поведением stand-alone версии ИЕ7 и обычной. А, поскольку мои заказчики верят, что ИЕ6 и ИЕ7 ещё живы, то в ЦСС3 вникать я не тороплюсь - смысл?
Но сейчас делаю проект, который будет эксплуатироваться исключительно под хромом. И в нём очень много скруглённых углов.
Когда попробовал, насколько просто делать скруглённые углы с помощью border-radius (вне зависимости от цветов, заливок, цветов бордеров для боксов), решил, что фанатизм излишен.

Осваивать CSS3 решил начать с малого - скруглённые углы. Что я нашёл:
Универсальные свойства - годятся для всех нормальных браузеров

.curved {


	-moz-border-radius:10px; / Firefox /


	-webkit-border-radius:10px; / Safari and chrome /


	-khtml-border-radius:10px; / Linux browsers /


	border-radius:10px; / CSS3 /


}

Как обычно, IE6-7-8 отличились, для них скачиваем border-radius.htc и подключаем

.curved {


	behavior:url(border-radius.htc);


	border-radius: 20px;


}

Чтобы ИЕ6-7 нормально отображали скруглённые углы, рекомендуют следующее:

каждый элемент должен иметь позиционирование - либо absolute, либо relative
элементы, имеющие по умолчанию display:inline, ведут себя загадочно (но не всегда), даже если им задано display:block
обязательно, чтобы было задано свойство hasLayout (читаем)
у всех углов элемента радиус скругления может быть только одинаковым
есть глюк при попытке скруглить углы у полупрозрачного блока - появляется серая полоса
не стоит пытаться комбинировать эту фичу с другими

Сразу скажу - ещё не пробовал, как всё это работает. По мере испробования постараюсь что-то дополнить.

Дополняю
Всё вышесказаное мной - полная чушь.
Глючная и требовательная чушь.
Нарыл такую штуку - PIE называется. Реально, безглючная примочка.
Полнофункциональная реализация border-radius, box-shadow и background: linear-gradient.
Просто добавь воды:

.rounded,


.top_nav,


.top_nav li,


.top_nav ul ul,


**** И ЕЩЁ КАКИЕ-ЛИБО СЕЛЕКТОРЫ ****


{behavior:url(js/PIE.htc);}

Прикладываю пример (он же в комментах ниже).

В ходе работы обнаружилась пара глючков:

сложности при скруглении углов для элементов, которые по умолчанию инлайновые
если задана наружная тень для элемента с незаданным цветом бекграунда - весь элемент заливается самым тёмным цветом из тени. Лечится заданием цвета бекграунда
тень съезжает и располагается намного ниже её владельца. Лечится заданием position:relative
В IE8 некорректно залился бокс с background-color: transparent; background-image: url(../images/***.png);

Прикрепленный файл: border-radius.htc(4.8 Кб)

Прикрепленный файл: PIE-1.0beta4.zip(90.9 Кб)

Оценить: + | – +2 Комментировать

Раздел: CSS
Теги: css , border-radius , CSS3 , скруглённые углы , PIE , глюк PIE
Просмотров: 1769

Комментарии (11):

Григорий Кочнев [Greg] [01 сентября 18:08]

Да CSS3 приятная штука. Облегчает жизнь заметно, если не надо поддерживать ИЕ.
К стати говоря правильные заказчики и правильные компании считают: если ИЕ не поддерживает CSS3 это проблемы ИЕ и тех кто им пользуется.

Всегда стараюсь при общении с не очень продвинутыми заказчиками озвучить это тезис :)

Вот яркий пример откровенного забивания на ИЕ Twitter.
Думаю эти люди(разработчики) знают толк в вебе и знают, что делают.