Вот уже месяц пытаюсь написать статью в блог, всё никак не нахожу времени. Но с сегодняшнего я постараюсь раз в неделю-две писать сюда всякие полезные и интересные вещи.
Сегодня я хочу рассмотреть ещё одно свойство 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
-moz-border-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius: 20px 0;
-moz-border-radius: 20px 8px;
-moz-border-radius-topright: 20px 8px;
-moz-border-radius-bottomright: 20px 8px;
-moz-border-radius: 20px / 8px;
Закругление углов -webkit-border-radius
-webkit-border-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-radius: 20px 0;
-webkit-border-radius: 20px 8px;
-webkit-border-top-right-radius: 20px 8px;
-webkit-border-bottom-right-radius: 20px 8px;
-webkit-border-radius: 20px / 8px;
Закругление углов border-radius
border-radius: 20px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-radius: 20px 0;
border-radius: 20px 8px;
border-top-right-radius: 20px 8px;
border-bottom-right-radius: 20px 8px;
border-radius: 20px / 8px;
Итак, начнём по порядку. Примеры 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. Вроде бы приводят к одному и тому же, но я где-то читал, что слэш в записи параметров используется только в мозилле, а для вебкит браузеров через пробел. Но сдаётся мне, это была недопонятость, а посему использовать можно везде.
Итак, мы имеем свойства для трёх типов браузеров, и чтобы углы скруглялись везде, нужно прописать три различных записи для нужного блока. Однако, из вышесказанного хочу отметить, что порядок записи имеет значение! Рассмотрим два примера.
-webkit-border-radius: 20px 8px;
-moz-border-radius: 20px 8px;
border-radius: 20px 8px;
border-radius: 20px 8px;
-moz-border-radius: 20px 8px;
-webkit-border-radius: 20px 8px;
Думаю понятно, что последующе записанное свойство, если оно актуально для браузера, перезаписывает предыдущее, из-за чего в вебкит браузерах возникает маленький облом. Думаю далее можно без комментариев, ибо в отдельных примерах всё показано =).
Кроссбраузерный border-radius
Для Опер ранее версии 10.50 (именно в ней была добавлена поддержка border-radius) и для ишака есть средство понимания этого свойства ! Используется он просто:
-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 (все версии). От себя добавлю, что при сложном скруглении углов, этот вариант с хаком для ишака гораздо более практичен, чем всякие аналоги на жабаскрипт-библотеках, т.к. работают гораздо быстрее.
ПыСы. А напоследок ловите картинку-подсказку, чтобы не забыть где какие свойства и к чему они приводят =). Картинка кликабельна
Ссылки по теме
Часть 1. text-shadow: 15 способов применения, кроссбраузерность
Часть 2. box-shadow – тень для контейнеров. Применение и кроссбраузерность
Часть 3. border-radius – rounded corners. Применение и кроссбраузерность
(голосов: 2, средний: 5.00 из 5)Похожие записи:
- HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров
- Свойства CSS3! Часть 2. box-shadow – тень для контейнеров. Применение и кроссбраузерность
- Сокращённые формы записи CSS
- Свойства CSS3! Часть 1. text-shadow: 15 способов применения, кроссбраузерность
- Project Parfait от Adobe – незаменимый онлайн-инструмент верстальщика?
Загрузка ...
30/11/2010 at 23:12 Постоянная ссылка Цитировать
Тоже когда-то сталкивался с проблемой кроссбраузерности радиуса.
Приходилось все самому искать в интернете и собирать воедино три кода, про .htc узнал совершенно по случайности
Ещё недавно наткнулся на такой полезный ресурс _http://border-radius.com
Как бы и кроссбраузерность сохраняет, и можно выбрать отдельно для какого браузера будет использоваться радиус, и подобрать “визуально” нужный радиус
01/12/2010 at 4:31 Постоянная ссылка Цитировать
Александр, я не понял вот этого:
== >
Думаю понятно, что последующе записанное свойство, если оно актуально для браузера, перезаписывает предыдущее, из-за чего в вебкит браузерах возникает маленький облом.
< ==
Какой облом? Работает и так и так, принципиальной разницы не вижу
01/12/2010 at 7:40 Постоянная ссылка Цитировать
Shift-Web.ru, насколько я понимаю по картинке 19-20, облом в корректности отображения задуманного. Это вроде как местами принципиально
01/12/2010 at 18:12 Постоянная ссылка Цитировать
2Reysler, а вот за ссылочку отдельное спасибо – люблю всякие висивиги по тем или иным свойствам – удобно! =)
2Shift-Web.ru, как уже сказал Head, порядок иногда имеет значение именно в отображении. Посему скриншот и приложил=)
02/12/2010 at 17:08 Постоянная ссылка Цитировать
Любоптыно … Я проще делаю: плюсом лёгкий box-shadow и выходит ненавязчивый эффект блюра. Или опасёвостью
02/12/2010 at 18:58 Постоянная ссылка Цитировать
ну, отчасти как вариант можно, но всё равно не то. да и к тому же костыль для ишака тоже надо ставить
02/12/2010 at 19:04 Постоянная ссылка Цитировать
Классная статейка, много читал про CSS3, эта самая удобная и практичная)))
Большое спасибо!!! Буду чаще заглядывать!!!
02/12/2010 at 19:28 Постоянная ссылка Цитировать
Большое спасибо! Стараюсь писать, рассмотрев со всех сторон, ну и чтобы удобно было воспользоваться информацией потом, если забываешь =)
17/12/2010 at 12:40 Постоянная ссылка Цитировать
Доброго времени суток, Александр! Пытаюсь подключить к простенькой HTML странице указанные Вами файлы поведения (ie-css3, border-radius). IE8 ( при режиме совместимости 5 и
выдает Access предлог по английски dined к файлу поведения. хотя другие файлы поведения. более простые без xml-кода принимаются и выполняются. Мож я че не так делаю?
17/12/2010 at 20:14 Постоянная ссылка Цитировать
Добрый вечер!
если честно, то не очень понял. что имелось в виду. может пример онлайн покажете?
19/12/2010 at 11:48 Постоянная ссылка Цитировать
Спасибо!
19/12/2010 at 13:24 Постоянная ссылка Цитировать
Пожалуйста!
20/12/2010 at 10:10 Постоянная ссылка Цитировать
Когда выложу сообщу.(сегодня-завтра)
15/01/2011 at 18:20 Постоянная ссылка Цитировать
привет для всех версий ослика…
.clear { zoom: 1; display: block; }
15/01/2011 at 18:32 Постоянная ссылка Цитировать
< !– Internet Explorer HTML5 enabling script: –>
<!–откр квадратная скобкаif IEзакрыв квадрскобка>
<script src=закорючка верхняя двойная http: слэшслэш html5shiv.googlecode.comслэшsvnслэшtrunk слэш html5.js двойная кавычка ><слэш script > (стандартное условие -если ослик всех версий, то скрипт, срц, закрывающий тэг скрипт)
<style type= каввычччччки text/css кавычччки >
.clear открфигурная скобка
zoom: 1;
display: block;
закрфигурная скобка
<слэшstyle>
<!откр квадр скобкаendif закрывающ квадр скобка –>
15/01/2011 at 23:43 Постоянная ссылка Цитировать
ой блин, жесть. обещаю в скорейшем времени наладить комментную часть блога, а то это нечто. блин.
27/12/2011 at 20:38 Постоянная ссылка Цитировать
Статья – говно, автор – мудак.
27/12/2011 at 21:18 Постоянная ссылка Цитировать
Спасибо, дорогой читатель/спамер/тролль, что уделил время
31/12/2011 at 4:09 Постоянная ссылка Цитировать
Если внутрь закругляемого дива вставлен другой див или таблица, то в глупом ишаке перастаёт работать закругление.
31/12/2011 at 10:34 Постоянная ссылка Цитировать
на то он и глупый ишак=)
есть ещё одна тема, недавно обнаружил. Если картинке задать бордер-радиус наравне с каким-нибудь бордером, то бордер не работает. В результате надо картинку обволакивать контейнером, ему давать бордер, и обоим давать скругление
24/02/2012 at 7:29 Постоянная ссылка Цитировать
А если блок с закруглениями прозрачный?
Я имею ввиду свойство background-color:rgba(255, 255, 255, 0.5);
которое в IE можно имитировать через filter
Я спрашиваю, потому что пытался уже сделать скругленные углы на прозрачном диве через js-файл, который назывался вроде rounded-corners. В результате закругления получились, но почему-то красные по горизонтали. Я думаю это из-за того, что был использован метод добавления множества дивов с постепенным изменением ширины.
Ваш метод я пробовать не стал, так как лень.
27/02/2012 at 23:29 Постоянная ссылка Цитировать
ммм, а можно пример посмотреть?
16/07/2014 at 13:07 Постоянная ссылка Цитировать
Кому надо то вот онлайн генератор бордер радиус step-web.ru/online-service/css-border-radius.php
15/04/2015 at 14:06 Постоянная ссылка Цитировать
У умных людей мысли сходятся )))
Я тоже называю его “жабаскрипт” =))
За статью тебе, автор, огромная благодарность! ))
15/04/2015 at 14:18 Постоянная ссылка Цитировать
Спасибо за отзыв, приятно =)