Кроссбраузерный CSS3: закругление углов, тени, градиент

Заголовок «Кроссбраузерный CSS3» — звучит слишком громко, конечно. В данной статье мы только «обучим» браузер Internet Explorer некоторым возможностям, которые предоставляет CSS3. Вообще можно сказать, что MSIE сильно отстал от своих коллег в том, что касается поддержки новых интернет-технологий. Причем это касается не только всеми ненавистного IE6, но и даже IE8. С выпуском нового Internet Explorer 9 Микрософт грозится переплюнуть другие браузеры в поддержке возможностей HTML5 и CSS3. Что ж, будем на это надеяться, но в любом случае, веб-разработчикам еще долго предстоит верстать под IE7 и IE8, пока они «не выйдут из моды».

Способ номер раз

Прописываем стили так, как мы это обычно делаем, и добавляем последней строкой подключение скрипта:

1
2
3
4
5
6
7
8
9
10
11
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px;  /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, IE6+ совместно с ie-css3.htc */-moz-box-shadow: 2px 2px 10px #b8d4fd; /* Firefox */
-webkit-box-shadow: 2px 2px 10px #b8d4fd; /* Safari and Chrome */
box-shadow: 2px 2px 10px #b8d4fd; /* Opera 10.5+, IE6+ с ie-css3.htc */behavior: url(ie-css3.htc);
}
Таблица особенностей:
Стиль Что работает Что не работает
border-radius Установка радиуса для всех углов.
Границы элемента.
Установка радиусов для отдельных углов.
box-shadow Размытие тени.
Смещение тени.
Любой цвет, отличный от #000.
text-shadow Размытие тени.
Смещение тени.
Выбор цвета тени.
Тень выглядит немного по другому, чем в FF/Safari/Chrome.

Если есть необходимость в закруглении уголков блоков, то этот способ вполне подходит. Жаль, не работает для закругления img.

Ссылка на источник.

Второй способ

Проделываем почти то же самое, что и в первом случае. В архиве со скриптами, ищем в нем файл PIE.htc и подключаем его в нужных стилях:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box {
/* круглые углы */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;/* тень */
-moz-box-shadow: 2px 2px 10px #b8d4fd;
-webkit-box-shadow: 2px 2px 10px #b8d4fd;
box-shadow: 2px 2px 10px #b8d4fd;/* градиент */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#acf), to(#af6));
background: -moz-linear-gradient(#acf, #af6);
background: linear-gradient(#acf, #af6);
-pie-background: linear-gradient(#acf, #af6);behavior: url(PIE.htc);
}

Отличия от первого способа:

  • Есть поддержка градиента (хотя радости от этого мало, т.к. Опера тоже пока не поддерживает это свойство).
  • Нет поддержки text-shadow.
  • Можно выбирать цвет тени, помимо черного.
  • Закругление углов работает и для img (но опять же не поддерживается Оперой).