Свойства CSS3! Часть 3. border-radius – закруглённые углы. Применение и кроссбраузерность

« Предыдущая запись
 
  Следующая запись »
 

Вот уже месяц пытаюсь написать статью в блог, всё никак не нахожу времени. Но с сегодняшнего я постараюсь раз в неделю-две писать сюда всякие полезные и интересные вещи.

Сегодня я хочу рассмотреть ещё одно свойство CSS3, а именно border-radius. Это свойство занимается ничем иным, как скруглением углов у блоков. Удобно? Ещё бы! Хотя, конечно, все уже научились делать пнг-шные байтовые углы, и всё с помощью них делать, но тем не менее этот способ ещё проще.

Итак, свойство работает везде, за исключением ишака до 9 версии (кто бы удивлялся - прим.ред). Для адекватных браузеров свойство записывается по-разному:

CSS3 (Opera) Mozilla аналог WebKit аналог
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

Прежде всего рассмотрим по шесть примеров на каждый вариант записи этого свойства и вы увидите, что есть некоторый различия, связанные не только с описанием. Я всё тестировал в более или менее современных браузерах: Firefox 3.6.3, Chrome 7.0, Opera 10.53. Скрины сделаны в указанных браузерах в соответствующем порядке.


Закругление углов -moz-border-radius

Пример 1

-moz-border-radius: 20px;

Пример 2

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

Пример 3

-moz-border-radius: 20px 0;

Пример 4

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

Пример 5

-moz-border-radius-topright: 20px 8px;
-moz-border-radius-bottomright: 20px 8px;

Пример 6

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

 

pack1 Свойства CSS3! Часть 3. border radius – закруглённые углы. Применение и кроссбраузерность

 

Закругление углов -webkit-border-radius

Пример 7

-webkit-border-radius: 20px;

Пример 8

-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;

Пример 9

-webkit-border-radius: 20px 0;

Пример 10

-webkit-border-radius: 20px 8px;

Пример 11

-webkit-border-top-right-radius: 20px 8px;
-webkit-border-bottom-right-radius: 20px 8px;

Пример 12

-webkit-border-radius: 20px / 8px;

 

pack2 Свойства CSS3! Часть 3. border radius – закруглённые углы. Применение и кроссбраузерность

 

Закругление углов border-radius

Пример 13

border-radius: 20px;

Пример 14

border-top-right-radius: 20px;
border-top-left-radius: 20px;

Пример 15

border-radius: 20px 0;

Пример 16

border-radius: 20px 8px;

Пример 17

border-top-right-radius: 20px 8px;
border-bottom-right-radius: 20px 8px;

Пример 18

border-radius: 20px / 8px;

pack3 Свойства CSS3! Часть 3. border radius – закруглённые углы. Применение и кроссбраузерность

 

Итак, начнём по порядку. Примеры 1-6 работают только в Мозилле, примеры 7-12 только в вебкит браузерах (хром, сафари), а 13-18 работает как в опере, так и в хроме (и вероятно во всех современных вебкит браузерах).

Примеры 1,7,13, 2,8,14 и 5, 11, 17 не рассматриваем, так как они приводят к одному и тому же и перейдём к примерам 3, 9 и 15. В вебкит браузерах нельзя одним свойством задать загругление диагонально-противоположным углам, поэтому используя этот трюк для других браузеров, пользуйтесь для вебкита отдельными записями скругления углов, как в примере 8. Да, и не забываем, что в вебките читаются обычные записи border-radius (не уверен во всех ли веб-китах), поэтому если что, недостаток может ими исправится.

Примеры 4, 10, 16. В Вебките опять проблемы, т.к. показывает он не то, что на самом деле надо. Для вебкитов выход один, как и в примерах 3,9,15 - использовать скругление как в примере 8 и запись обычного border-radius.

Примеры 6, 12, 18. Вроде бы приводят к одному и тому же, но я где-то читал, что слэш в записи параметров используется только в мозилле, а для вебкит браузеров через пробел. Но сдаётся мне, это была недопонятость, а посему использовать можно везде.

Итак, мы имеем свойства для трёх типов браузеров, и чтобы углы скруглялись везде, нужно прописать три различных записи для нужного блока. Однако, из вышесказанного хочу отметить, что порядок записи имеет значение! Рассмотрим два примера.

Пример 19 (правильно)
-webkit-border-radius: 20px 8px;
-moz-border-radius: 20px 8px;
border-radius: 20px 8px;
Пример 20 (неправильно)
border-radius: 20px 8px;
-moz-border-radius: 20px 8px;
-webkit-border-radius: 20px 8px;

 pack4 thumb Свойства CSS3! Часть 3. border radius – закруглённые углы. Применение и кроссбраузерность

Думаю понятно, что последующе записанное свойство, если оно актуально для браузера, перезаписывает предыдущее, из-за чего в вебкит браузерах возникает маленький облом. Думаю далее можно без комментариев, ибо в отдельных примерах всё показано =).

Кроссбраузерный border-radius

Для Опер ранее версии 10.50 (именно в ней была добавлена поддержка border-radius) и для ишака есть средство понимания этого свойства (ссыльк)! Используется он просто:

.boxxx {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  behavior: url(border-radius.htc);
}

 

Нюансы

Всё, можно радоваться жизни! Или нет?! Есть пару нюансов.
1) При указании границы блока (border), сглаживание углов в вебкит браузерах угловатое, то ли из-за коцого антиалайсинга, то ли из-за его отсутствия. Но при неконтрастном бордере оно особо и не видно, поэтому это мелочь.
2) А вот если в блоке изображение, то возникает проблема следующего характера: если скругляем блок, не скругляется лежащая в нём картинка. Чтобы избежать этой проблемы, можно попробовать: а) дублирование border-radius и для картинки, но лично у меня оно не привело к нужному результату в Опере (в остальных браузерах окей всё); б) задать картинку для блока в качестве бэкграунда, тогда всё скругляется без вопросов; в) если скругление картинки совсем не в тему, то надо задать padding для блока и не париться, что что-то на что-то наезжает. Исходя из вышесказанного: если нужно закругление для картинки, то проще задать картинку для какого-то блока и затем закруглить блок - так вы избежите некроссбраузерности.

 

А вот теперь всё! Поддерживаемые браузеры: Opera (10.50 и выше), Firefox (1.0 и выше), Safari (3.0 и выше) и Chrome (все версии). От себя добавлю, что при сложном скруглении углов, этот вариант с хаком для ишака гораздо более практичен, чем всякие аналоги на жабаскрипт-библотеках, т.к. работают гораздо быстрее.

 

ПыСы. А напоследок ловите картинку-подсказку, чтобы не забыть где какие свойства и к чему они приводят =). Картинка кликабельна

borderradius thumb Свойства CSS3! Часть 3. border radius – закруглённые углы. Применение и кроссбраузерность

 

Ссылки по теме

Часть 1. text-shadow: 15 способов применения, кроссбраузерность
Часть 2. box-shadow – тень для контейнеров. Применение и кроссбраузерность
Часть 3. border-radius – rounded corners. Применение и кроссбраузерность
 

,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 2, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 25 на запись

"Свойства CSS3! Часть 3. border-radius – закруглённые углы. Применение и кроссбраузерность"

  1. Тоже когда-то сталкивался с проблемой кроссбраузерности радиуса.
    Приходилось все самому искать в интернете и собирать воедино три кода, про .htc узнал совершенно по случайности :)
    Ещё недавно наткнулся на такой полезный ресурс _http://border-radius.com
    Как бы и кроссбраузерность сохраняет, и можно выбрать отдельно для какого браузера будет использоваться радиус, и подобрать “визуально” нужный радиус ;)

  2. Александр, я не понял вот этого:

    == >
    Думаю понятно, что последующе записанное свойство, если оно актуально для браузера, перезаписывает предыдущее, из-за чего в вебкит браузерах возникает маленький облом.
    < ==

    Какой облом? Работает и так и так, принципиальной разницы не вижу

  3. Shift-Web.ru, насколько я понимаю по картинке 19-20, облом в корректности отображения задуманного. Это вроде как местами принципиально ;)

  4. 2Reysler, а вот за ссылочку отдельное спасибо – люблю всякие висивиги по тем или иным свойствам – удобно! =)

    2Shift-Web.ru, как уже сказал Head, порядок иногда имеет значение именно в отображении. Посему скриншот и приложил=)

  5. Shift-Web.ru
    02/12/2010 at 17:08 Постоянная ссылка Цитировать

    Любоптыно … Я проще делаю: плюсом лёгкий box-shadow и выходит ненавязчивый эффект блюра. Или опасёвостью

  6. ну, отчасти как вариант можно, но всё равно не то. да и к тому же костыль для ишака тоже надо ставить

  7. Классная статейка, много читал про CSS3, эта самая удобная и практичная)))
    Большое спасибо!!! Буду чаще заглядывать!!!

  8. Большое спасибо! Стараюсь писать, рассмотрев со всех сторон, ну и чтобы удобно было воспользоваться информацией потом, если забываешь =)

  9. Доброго времени суток, Александр! Пытаюсь подключить к простенькой HTML странице указанные Вами файлы поведения (ie-css3, border-radius). IE8 ( при режиме совместимости 5 и 8) выдает Access предлог по английски dined к файлу поведения. хотя другие файлы поведения. более простые без xml-кода принимаются и выполняются. Мож я че не так делаю?

  10. Добрый вечер!
    если честно, то не очень понял. что имелось в виду. может пример онлайн покажете?

  11. Спасибо!

  12. Пожалуйста!

  13. Когда выложу сообщу.(сегодня-завтра)

  14. Владимир
    15/01/2011 at 18:20 Постоянная ссылка Цитировать

    привет для всех версий ослика…

    .clear { zoom: 1; display: block; }

  15. Владимир
    15/01/2011 at 18:32 Постоянная ссылка Цитировать

    &lt !– Internet Explorer HTML5 enabling script: –&gt
    &lt!–откр квадратная скобкаif IEзакрыв квадрскобка&gt
    &ltscript src=закорючка верхняя двойная http: слэшслэш html5shiv.googlecode.comслэшsvnслэшtrunk слэш html5.js двойная кавычка &gt&ltслэш script &gt (стандартное условие -если ослик всех версий, то скрипт, срц, закрывающий тэг скрипт)
    &ltstyle type= каввычччччки text/css кавычччки &gt

    .clear открфигурная скобка
    zoom: 1;
    display: block;
    закрфигурная скобка

    &ltслэшstyle&gt
    &lt!откр квадр скобкаendif закрывающ квадр скобка –&gt

  16. ой блин, жесть. обещаю в скорейшем времени наладить комментную часть блога, а то это нечто. блин.

  17. Статья – говно, автор – мудак.

  18. Спасибо, дорогой читатель/спамер/тролль, что уделил время 8)

  19. Если внутрь закругляемого дива вставлен другой див или таблица, то в глупом ишаке перастаёт работать закругление.

  20. на то он и глупый ишак=)

    есть ещё одна тема, недавно обнаружил. Если картинке задать бордер-радиус наравне с каким-нибудь бордером, то бордер не работает. В результате надо картинку обволакивать контейнером, ему давать бордер, и обоим давать скругление

  21. silent hunter
    24/02/2012 at 7:29 Постоянная ссылка Цитировать

    А если блок с закруглениями прозрачный?
    Я имею ввиду свойство background-color:rgba(255, 255, 255, 0.5);
    которое в IE можно имитировать через filter
    Я спрашиваю, потому что пытался уже сделать скругленные углы на прозрачном диве через js-файл, который назывался вроде rounded-corners. В результате закругления получились, но почему-то красные по горизонтали. Я думаю это из-за того, что был использован метод добавления множества дивов с постепенным изменением ширины.
    Ваш метод я пробовать не стал, так как лень.

  22. Александр Шуйский
    27/02/2012 at 23:29 Постоянная ссылка Цитировать

    ммм, а можно пример посмотреть?

  23. Александр
    16/07/2014 at 13:07 Постоянная ссылка Цитировать

    Кому надо то вот онлайн генератор бордер радиус step-web.ru/online-service/css-border-radius.php

  24. жабаскрипт

    У умных людей мысли сходятся )))
    Я тоже называю его “жабаскрипт” =))
    За статью тебе, автор, огромная благодарность! ))

  25. Александр Шуйский
    15/04/2015 at 14:18 Постоянная ссылка Цитировать

    Спасибо за отзыв, приятно =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии