CSS свойство box-shadow и его параметры

Смещение тени

У свойства box-shadow есть два обязательных параметра:

1. смещение по оси X,
2. смещение по оси Y.

Принципиально важен порядок записи. Первое значение — всегда смещение по оси X, второе — по оси Y.

Если по одной из осей смещение не нужно, ставим ноль:

.class{box-shadow: 0 8px;} – смещаем тень только по оси Y

.class{box-shadow: 8px 8px;} – смещаем по обеим осям

Отрицательное значение для осей box-shadow

Тень сместится в противоположном направлении:

.class{box-shadow: -8px 8px;} – смещаем тень отрицательным значением по оси X

Радиус размытия тени

Третий параметр свойства box-shadow. Если его не указать, принимается значение 0, а размер тени равен размеру элемента, к которому применяется.

.class{box-shadow: 0 48px 0;} – тень дублирует размеры элемента, к которому применяется

При значении больше нуля, края теряют чёткость, тень становится больше и визуально легче. Размытие применяется со всех сторон:

.class{box-shadow: 0 0 8px;} – без смещения, только размытие

.class{box-shadow: 0 8px 8px;} – смещение по оси Y и размытие

Отрицательное значение считается ошибкой и тень не отобразится вовсе.

Радиус растяжения тени

Четвёртый параметр свойства box-shadow. Меняет величину тени относительно элемента. Растягивает во все стороны:

.class{box-shadow: 0 0 0 8px;} – без смещения и размытия, только растяжение

В данном случае тень больше элемента на 16 пикселей по ширине и высоте: 8px слева + 8px справа и 8px сверху + 8px снизу.

Отрицательное значение растяжения тени в CSS

Тень не растягивается, а сужается со всех сторон на указанное значение:

.class{box-shadow: 0 16px 0 -8px;} – уменьшение тени отрицательным значением

Цвет тени

По умолчанию цвет тени дублирует цвет шрифта: как на примерах выше.

Цвет тени указывается в любом доступном CSS формате:

• red
• #ff0009
• rgb (255, 0, 9)
• hsl (358, 100%, 50%);

Зададим элементу синюю тень:

.class{box-shadow: 0 8px #3a8fe7;}

Внутренняя тень

Параметр inset отображает тень внутри блока.

В отличие от параметров, перечисленных выше, нет жёсткого порядка написания. Оба варианта дадут один результат:

box-shadow: 0 8px #3a8fe7 inset;
box-shadow: inset 0 8px #3a8fe7;

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

Несколько теней

Несколько теней задаются через запятую. Порядок отображения сверху вниз:

.class{
    box-shadow: 0 8px #3a8fe7,
                0 16px #3ae7af;
}

Если поменять местами, голубую тень не будет видно:

.class{
    box-shadow: 0 16px #3ae7af,
                0 8px #3a8fe7;
}

Одновременно заданы внутренняя и внешняя тень:

.class{
    box-shadow: 0 16px #3ae7af,
                inset 0 8px #3a8fe7;
}

Тень с закруглёнными углами

Если элементу задать свойство border-radius, тень будет с закругленными углами.

.class{
    box-shadow: 0 16px #3a8fe7;
    border-radius: 8px;
}

Задавая растяжение тени, мы увеличиваем и её скругление. Например, border-radius 8px, а растяжение тени — 4.

8+4=12px — это радиус скругления тени.

.class{
    box-shadow: 0 16px 0 4px #3a8fe7;
    border-radius: 8px;
}

Этот же принцип распространяется и на сжатие тени, когда значение отрицательное.

8+(-4)=4px — получим скругление тени в два раза меньше.

Если сжатие тени больше, чем border-radius, получим тень с прямыми углами. Например, сжатие 16px.

8+(-16)=(-8), но у скругления не может быть отрицательного значения и применится ноль.

.class{
    box-shadow: 0 24px 0 -16px #3a8fe7;
    border-radius: 8px;
}

CSS свойство box-shadow поддерживается всеми популярными браузерами, кроме Opera Mini.