Листинг П1. border‑bottom: medium dotted;

#cheader { width: 1010px;

padding: 0 20px;

border‑bottom: medium dotted;

– moz‑border‑radius‑bottomleft: 2px;

– moz‑border‑radius‑bottomright: 2px; border‑bottom‑left‑radius: 2px; border‑bottom‑right‑radius: 2px;

– webkit‑border‑bottom‑left‑radius: 2px;

– webkit‑border‑bottom‑right‑radius: 2px }

 

Здесь мы задаем для контейнера 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.

 








Дата добавления: 2015-05-19; просмотров: 833;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.004 сек.