[CSS] shadow-box

box-shadow

box-shadow는 엘리먼트에 그림자를 더하는 역할을 합니다.

box-shadow는 다양한 방식의 파라미터를 사용할 수 있습니다.

 

box-shadow: x축 y축 color

x축 y축 각각 위치만큼 해당 color로 그림자를 표시합니다.

box-shadow: 3px 3px black;

 

box-shadow: x축 y축 blur color

x축 y축 각각 위치만큼 blur(px)의 효과를 주고 그림자를 표시합니다.

box-shadow: 3px 3px 3px black;

 

box-shadow: x축 y축 blur 추가length color

x축 y축 각각 위치만큼 blur효과를 주고 다시 4번째 파라미터 px만큼 크기를 늘립니다.

box-shadow: 3px 3px 3px 3px black;

 

box-shadow: inset x축 y축 color

x축 y축 각각 위치만큼 내부에 그림자를 표시합니다.

box-shadow: inset 3px 3px black;

 

box-shadow: 1번째 그림자, 2번째 그림자

그림자는 ,를 이용해 여러개 연속으로 만들수 있습니다.

box-shadow: 3px 3px 3px 3px black, -3px -3px 3px 3px black;