- Сегодня поговорим про Box-shadow-добавляет тень элементу.Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.
Синтаксис
.block {
box-shadow: 1px 2px 3px 4px # 9ACD32
}
Пояснение
1px-выравнивание по вертикали
2рх-выравнивание по горизонтали
2рх-радиус тени
3рх-насыщенность тени
# 9ACD32-цвет тени
Значения
none Отменяет добавление тени.
inset Тень выводится внутри элемента.
<сдвиг по x> Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное — влево.
<сдвиг по y> Смещение тени по вертикали относительно элемента. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх.
<размытие> Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой.
<растяжение> Положительное значение растягивает тень, отрицательное, наоборот, её сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
<цвет> Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная.
Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.
Дополнительная информация о box-shadow
- Это свойство не наследуется
- Оно применяется ко всем элементам
- Ему можно задать информацию
На этом сегодня всё.