Блог

CSS 3 теперь поддерживают все браузеры

03 Апр 2011, рубрика: HTML и CSS зарисовки | Подготовил: Вася Митин

Приятно удивили новые версии браузеров Opera и IE своей возможностью чтения CSS 3. Браузеры Firefox и Chrome уже сравнительно давно отличились этой особенностью. Так, атрибуты
-moz-border-radius и -moz-box-shadow определяли соответственно CSS скругление углов и тень для блока для браузера Firefox, а
-webkit-border-radius и -webkit-box-shadow определяли эти же свойства для браузера Chrome. Теперь данные CSS 3 свойства поддерживают также Opera 11 и Internet Explorer 9, что само по себе замечательно. В ихнем случае атрибуты, определяющие скругленные углы и тень для блочных элементов имеют вид: border-radius и -khtml-border-radius, и соответственно box-shadow.

Пример кода, закругляющего, например, все углы заголовка для всех видов браузеров может выглядеть следующим образом: h1 {border-radius: 3px 3px 3px 3px;
-khtml-border-radius:3px 3px 3px 3px; -moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright: 3px; -moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px} или намного более коротко: h1 {border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px}

Смотрите дополнительно: Создание CSS тени для блока и CSS скругление углов