Просмотров: 2 353

Свойство ‘box-shadow’ и примеры.

Возможные значения: none | <установки тени>

Значение по умолчанию: none

Применяется: all elements

Наследуется: нет

Проценты: не используются

Свойство box-shadow используется для того, чтобы заставить элемент отбрасывать одну или более теней.

Что понимается под установками тени?

[inset] <сдвиг по оси x> <сдвиг по оси y> <радиус размытия> <расширение> <цвет>

inset – этот параметр не обязательный. Если он указывается, то тень будет отбрасываться внутри элемента, а не снаружи.

сдвиг по оси x – на какое расстояние относительно исходного элемента будет отбрасываться тень по горизонтали. Допускается указание отрицательных значений.

сдвиг по оси y – на какое расстояние относительно исходного элемента будет отбрасываться тень по вертикали. Допускается указание отрицательных значений.

радиус размытия – чем больше этот параметр, тем границы тени становятся все более размытыми и нечеткими.

расширение – чем больше этот параметр, тем на большее расстояние происходит распространение тени на веб-странице.

цвет – задает цвет тени. Параметры не обязательный, если его не указать, то тень будет черным цветом.

<div style="width:150px; height:150px; background:#FC0; box-shadow:5px 5px 5px 5px #009900;  text-align:center">Блок 1</div>

box-shadow

К одному объекту можно добавлять сразу несколько теней, через запятую:

<div style="width:150px; height:150px; background:#FC0; box-shadow:5px 5px 5px 5px #009900, -5px -5px 5px 5px #00C;  text-align:center">Блок 1</div>

box-shadow

<div style="width:150px; height:150px; background:#FC0; box-shadow:-2px 2px 4px 0 #000000;  text-align:center">Блок 1</div>
Блок 1