box-shadow

# box-shadow

box-shadow : 요소의 테두리를 감싼 그림자 효과

그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함, 확산 정도, 색상으로 이루어진다.

browser support : ie9 이상

offset-x : 위 아래

offset-y : 좌 우

blur-radius : 값이 클 수록 그림자가 흐려진다.

spread-radius : 양수- 그림자가 커지고 확산됨. 음수- 그림자가 줄어듬.

color : 그림자 색상

inset : 박스 내에 그림자

/* offset-x , offset-y , color */

box-shadow : 10px 10px black;

/* offset-x , offset-y , blur-radius , color */

box-shadow : 10px 10px 5px black;

/* offset-x , offset-y , blur-radius , spread-radius , color */

box-shadow : 10px 10px 5px 3px rgba(0,0,0,0.3);

/* inset , offset-x , offset-y , color */

box-shadow : inset 10px 10px black;