
CSS свойство box-shadow и его параметры
Box-shadow добавляет элементу одну или несколько теней
Содержание
Смещение тени
У свойства box-shadow есть два обязательных параметра:
- смещение по оси X,
- смещение по оси 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.