CSS) box-shadow 속성

이곳저곳에서 많이 쓰이는 박스 주위에 그림자가 생기는 디자인을 만들어 주는 속성이 바로 box-shadow 이다.

 

box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);

첫번째 값은 그림자가 가로축으로 이동하는지를 나타낸다. 값이 +면 오른쪽으로, -면 왼쪽으로 그림자가 뻗어나간다. 두번째 값은 그림자가 세로축으로 얼마나 이동하는지, 세번째 값은 그림자를 얼마나 흐리게 할지, 네번째 값은 그림자를 얼마나 퍼지게 할지를 정한다. 마지막 rgba값을 이용해 그림자의 색상, 투명도를 설정한다.

가로축

 

box-shadow: 100px 1px 20px 0 rgba(0,0,0,0.1);

세로축

box-shadow: 0 100px 20px 0 rgba(0,0,0,0.1);

블러

box-shadow: 0 1px 100px 0 rgba(0,0,0,0.1);

스프레드

box-shadow: 0 1px 20px 100px rgba(0,0,0,0.1);