Як зробити закруглені кути в internet explorer 8 і нижче

CSS3 дозволяє зробити закруглені кути у блоку або зображення за допомогою властивості border-radius. Але, як ви знаєте, ця властивість не працює в браузері Internet Explorer 8 (IE8) і більш ранніх версіях. І коли ви застосовуєте ця властивість, то воно виглядає точно також, без будь-яких заокруглень.

Багато хто говорить що потрібно просто ігнорувати IE8. Звичайно, можна зробити і так. Але якщо ви працюєте в якій-небудь фірмі, або просто хочете щоб сайт виглядав правильно у всіх браузерах, то ви повинні знати як це зробити.

CSS3Pie

CSS3 PIE (щоб ви розуміли CSS3 Progressive Internet Explorer) - це модуль, який дозволяє використовувати в браузері Internet Explorer деякі властивості CSS3 (тінь, лінійний градієнт і закруглені кути).

У цій статті ми розглянемо як цей модуль використовувати, щоб зробити закруглені кути.

Викачуємо даний модуль тут.

Відео: Cкругленіе полиць в PRO100

І розміщуємо його в папці з файлом стилів вашого сайту:

Далі в файлі стилів пишемо:

12345678

.bradius {height: 100px-width: 100px-background-color: # 2ecc71--webkit-border-radius: 50px--moz-border-radius: 50px-border-radius: 50px-}

Якщо браузер підтримує CSS3, то ми побачимо:

Відео: СВЕТИЛЬНИК ЗІРКА з Дерева своїми руками! DIY

А в браузері IE8 і нижче ми побачите наступне:

Відео: Як округляти кути прямокутника в Coreldraw

Для для того щоб використовувати файл PIE.htc, необхідно в файлі index.html написати:

12345

lt;stylegt; .bradius {behavior: url ( `css / PIE.htc`) -}lt;/stylegt;

Зараз поновіть сторінку і побачите наступне:

Подивитися прімерСкачать

Я перевіряв за допомогою сервісу netrenderer.com.

висновок

Якщо ви робите сайт для кого-то, або просто хочете щоб ваш сайт правильно і красиво виглядав у всіх браузерах, тоді вам стане в нагоді ця властивість.

Успіхів!