CSS Cross-Browser Изогнутые Границы

Question

Как правильно / наилучшим образом определить кросс-браузерные CSS / CSS3-совместимые / действительные изогнутые границы?

Есть ли способ сделать это без использования JavaScript, будучи совместимым с несколькими браузерами? Если нет, есть ли правильный обходной путь?

Answer 1

Вы пробовали:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px

вместе?Это должно охватывать основные 3 браузера в их последних выпусках (по крайней мере).Без javascript или использования изображений вы не получите полное покрытие в разных браузерах.

Answer 2

См. Генератор граничного радиуса CSS (простые закругленные углы) или CSS3 Пожалуйста (больше эффектов) для решения только для CSS. Если вы хотите что-то, что работает в Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+ с без изображений , попробуйте Raphaël . Вот замечательный разговор Дмитрия Барановского , автора Raphaël, объясняющий, почему это круто.

Answer 3

Вы должны использовать это:

-moz-border-radius: 20px;
border-radius: 20px

WebKit уже некоторое время поддерживает обычный border-radius.

http://css3generator.com/, например, сброшен префикс -webkit.

Чтобы это работало в Internet Explorer, я рекомендую использовать CSS3 PIE , что так же просто, как загрузить небольшой файл и добавить его в свой CSS:

behavior: url(PIE.htc)

Конечно, это будет работать только тогда, когда Javascript включен в IE (что обычно имеет место).

Answer 4

Лучший способ сделать это с помощью border-radius.

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px

Это совместимо только в Safari, Firefox и Chrome. Это не работает для IE 7 + 8 (и меньше)

Если вам нужна максимальная совместимость, но наименьшая гибкость, лучше всего использовать изображения.

Если вам нужна гибкость и совместимость с браузером, используйте javascript. Лучший из найденных мной преобразует склонение CSS3 в более круглые углы в IE 7 + 8.

Проверьте это здесь: http://www.curvycorners.net/