тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство box-shadow

Свойство box-shadow задает тень блоку. В качестве значения свойство принимает 6 параметров, перечисляемые через пробел, либо ключевое слово none, отменяющее тень совсем.

Синтаксис

селектор { box-shadow: inset сдвиг_по_x сдвиг_по_y размытие размер_тени цвет; }
селектор { box-shadow: none; }

Параметры

Параметр Описание
inset Необязательный параметр.
Если он задан, то тень будет внутри контейнера, если не задан - то снаружи.
сдвиг по x Задает смещение тени по оси X.
Положительное значение смещает вправо, отрицательное - влево.
сдвиг по y Задает смещение тени по оси Y.
Положительное значение смещает вниз, отрицательное - вверх.
размытие Задает размытие тени.
Чем больше значение - тем более размытой будет тень.
Необязательный параметр. Если не задан - тень будет четкой.
размер тени Задает размер тени.
Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает.
Необязательный параметр. Если не задан - тень будет такого же размера, что и элемент.
цвет Задает цвет тени в любых единицах для цвета.
Необязательный параметр. Если не задан - цвет тени совпадает с цветом текста.

Смещения по осям, размытие и размер тени задаются в любых единицах для размеров, кроме процентов.

Пример

В данном примере тень сдвинута вниз и влево и добавлено небольшое размытие:

<div id="elem"></div> #elem { box-shadow: 5px 5px 3px black; border: 1px solid black; width: 300px; height: 50px; }

:

Пример . Четкая тень

В данном примере тень сдвинута вниз и влево, но размытия нет (тень будет четкой):

<div id="elem"></div> #elem { box-shadow: 2px 2px black; border: 1px solid black; width: 300px; height: 50px; }

:

Пример . Равномерная тень

В данном примере тень не сдвинута, но к ней добавлено размытие:

<div id="elem"></div> #elem { box-shadow: 0px 0px 3px black; border: 1px solid black; width: 300px; height: 50px; }

:

Пример . Размер тени

В данном примере тень не сдвинута, размытие равно нулю, но к ней добавлен размер (черное - это граница, красное - это тень):

<div id="elem"></div> #elem { box-shadow: 0 0 0 3px red; border: 3px solid black; width: 300px; height: 50px; }

:

Пример . Размытие + размер тени

В данном примере тень не сдвинута, но к ней добавлены размытие и размер (черное - это граница, красное - это тень):

<div id="elem"></div> #elem { box-shadow: 0 0 3px 3px black; border: 1px solid black; width: 300px; height: 50px; }

:

Пример . Внутренняя тень

В данном примере тень находится внутри контейнера:

<div id="elem"></div> #elem { box-shadow: inset 0 0 6px black; border: 1px solid black; width: 300px; height: 50px; }

:

Смотрите также

  • свойство text-shadow,
    которое задает тень тексту