среда, 27 января 2010 г.

CSS3 свойство border-radius

WebKit

Скругление углов с помощью CSS3


Для скругления углов в CSS3 используется свойство border-radius.


Браузеры Google Chrome и Safari «понимают» его как с префиксом -webkit так и без оного. Mozilla Firefox понимает это свойство только с префиксом -moz. А Opera и Internet Explorer не понимают его ни под каким видом.




Каноническое задание: border-radius: размер, где:

  • размер – размер в допустимых единицах CSS


.radius1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

Скругление определенных углов


С помощью свойства CSS3 border-radius можно задавать размер скругления отдельных узлов.


Исправлено: Порядок задания размеров последней спецификации border-radius.


border-radius: top-left top-right bottom-right bottom-left


Порядок задания размеров запомнить проще так:

1 2
4 3


.radius2 {
-webkit-border-radius: 0 10px 0 10px;
-moz-border-radius: 0 10px 0 10px;
}

Отдельные правила скругления углов


Можно использовать отдельные правила для скругления каждого угла.


Каноническое задание: border-top-left-radius: размер, где:

  • top – это top | bottom

  • left – это left | right

  • размер – размер в допустимых единицах CSS


Тут неприятно удивил браузер Firefox, так как синтаксис у него отличается от «канонического»:
-moz-border-radius-topleft: размер.


.radius3 {
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
}

Успехов в «украшательстве» веб-страниц! И… пользуйся продвинутыми браузерами ;)


Еще по теме CSS


В этой статье я рассказывал про свойство box-shadow.

HTML скругление углов


Скругление углов с помощью CSS

20 Комментариев :

a13x4ndr комментирует...

Спасибо, как всегда полезно и познавательно :)
И последняя фраза - в точку! Вообще непонятно, зачем MS с маниакальным упорством разрабатывает и продвигает явно проигрывающий всем на рынке продукт? Может мы опять чего-то не знаем?

Schisma комментирует...

Спасибо, полезно.

M_a_X_i_N комментирует...

не забывай, кстати, что это все, конечно, прекрасно, но увы CSS3 IE, к примеру, не поддерживает, а значит все эти красивости будут видеть только избранные.
+ старые браузеры, естественно, не в курсе о подобных ухищрениях, так что публика будет обделена /не путать с обделана/. Увы.

Metallen Einklang комментирует...

Thanks.

Metallen Einklang комментирует...

А зачем нужно модерирование комментариев? Мне хочется сразу же видеть свой коммент после публикации(((
Извини за оффтоп.

Croaker комментирует...

a13x4ndr, M$ долго выезжала на том, что IE был предустановленным браузером в системе. К счастью, тут ситуация меняется к лучшему. Вот и Google, с 1 марта сего года прекращает поддержку «ослика» версии 6.

M_a_X_i_N, тут уж «хозяин – барин». Если кто-то хочет сам себя обделять, то кто ж ему запретит?

Повсюду кипит работа над HTML5 и CSS3 и лично я прекрасно понимаю тех людей, которые делают свое дело, не дожидаясь пока майкрософтовский браузер до них «дорастет».

Я предполагаю, что постепенно пользователи IE будут вытеснены в особую нишу, этакую «провинцию Интернета» :)

Metallen Einklang, полностью согласен – самому не нравится. Это была вынужденная мера из-за волны спама в комментах.

Станислав комментирует...

Ну на крайний случай можно нарезать уголки в Фотошопе, сделать скрипт для определения браузера.
Для Сафари и Мозилы пусть выводится CSS3 код, а для ИЕ и оперы код для подстановки уголков.
Геморно конечно , но если например заказчик требует...

Анонимный комментирует...

Станислав, не надо ничего такого делать. Есть костыли, которые помогают использовать это свойство в ИЕ, гуглите border-radius.htc

Анонимный комментирует...

Ошибка. Порядок задания размеров все-таки другой.

border-radius: 4em;
is equivalent to
border-top-left-radius: 4em;
border-top-right-radius: 4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 4em;

Таки спецификацию читать надо.

Croaker комментирует...

Спасибо. Исправлено

AlexUnder комментирует...

Интересное свойство, надо будет попробовать... Счаз как раз верстаю один проект, там будет куча блочков с закругленными краями.

lokanaft комментирует...

Всё таки опера уже понимает эти правила) и безовсяких там моз-

Анонимный комментирует...

Возможно ли на чистом CSS выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон? Как здесь: http://www.alexandergusev.com/

Croaker комментирует...

На чистом CSS нельзя. Для этого есть jQuery плагины; например Supersized 3.0

Анонимный комментирует...

Opera Понимает! Opera 10.50

Croaker комментирует...

«Все течет, все меняется» ©
Вот и Opera подоспела :). Спасибо за информацию.

Всимэналь комментирует...

Добрый день! Не богли бы вы написать о том, как втсавить текст в такую вот рамочку?

http://s016.radikal.ru/i335/1011/10/6ed67f2cd4ff.jpg

Что надо прописать в html и css? Заранее благодарю.

Игорь комментирует...

добрый день, автор. я бы хотел закруглить белый фон на моем блоге http://wildlife-byshnev.blogspot.com/

Но не знаю, где находится код этого элемента. Извините, в этом очень не разбираюсь. Если можно, подробно распишите, "что на что" нужно заменить. Буду очень признателен.
И еще, можно ли этот же элемент сделать прозрачным (в определенной степени)?

Croaker комментирует...

Всимэналь, это элемент div с такими стилями:

<div style="margin:1em 2em;padding: 0.2em 0.5em;background-color:#EEF8FE;border:1px solid #1A3457;">здесь текст</div>

Croaker комментирует...

Игорь, скругление там, как вижу, уже сделано :) А полупрозрачность можно взять из этого примера и применить к классу
.post-outer {…}

Отправить комментарий

Жги!