Листинг П1
#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-08; просмотров: 570;