Какое последнее решение для закругленных углов? - PullRequest
Новая
       79

Какое последнее решение для закругленных углов?

4 голосов
/ 30 мая 2011

Может кто-нибудь сказать мне последнее решение для реализации закругленных углов с тегами DIV?Являются ли угловые изображения в формате PNG лучшим кросс-браузерным решением?Является ли Jquery лучшим подходом?Как все подходят к проблеме закругленных углов?

Большое спасибо.

Эрик

Ответы [ 3 ]

6 голосов
/ 30 мая 2011

Для большинства браузеров CSS3 предоставляет способ.

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

.rounded-corners {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

Больше не нужны изображения.

3 голосов
/ 30 мая 2011

Если вам требуется поддержка IE8 и более ранних версий, здесь - это несколько способов выполнения закругленных углов.

Согласно этой странице Microsoft:

Windows Internet Explorer 9 поддерживает добавление закругленных углов к элементы, использующие border-radius свойства.

Также предлагаются следующие страницы, которые утверждают, что обновляются:

25 Техник закругленных углов с CSS

Округлые углы CSS 'Roundup'

закругленные углы

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

2 голосов
/ 30 мая 2011

Оптимальным решением на данный момент является использование: 

selector {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

Это будет работать во "всех" современных браузерах, включая IE9, см .: http://caniuse.com/#search=border-radius

По далеко лучший обходной путь для старых версий IE - использовать CSS3 PIE :

Пирог делает Internet Explorer 6-8 способный сделать несколько из Наиболее полезные функции оформления CSS3.

Пирог в настоящее время имеет полный или частичный поддержка следующего CSS3 Особенности:

• радиус границы
• box-shadow
• border-image
• несколько фоновых изображений
• линейный градиент в качестве фонового изображения

Как видите, вы также получаете поддержку для большего количества глазных конфет CSS3

...