Box-shadow는 CSS에서 HTML에 그림자 효과를 줄 수 있는 속성이다.
기본 사용법은 다음과 같다.
선택자 {
box-shadow: Inset Horizontal-offset Vertical-offset Blur-offset Spread Shadow-color
}
선택자 {
box-shadow: inset | 오른쪽으로 이동 | 아래로 이동 | 흐림정도 | 크기 | 색상
}속성값 설명
- Inset: inset 키워드를 지정하면 그림자가 요소 안쪽에 위치 (단위: inset)
- Horizontal-offset: 그림자를 박스의 오른쪽으로 지정한 값만큼 이동 (단위: px)
- Vertical-offset: 그림자를 박스의 아래로 지정한 값만큼 이동 (단위: px)
- Blur-Radius: 그림자의 흐림정도를 지정, 지정한 값만큼 그림자가 커지고 흐려짐 (단위: px)
- Spread: 그림자를 더 크게 확장 (단위: px)
- Shadow-Color: 그림자 색상 지정
