HTML круглые углы Internet Explorer

Question

Как я могу сделать круглые углы, как этот сайт в некоторых местах .. Я искал везде и нашел много кода, который я запутался, какой использовать

-moz-border-radius:10px;

-webkit-border-radius:10px;

behavior:url(border-radius.htc);

Какой я должен использовать? и почему он не работает с Internet Explorer?

Answer 1

Internet Explorer 6-8 не поддерживает css3, поэтому border-radius там не работает.

Для Internet Explorer 9 вы можете делать закругленные углы с (без префикса) border-radius свойством (http://ie.microsoft.com/testdrive/HTML5/BorderRadius/)

Для старых браузеров на основе webkit вам нужно использовать префикс -webkit.
Для старых браузеров на базе Mozilla вам нужно использовать префикс -moz.
Для старой версии браузера Opera необходимо использовать префикс -o.
Для других вы можете использовать только свойство border-radius без префиксов

Ваш кросс-браузерный код должен быть таким, как этот код ниже

{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

Для версий IE6-8 вам необходимо использовать плагины js, такие как http://css3pie.com/

Answer 2

Эти префиксы -moz-, -o-, -webkit- необходимы для поддержки более старых версий браузеров.Однако, вопреки распространенному мнению, префикс -ms- не применяется к свойству border-radius.Когда IE начал поддерживать border-radius, в версии 9 использовалось бессрочное свойство border-radius ^Link .

-moz-border-radius: 10px;    /* Gecko, Firefox */
-webkit-border-radius: 10px; /* Safari, chrome */
-o-border-radius?: 10px;     /* Opera */
border-radius: 10px;         /* Modern browsers*/

Answer 3

Я очень рекомендую CSS3PIE .При определенных условиях непрозрачность и т. Д. Может показаться немного ненадежной, однако для подавляющего большинства сайтов это значительно сокращает время, необходимое для выполнения сокращения.

Просто добавьте behaviour:url(/pie.htc); к концу вашего объявления CSS3 и IE будут иметь полную поддержку box-shadow, border-radius и линейных градиентов.

Answer 4

вау много дубликатов, но хорошо Вот код, взятый из jQuery UI Это операторы CSS, вам нужно добавить их между <style></style> или внутри таблицы стилей CSS и связать их с вашим HTML-файлом. Каждый из них добавляет углы к определенной области (вверху, внизу, вверху слева, вверху справа, все ...)

Вы можете изменить радиус повсюду, чтобы они больше гнулись.

.ui-corner-tl { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-tr { -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-br { -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-top { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-right {  -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-left { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-all { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -ms-border-radius:8px; }

Я считаю, что это кросс-браузер, но старые версии Internet Explorer могут не работать с ним