[HTML + CSS] box-shaow(그림자 효과)

1. 기본형(필수)

box-shadow: 10px 15px #000;

10px : x-position. 양수면 오른쪽, 음수면 왼쪽. 필수

15px : y-position. 양수면 아래쪽, 음수면 위쪽. 필수

#000 : 그림자색. 안쓰면 까만색이 기본값이라 그러는데, 나는 값을 안 넣으니까 그림자가 안 나타남. 필수인듯...

blur나 spread를 주지 않은 기본형에서는 그림자의 크기가 box의 크기 같음. 

그러므로, 'box-shadow: 0 0 #000;' 과 같이 입력하면 그림자가 box의 바로 아래에 있으므로 보이지 않는다. 

2. 확장형 

box-shadow: 10px 15px 12px 14px #000; 

12px : blur. 흐릿한 정도를 나타낸다. 값이 클수록 흐려지고, blur범위도 넓어진다.

14px : spread. 양수일 경우 그림자를 크기를 상하좌우 4방향으로 14px씩 확장한다. 음수값일 때는 축소한다.