Одними из любимых стильных штучек вебдизайнеров всех времен и народов было создание теней для блочных элементов и закругление их острых углов.

Зачем это надо делать - отдельный сложный вопрос. Возможно, с точки зрения безопасности, чтобы пользователи случайно не порезались об острые углы. А может быть, какой-то начальник с большим авторитетом как-то случайно вскольз сказал, что это красиво...

Как бы там не было, разработчики сайтов делали большой напряг и шли на сильные ухищтрения, чтобы добиться таких эффектов. Теперь, благодаря стандарту CSS3 такие вещи стало делать гораздо проще.

Начнем с теории вопроса.

Таблица свойств CSS 3. Границы. Borders.

NN	Свойство	Гугль Хром	FireFox	IE	Safari	Opera
21	border-bottom-left-radius	4	4	9	5	10.5
22	border-bottom-right-radius	4	4	9	5	10.5
23	border-image	16	15	-	6	-o- 11
24	border-image-outset	-	-	-	-	-
25	border-image-repeat	-	-	-	-	-
26	border-image-slice	-	-	-	-	-
27	border-image-source	-	-	-	-	-
28	border-image-width	-	-	-	-	-
29	border-radius	4	4	9	5	10.5
30	border-top-left-radius	4	4	9	5	10.5
31	border-top-right-radius	4	4	9	5	10.5
41	box-shadow	10	4	9	5.1	10.5

Сразу, чтобы не терять времени, пробуем применить на практике к самой таблице свойства для обтачивания углов и отброса тени. Вопрос, стала ли от этого таблица лучше, сложный, зависит от личного вкуса посетителя странички. На мой вгляд, достаточно неплохо. Что особенно важно, эти свойства отрабатываются ок во всех браузерах, причем не требуется использование специализированных префиксов.

Рассмотрим теперь эти свойства более подробно.

Свойство border-radius для закругления углов блочных элементов.

Свойство border-radius является сокращенной записью, где указываются параметры закругления всех четырех углов в стандартном для CSS порядке: верх-лево (top-left), верх-право (top-right), низ-право (bottom-right), низ-лево (bottom-left).

См пример с такими параметрами:
border-radius:5px 10px 20px 40px;

Можно указывать не все 4, а только 3, 2 или 1 параметр.

Если не указывается значение для низ-лево (bottom-left), то для него используется значение верх-право (top-right).

Если не указывается значение для низ-право (bottom-right), то для него используется значение верх-лево (top-left).

Если не указывается значение для верх-право (top-right), то для него используется значение верх-лево (top-left).

Чаще всего используется вариант с одним параметром.

См пример:
border-radius:10px;

В результате получается аккуратный блок с одинаковой обточкой углов.

Для создания несимметричных закруглений используются конструкции типа 40px/20px; (т.е. с указанием двух значений через слэш).

См пример:
border-radius:40px/20px;

Возможно закругление одного конкретного угла.

В таких случаях используются свойства типа:
border-*-radius:

• border-top-left-radius - для закругления верхнего левого угла.
• border-top-right-radius - для закругления верхнего правого угла.
• border-bottom-right-radius - для закругления нижнего правого угла.
• border-bottom-left-radius - для закругления нижнего левого угла.

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

См пример:
border-top-right-radius:20px;

Точно также, по аналогии, можно задать персональные свойства закругления-обточки для остальных трех углов.

Свойство box-shadow для создания тени блочных элементов.

Синтаксис данного свойства довольно сложный и имеет в общем случае следующий вид:
box-shadow: h-shadow v-shadow blur spread color inset;

Начнем с теории вопроса.

Значения свойства box-shadow:

Значение	Описание
h-shadow	Значение обязательно должно быть. Позиция горизонтальной тени. Допускаются отрицательные значения. Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow	Значение обязательно должно быть. Позиция вертикальной тени. Допускаются отрицательные значения. Required. The position of the vertical shadow. Negative values are allowed
blur	Значение можно не использовать. Размер блюра. Optional. The blur distance.
spread	Значение можно не использовать. Размер тени. Optional. The size of shadow.
color	Значение можно не использовать. Цвет тени. Можно использовать цифровое или буквенное обозначение цвет по стандарту CSS. Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values
inset	Значение можно не использовать. Меняет тип тени с внешнего (outset) на внутренний (inset). Optional. Changes the shadow from an outer shadow (outset) to an inner shadow

Примечание. Свойство box-shadow прикрепляет к блочному элементу одну или несколько теней. Если теней несколько, они разделяются запятыми. Каждая тень имеет 2-4 значения, опциально можно установить цвет и тип тени. Если какие-то значения не указаны, считается, что они равны 0.

См пример:
box-shadow: 20px 10px 100px 50px #777777;

Это пример с большими значениями размера тени (50 пикселей) и блюра (100 пикселей).

См пример:
box-shadow: 10px 10px 5px #77B777;

Это пример компактной тени, которая отцвечивает зеленью.

См пример:
box-shadow: 10px 10px 40px #777777 inset;

Это пример тени, которая отбрасывается внутрь объекта.

Такой эффект достигается с помощью значения inset.

Свойство border-image для создания рамок с помощью графических файлов.

Синтаксис данного свойства имеет в общем случае следующий вид:
border-image: source slice width outset repeat;

Вообще, свойство border-image есть сокращенный вид для установки таких свойств как border-image-source (имя графического файла с путем к нему), border-image-slice (кусок файла), border-image-width (ширина), border-image-outset (смещение) и border-image-repeat (повторение).

Начнем с теории вопроса.

Значения свойства border-image:

Значение	Описание
border-image-source	Внутренние смещения графической границы. The inward offsets of the image-border.
border-image-slice	Внутренние смещения графической границы. The inward offsets of the image-border.
border-image-width	Ширина графической границы. The widths of the image-border.
border-image-outset	Размер, на который область графической границы будет выходить за пределы границ блока. The amount by which the border image area extends beyond the border box.
border-image-repeat	Будет ли графическая граница повторяться (repeat), округляться (round) или видоизменяться-растягиваться (stretch). Whether the image-border should be repeated, rounded or stretched.

Теперь рассмотрим свойства border-image на примерах.

Прежде всего, необходимо подготовить графический файл, который будет использоваться для создания графических границ →

В данном файле должны быть элементы для границ и угловые элементы.

См пример:
border:12px ridge #00FF00;
border-image:url('images/im_border_1.png') 20 20 round;

Теперь попробуем вместо round использовать repeat.

См пример:
border:12px ridge #00FF00;
border-image:url('images/im_border_1.png') 20 20 repeat;

Теперь попробуем stretch.

См пример:
border:12px ridge #00FF00;
border-image:url('images/im_border_1.png') 20 20 stretch;

Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_046_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_046_001.zip ← скачайте пример, чтобы установить на свой сайт...