Мои заметки по IT

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Мои заметки по IT » CSS » Закругление углов

Закругление углов

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: stiz1981
  • Администратор
  • Зарегистрирован: 2011-06-10
  • Приглашений: 0
  • Сообщений: 219
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 43 [1981-04-26]
  • Провел на форуме:
    2 дня 16 часов
  • Последний визит:
    2014-12-05 11:40:23

#test{
Width:100px;
Height:100px;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}

Теперь немного разберем код:
border-radius:6px — Свойство CSS3. Чем больше значение в пикселях, тем сильнее скруглённые углы;

-webkit-border-radius:6px — Хак для включения поддержки закругления в браузерах на основе webkit (Google Chrome и Safari).

Но стоит заметить, в последних версиях браузеров Chrome и Safari для поддержки border-radius не нужны никакие хаки.

-moz-border-radius:5px — Хак для включения поддержки закругления в браузере Firefox. Без него будет просто квадрат;

-khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux.

Закругления для выбранных углов

#test{
Width:100px;
Height:100px;
border-radius: 0 0 6px 6px;
-moz-border-radius:0 0 6px 6px;
-khtml-border-radius: 0 0 6px 6px;
}

border-radius: 1 2 3 4;

Верхний левый угол;
Верхний правый угол;
Нижний правый угол;
Нижний левый угол;

0

2

  • Автор: stiz1981
  • Администратор
  • Зарегистрирован: 2011-06-10
  • Приглашений: 0
  • Сообщений: 219
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 43 [1981-04-26]
  • Провел на форуме:
    2 дня 16 часов
  • Последний визит:
    2014-12-05 11:40:23

Сейчас всё чаще и чаще в современных браузерах для закругления углов используется такое свойство как border-radius. Это очень удобно и практично. Однако как это всегда происходит, браузеры линейки Internet Explorer, а именно IE7, IE8 (про IE6 и говорить нечего) это свойство не поддерживают. Способов закруглить углы в IE изобрели много, но работаю они не всегда и не так как нужно. Самый лучший по-моему мнению способ – использовать специальный файл PIE.htc. Использовать его просто – нужно в таблицах стилей для IE подключить его в нужных местах через behavior. Сайт разработчика css3pie.com. Тут можно посмотреть демонстрацию работы данного файла и скачать последнюю версию.
Например:

Код:
.widget_search  input {
 border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(http://dubyna.ru/PIE.htc);
}

Обратите внимание на то, как подключается в стилях данный файл. У меня он лежит в корне сайта.
При подключении данного файла могут возникнуть такие проблемы: элемент у которого мы пытаемся закруглить углы в IE может просто стать невидимым. Лучится это добавлением к стилю свойств:

Код:
position:relative;
z-index:0;

Возможно достаточно будет добавить

Код:
position:relative;

http://dubyna.ru/css/okruglyonnye-ugly- … lorer.html

0

Страница: 1

Вы здесь » Мои заметки по IT » CSS » Закругление углов