포토 앨범 등에서 사진 주변에 그림자를 추가하면 멋진 효과를 만들 수 있습니다. 이런 그리자 효과도 box-shadow 속성을 사용하면 포토샵 같은 프로그램을 사용하지 않고도 나타낼 수 있습니다.
그림자는 이미지 뿐만 아니라 div 전체 등 지정하는 것에 따라 넣을 수 있는데 이때 box-shadow의 속성 값에 따라 그림자의 위치를 바꿀 수 있고 그림자의 색상이나 흐림 정도를 조절할 수 있습니다.
box-shadow
box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다.
기본형
box-shadow : none | x-position | y-position | blur | spread | color | inset
- none : 그림자 효과를 없앱니다.
- x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수)
- y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어집니다. (필수)
- blur : 그림자를 흐릿하게 블러 처리합니다. 값이 클 수록 더욱 흐려집니다.
- spread : 양수면 그림자를 펼쳐 확장하고, 음수면 축소합니다.
- color : 그림자 색을 정합니다.
- inset : 요소의 안쪽에 그림자를 만듭니다.
예제