4. Border-radius

Для создания границ элементов с закругленными углами в CSS 3 имеется пара­метр border-radius задающий радиус закругления в единицах длины или про­центах. Например, border-radius: 5px определяет радиус закругления всех углов равным 5 пикселам. В качестве значения можно задать радиусы верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Например, border-radius: 5рх 10рх 10рх 30рх. При этом закругления будут представляться дугой окружности. Возможно также задание закруглений по эллиптической дуге, зада­ваемой двумя радиусами - горизонтальным и вертикальным. Наборы горизон­тальных и вертикальных радиусов разделяются прямым слэшем, например:

border-radius: 5px 10рх 10рх 30рх/10рх 20рх 15рх 5рх

В частности, параметр border-radius: 5рх/10рх задает для всех углов границы элемента горизон­тальный и вертикальный радиусы, равные соот­ветственно 5 и 10 пикселам. Значение в процентах для горизонтального радиуса определяется отно­сительно ширины элемента, а для вертикально­го - относительно высоты.

На рис. слева показано несколько вариантов при­менения параметра border-radius.

Значения радиусов углов можно также опреде­лить и отдельно с помощью стилевых параметров

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius,

border-top-right-radius.

В настоящее время для применения border-radius в Firefox, Safari и Chrome рекомендуется к имени параметра добавлять специфический префикс (для Opera этого не требуется). В следующем примере определение радиуса закругления подойдет для всех перечисленных браузеров:

.raundBox {border: 4px solid red;

border-radius: 20px; /* стандартное и для Opera */

-moz-border-radius: 20px; /* для Firefox */

-webkit-border-radius: 20px; /* для Safari и Chrome */

}

5. box-shadow

Выше рассматривалось применение параметра opacity для создания эф­фекта тени. Такого же эффекта можно добиться с помощью параметра CSS 3 box-shadow, поддерживаемого браузерами Firefox, Opera, Safari и Chrome.

Значением box-shadow является строка параметров тени:

• inset - если указано, то тень будет направлена внутрь элемента;

• x - смещение тени по горизонтали;

• у- смещение тени по вертикали;

• r1— радиус размытия тени (не обязательный);

• r2 — растяжение тени (не обязательный);

• цвет — значение цвета тени.

Смещения и радиусы задаются числами с указанием размерности.

Например, box-shadow: 5px 5px 10рх #808080;

Параметр inset пока воспринимается различными браузерами по-разному. В на­стоящее время для применения box-shadow в Firefox, Safari и Chrome рекомендуется к имени параметра добавлять специфический префикс (для Opera этого не требует­ся).

В следующем примере определение тени подойдет для всех перечисленных браузеров:

.shadow {box-shadow: 5рх 5рх 10рх black; /* стандартное и для Opera */

-moz-box-shadow: 5px 5px 10рх black; /* для Firefox */

-webkit-box-shadow: 5px 5px 10рх black; /* для Safari и Chrome */

}