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
может использоваться для улучшения внешнего вида элементов на веб-странице и для придания им измеренности и глубины.