В статье описаны особенности применения свойства border-radius. Также представлены проблемы в отображении для разных браузеров и предложены возможные варианты их решения.
С выходом новой версии CSS3 решилась одна из самых сложных проблем в веб-дизайне. В новой версии продукта появилось новое свойство border-radius, с помощью которого можно легко округлять углы блока там, где это необходимо. Теперь верстальщики могут забыть о трудоемких процессах реализации такого простого решения, как скругление углов через тот же photoshop.
Однако, как оказалось, не все браузеры были готовы к выходу новинки от CSS3. Некоторые из них не совсем корректно обрабатывают скругление, на лицо недоработки и промахи.
Проблемы с webkit-браузерами
Проведя тестирование на разных браузерах мы обнаружили один не очень приятный эффект при отработки свойства в webkit-браузерах. Для наглядности рассмотрим, как выводит скругление Firefox и Chrome:
Глядя на картинку в первую очередь можно отметить, что Firefox более плавно обрабатывает скругление, Chrome отрисовывает слегка угловатый полукруг. Также мы видим, что у хрома установленная рамка в некоторых местах просвечивается и видно заливку заднего фона.
Ввиду этого необходимо расставить приоритеты при создании сайта. Либо следует отдать предпочтение простоте кода и быстрой загрузке веб страницы, что реализуется в случае использования border-radius, либо делаем уклон на красоту и аккуратность, что легко достигается при использовании бекграундных картинок.
Стоит обратить внимание на то, что такие проблемы имеют место в старых версиях браузеров. В последних версиях такой недочет исправлен.
Проблемы скруглений изображения
В браузерах в той же степени могут возникнуть проблемы с применением свойства скругления углов как непосредственно к самой картинке, так и к ее родителю. Чтобы было понятно, привожу пример кода:
CSS
#img p { width: 200px; height: 150px; margin-right: 20px; overflow: hidden; border: 1px solid #f00; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin:0px auto; }
Ожидали увидеть скругленную картинку с красной рамкой, а видим
Однако, аналогично прошлому случаю, этой проблемой болеет поколение браузеров, которые постарше. Их потомки справляются отлично с таким кодом и свойство срабатывает как надо.
Выход из ситуации
Первое, что приходит в голову для того, чтобы решить эту проблему — это применить скругление углов не только для родителя, но и непосредственно к самой картинке. Причем, многие верстальщики поддерживают такую идею, я не раз натыкался на такое предложение в соответствующих форумах. Итак, записываем код:
CSS
#img p { width: 200px; height: 150px; margin-right: 20px; overflow: hidden; border: 1px solid #f00; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin:0px auto; } #img img { border-radius: 19px; -moz-border-radius: 19px; -webkit-border-radius: 19px; }
Обращаю Ваше внимание на то, что содержимое блока требуется скруглять на 1 пиксель меньше, чтобы достичь полного единства рамки родителя и скругления потомка.
Еще одно решение
Второй способ, который, как показывает практика, является более действенным, заключается в помещении картинки на задний фон. То есть картинку мы будем выводить не посредством HTML-кода, а через CSS-правила, воспользовавшись свойством background. Однако следует отметить тот факт, что такой способ является хуже с точки зрения семантики, однако при отсутствии других более лучших вариантов выхода у нас нет.
Итак, вот код этого решения:
CSS
width: 200px; height: 150px; margin-right: 20px; overflow: hidden; border: 1px solid #f00; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin:0px auto; background: url(img3.jpg) no-repeat;
Теперь убедимся, что наш способ работает, пропускаем код через браузер
В каких браузерах работает?
| 6.0+ | 4.0+ | 10.5+ | 4.0+ | 3.6+ | - | - |
Итог
Стоит отметить, что выход нового свойства в CSS3 значительно облегчил работу многим программистам. Однако, некоторые браузеры технически не были готовы к такому новшеству. Это выразилось в том, что одни из них некорректно осуществляли скругления, а другие не могли синхронизировать эффект между родителями и потомками. Но несмотря на это, с выходом новых версий браузеров постепенно разработчики исправили все свои недочеты, за что им отдельно спасибо. Сейчас в работе с border-radius не возникает практически никаких проблем.
