CSS box-shadow 이해하기

box-shadow는 해당 박스요소에 그림자를 나타낼 수 있게 해준다.

box-shadow를 설정하는 기본적인 방법은 그림자의 수평 위치와 수직 위치를 설정해주는 것이다. (참고로, 수평값과 수직값은 마이너스값으로도 설정이 가능하며, 수평값과 수직값은 box-shadow가 작동하기 위해 반드시 입력되어야 한다. 아래에 소개될 나머지 값들. 색상, 블러 등은 선택 옵션이다.)

  box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)]  

예 : box-shadow: 10px 10px;

여기에 색상값을 추가하여 그림자의 색상을 설정할 수 있다.

 box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [color(색상)];  

예 :  box-shadow: 10px 10px #2580a2;

수평값과 수직값 외에 숫자값이 하나 더 추가될 경우 세번째 숫자값은 블러(blur), 즉 그림자의 흐릿한 정도를 나타낸다.

 box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [blur(그림자의 흐릿함 정도)] [color(색상)]  

예 : box-shadow: 10px 10px 10px #2580a2;

숫자값이 하나 더 추가될 경우 네번째 숫자값은 스프레드(Spread) 값이다. 스프레드 값을 설정하면, 그림자가 스프레드 값 만큼 모든 방향으로 커진다.

 box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [blur(그림자의 흐릿함 정도)] [color(색상)] [Spread]   

예 : box-shadow: 10px 10px 10px 10px #2580a2;

스프레드는 다소 혼동하기 쉬운 개념인데, 수평값과 수직값만으로 그림자의 크기를 늘린 것과 스프레드값을 이용하여 그림자의 크기를 늘린 것을 비교하면 이해하기 쉽다.

예 : box-shadow: 20px 20px 0px 0px #2580a2;

예 : box-shadow: 10px 10px 0px 10px #2580a2;

콤마를 이용하면, 그림자를 여러개로 만들거나 나누는 효과를 내는 것이 가능하다.

예 :  box-shadow: -5px -5px black, 15px -5px yellow, 15px 15px blue, -5px 15px red;

마지막으로, [inset] 은 그림자를 바깥이 아닌 내부에 형성해주는 값이다. 맨앞에 그냥 inset 이라고 입력해주면 된다.

 box-shadow: [inset] [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [blur(그림자의 흐릿함 정도)] [color(색상)] [Spread]   

예 : box-shadow: inset 10px 10px 10px 0px #2580a2;

콤마와 [inset]을 같이 이용한다면, 그림자를 내부와 외부 동시에 만드는 것도 가능하다.

예 : box-shadow: inset 10px 10px 10px 0px #2580a2, 10px 10px 10px 0px #2580a2;

! 아래 자료를 참고하여 작성하였음.
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/