Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Рамки со скругленными углами

Рамки со скругленными углами

Рамки с прямоугольными углами встречаются очень часто и уже успели намозолить глаза. Вот рамки со скругленными углами — другое дело!

Расширения CSS — moz-border-radius-topleft (Firefox), border-top-left-radius (Opera и стандарт CSS 3) и — webkit-border-top-left-radius (Web-обозреватели на программном ядре Webkit) задают радиус скругления верхнего левого угла рамки:

— moz-border-radius-topleft|border-top-left-radius|

— webkit-border-top-left-radius: <значение 1> [<значение 2>]

Если указано одно значение, оно задаст радиус скругления и по горизонтали, и по вертикали. Если указаны два значения, то первое задаст радиус скругления по горизонтали, а второе — по вертикали, создавая тем самым скругление эллиптической формы. Радиус скругления может быть задан в любой единице измерения, поддерживаемой CSS.

Для указания радиуса скругления остальных углов рамки предназначены расширения CSS, перечисленные далее.

— moz-border-radius-topright (Firefox), border-top-right-radius (Opera и стандарт CSS 3) и — webkit-border-top-right-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления верхнего правого угла рамки.

— moz-border-radius-bottomright (Firefox), border-bottom-right-radius (Opera и стандарт CSS 3) и — webkit-border-bottom-right-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления нижнего правого угла рамки.

— moz-border-radius-bottomleft (Firefox), border-bottom-left-radius (Opera и

стандарт CSS 3) и — webkit-border-bottom-left-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления нижнего левого угла рамки.

Формат их использования такой же, как у расширений CSS, описанных в начале этого раздела (листинг П1).

Здесь мы задаем для контейнера cheader рамку, состоящую из одной нижней стороны, имеющую радиусы скругления нижнего левого и нижнего правого углов, равные двум пикселам, сразу для всех Web-обозревателей, поддерживающих эту возможность. Таким образом, и Firefox, и Opera, и Web-обозреватели на программном ядре Webkit выведут эти углы рамки скругленными.

Расширения CSS — moz-border-radius (Firefox), border-radius (Opera и стандарт CSS) и — webkit-border-radius (Web-обозреватели на программном ядре Webkit) позволяют задать радиусы скругления сразу для всех углов рамки:

— moz-border-radius|border-radius|-webkit-border-radius:

<позиция 1 значение 1>[/<позиция 1 значение 2>] [<позиция 2 значение 1>[/<позиция 2 значение 2>][<позиция 3 значение 1>[/<позиция 3 значение 2>] [<позиция 4 значение 1>[/<позиция 4 значение 2>]]]]

Как видим, каждая позиция может содержать как одно значение, так и пару значений, разделенных слэшем /. Если она содержит одно значение, это значение задаст радиус скругления и по горизонтали, и по вертикали. Если же в позиции указать два значения, разделив их слэшем, первое задаст радиус скругления по горизонтали, второе — по вертикали.

Кроме того, можно указать от одной до четырех позиций.

— Если указана одна позиция, она задаст радиус скругления всех углов рамки.

— Если указаны две позиции, первая задаст радиус скругления верхнего левого и нижнего правого углов рамки, а вторая — верхнего правого и нижнего левого углов.

— Если указаны три позиции, первая задаст радиус скругления верхнего левого угла рамки, вторая — верхнего правого и нижнего левого, а третья — нижнего правого угла.

— Если указаны четыре позиции, первая задаст радиус скругления верхнего левого угла рамки, вторая — верхнего правого, третья — нижнего правого, а четвертая — нижнего левого угла.

Пример иллюстрирует листинг П2.

Здесь мы задаем для пунктов "внешних" списков, формирующих полосу навигации, рамки со скругленными верхними углами. Радиус скругления их по горизонтали будет 3 пиксела, а по вертикали — 1 пиксел.

Оглавление книги