Самый простой способ реализовать слегка закругленные углы, как на этом примере сайта?

Question

Мне нужно реализовать элемент управления табуляции, идентичный по стилю тому, что можно увидеть здесь:

http://funds.ft.com

Вот пример, который я до сих пор придумал:

http://jsfiddle.net/MZUQK/

Самая большая проблема, с которой я сталкиваюсь, заключается в том, что у первого есть «закругленные» углы, которые были автоматически реализованы ASP.NET AJAX, использованным для разработки сайта.

Поскольку я не использую ASP.NET AJAX, есть ли простой способ добиться того же эффекта, который будет работать в IE6 и в реальных браузерах?Это лучший способ сделать это с помощью jQuery или CSS?

edit: , если невозможно получить закругленные углы в IE6 без изображений, каков лучший способ сделать это в остальныхбраузеры?

Answer 1

Мне нравится плагин jQuery Corner . Он будет работать на IE7 и IE8 с режимом совместимости IE7. Конечно, IE6 игнорирует это. Это действительно легкий и превосходящий загрузку jQuery-UI только для углов.

$('#yourDiv').corner();

Answer 2

Самый простой способ, который я нашел, - это использование Jquery UI для закругленных углов.

Это так же просто, как включить два файла и добавить это в объявления вашего класса:

<element class="ui-corner-all myclass"> (округлить все углы элемента)

или

<element class="ui-corner-tl ui-corner-tr myclass"> (верхний левый верх, правый верх)

IE по умолчанию не подходит для закругленных углов, поэтому для точного дублирования работы пользователя вам придется добавить Jquery или другой скрипт замещения.Мои крупные корпоративные клиенты единодушно сошлись во мнении, что это не стоит усилий - поскольку оно изящно разлагается на квадратные углы, пользователям IE придется иметь дело с этим - они в первую очередь решили использовать низший браузер.

Вторым близким местом является параметр «Границы радиуса» (http://www.css3.info/preview/rounded-border/), но его больше беспокоит синтаксис. Использование Jquery UI также открывает такие замечательные функции, как автозаполнение, вкладки, кнопки (улучшение стандартных кнопок HTML) и т. Д.

Answer 3

Вот хороший пример создания закругленных углов с помощью JavaScript:

Изящные углы: http://www.html.it/articoli/niftycube/nifty1.html

Использование элемента Canvas (даже в IE): http://www.netzgesta.de/corner

Answer 4

Чтобы закругленные углы работали в IE 6, вам нужно использовать изображения