Круглые углы border-radius для всех браузеров

Сообщение об ошибке

  • Notice: Trying to access array offset on value of type int в функции element_children() (строка 6595 в файле /home/u1000/domains/bighameleon.com/includes/common.inc).
  • Notice: Trying to access array offset on value of type int в функции element_children() (строка 6595 в файле /home/u1000/domains/bighameleon.com/includes/common.inc).
  • Notice: Trying to access array offset on value of type int в функции element_children() (строка 6595 в файле /home/u1000/domains/bighameleon.com/includes/common.inc).
  • Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters в функции drupal_get_feeds() (строка 394 в файле /home/u1000/domains/bighameleon.com/includes/common.inc).
  • Deprecated function: The each() function is deprecated. This message will be suppressed on further calls в функции menu_set_active_trail() (строка 2405 в файле /home/u1000/domains/bighameleon.com/includes/menu.inc).
Аватар пользователя Натали
Оставлен Натали Втр, 10/04/2012 - 00:27
Раздел: 
Верстка

Для скругления углов в разных браузерах используются такие команды:

border-radius: 10px; - css3 стандарт

-webkit-border-radius: 10px; - для браузеров на движке webkit, например Chrome

-moz-border-radius: 10px; - для браузеров на движке Mozilla, например Mozilla Firefox

 

ПРИМЕР:

#block-menu-menu-top-menu ul.menu{

    border-radius: 10px;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

}

 

Но для експлорера необходимо добавить свои фичи для того, чтобы подобные скругления углов отображались как следует.

Итак, необходимы следующие действия:

1. В корень темы необходимо положить файлик с именем "border-radius.htc" - это файл прикреплен к данной статье.

2. Затем прописать рядом с командой border-radius еще одну команду, специально для браузера Explorer: #block-menu-menu-top-menu ul.menu{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; behavior:url(/border-radius.htc); } Это дело вытягивает настройки из цсса и круглит при помощи скрипта.

 

 

Картинка-пример приведена с проекта, который теммизировала наша команда: http://samaya.ru/

Временная тестовая площадка: natal.samaya.ru.ct101.ruswebs.ru

Теги: 
верстка
ВложениеРазмер
Файл border-radius.htc4.77 КБ

Комментарии

Аватар пользователя Алексей
Оставлен Алексей Втр, 31/07/2012 - 13:49

Для поддержки CSS3 под IE 6-9 можно использовать pie.htc, домашняя страница http://css3pie.com/ .

Аватар пользователя Владимир
Оставлен Владимир Втр, 31/07/2012 - 14:23

или средствами ява квери...http://recens.ru/jquery/plugin_text_shadow.html

Аватар пользователя Владимир
Оставлен Владимир Втр, 31/07/2012 - 17:26

Итак...ИЕ побежден...любуюсьскруглениями и тенями под блоком в стиле css3...
Что для этого необходимо:
1. PIE.htc ложим в корень вебсайта!!!
2. Прописываем  border-radius-ы box-shadow-ы как описано выше....
3. Прописываем САМЫМИ ПОСЛЕДНИМИ свойствами для блока, который стилизуем
 

position: relative;

z-index: 0;

behavior: url("PIE.htc");

 

Наслаждаемся результатом!!!