box-shadow — это свойство CSS, которое позволяет создавать тень вокруг элемента. С помощью box-shadow можно задать цвет, размер и размытие тени.
Синтаксис для применения свойства box-shadow:
selector {
box-shadow: <horizontal-offset> <vertical-offset> <blur-radius> <spread-radius> <color>;
}Значения, используемые в свойстве box-shadow:
<horizontal-offset>— задает горизонтальный сдвиг тени от элемента. Значение может быть положительным, отрицательным или равным нулю.<vertical-offset>— задает вертикальный сдвиг тени от элемента. Значение может быть положительным, отрицательным или равным нулю.<blur-radius>— определяет, насколько размыта тень. Значение может быть равно нулю (тень четкая), или положительное (более размытая тень).<spread-radius>— задает распространение тени. Значение может быть равно нулю (тень ограничена элементом), или быть положительным (тень распространяется за пределы элемента) или отрицательным (тень сокращается к элементу).<color>— устанавливает цвет тени.
Например, следующий код создает тень вокруг элемента:
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);Это подставит тень с горизонтальным и вертикальным сдвигом на 2 пикселя, размытие тени на 5 пикселей, цвет тени будет черный и прозрачность 0,3.
Свойство box-shadow может использоваться для улучшения внешнего вида элементов на веб-странице и для придания им измеренности и глубины.
