Javascript: Как создать закругленный угол на вкладке меню?

Question

Привет, ребята, вы знаете какую-нибудь вкладку с закругленными углами, такую ​​как эту, которую я могу скачать? Или как я могу создать такую ​​вкладку? Требуется ли использование изображений в меню вкладок или нет? Я использовал:

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius:5px;
border-top-right-radius:5px;

но это не идеально. Знаете ли вы какие-нибудь полезные ссылки / учебники о закругленной угловой вкладке?

Заранее спасибо:)

Cheers, Mark

Answer 1

Лучше всего выглядят закругленные углы всегда с использованием изображения. Все остальное - лучшая попытка браузера, которая может не соответствовать вашим ожиданиям. Также намного проще просто использовать изображения.

Вам просто нужно маленькое изображение для каждого угла и еще один набор изображений для остальной части границы. Включите все это в классы CSS, и все готово.

Answer 2

Почему вы не используете jQuery UI? У них есть красивые округлые вкладки. Смотри http://jqueryui.com/themeroller/#themeGallery

Answer 3

Пока не поддерживается всеми браузерами, но вы можете использовать CSS3, чтобы легко отображать закругленные углы без использования изображений или JavaScript:

<div style="-moz-border-radius: 5px; -webkit-border-radius: 5px;">
    Rounded corners!
</div>

Подробнее: http://www.css3.info/preview/rounded-border

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