Как я могу поддерживать border-radius во всех основных веб-браузерах?

Question

Похоже, что нет другого способа поддержать радиус границы, кроме как предоставить CSS для каждого движка отдельно. Сейчас кажется, что вам нужно объявить свойство три или четыре раза (возможно, больше, если вы хотите поддерживать более неясные движки).

Мое временное решение - передать весь мой CSS с помощью этого регулярного выражения:

Regexp:

border(-)?(top|bottom)?(-)?(left|right)?-radius:(.+?);

Заменить:

-moz-border-radius$1$2$4:$5;
-webkit-border$1$2$3$4-radius:$5;
-khtml-border$1$2$3$4-radius:$5;
border$1$2$3$4-radius:$5;

Выполняется поиск всех экземпляров официального селектора CSS3 и его замена на себя, а также специфичные для движка селекторы для Mozilla, WebKit и KHTML.

Есть ли лучший способ?

Когда WebKit и Mozilla планируют поддерживать селекторы CSS3? (Они уже?)

Answer 1

Должно быть:

.myClass
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

с радиусом границы ниже другого.

почему?Потому что теперь, когда новым браузерам больше не нужен собственный взлом движка (например, Firefox 4), они должны использовать последнюю команду, полученную в файле CSS.Таким образом, округленный угол должен быть одинаковым во всех браузерах, понимающих спецификации CSS3, и вам не придется менять свой CSS в ближайшее время.

Answer 2

Для всех четырех углов вы можете использовать следующий

-webkit-border-radius: 3px;
-khtml-border-radius: 3px;    
-moz-border-radius: 3px;
border-radius: 3px;

, и если вы хотите добавить кривую в любом углу (сейчас я покажу внизу слева), попробуйте следующее

-webkit-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;  
-moz-border-radius-bottomleft: 4px;
border-radius-bottomleft: 4px;

Спасибо

Answer 3

Как в CSS:

.myClass
{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

IE - единственный браузер, который в настоящее время не поддерживает его (пока IE9 не запустится).Но до тех пор вы можете использовать этот скрипт: DD Roundies .Это скрипт, который закругляет углы в IE, с небольшой настройкой.Здесь, на Curvy Corners , есть еще один, который ищет правило webkit и также добавляет их в IE.