[CSS3] box-shadow (그림자 효과)

 그림자를 넣는 효과에 들어가는 인수가 좀 되서 가끔씩 까먹어서 메모를 위해서 포스팅을 하도록 한다.

box-shadow: 가로이동 세로이동 흐림거리 확산거리 색상 안/밖

1. 가로이동

그림자를 가로로 이동시킨다. 음수를 넣으면 왼쪽, 양수의 경우 오른쪽으로 이동한다.

2. 세로이동

그림자를 세로로 이동시킨다. 음수를 넣으면 위쪽, 양수의 경우 아래쪽으로 이동한다.

3. 흐림거리 

가장자리를 흐리게 한다.

아마도 그림자의 테두리 부분을 중심으로 설정한 흐림거리만큼 흐려진다.

(흐림거리가 20이라면 그림자의 끝에서 안쪽10, 바깥쪽 10만큼 번지게 된다.)

4. 확산거리

사방으로 그림자 자체가 커진다.

5. 색상

색상이다.

6. 안/밖

inset을 넣으면 그림자가 요소의 안쪽에 생긴다.

---

특히 머티리얼 디자인을 가져다가 쓰기 위해서는 그림자가 완전 필수 수준이기 때문에 알아두면 좋다.