[CSS] 박스 그림자지게 하는 방법

div 박스에 선이 아닌, 그림자를 지게하는 방법입니다. CSS 키워드는 box-shadow입니다.

전                                                                                                      후

 

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

옵션 설명.

<offset-x> <offset-y>

첫 번째와 두 번째 옵션입니다. 그림자의 offset을 설정합니다.

 

<blur-radius>

크면 클 수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아집니다. 음수 값은 사용할 수 없습니다. 값을 설정하지 않으면 0이 되어 테두리가 선명해집니다.

 

<spread-radius>

양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듭니다. 기본값은 0(그림자와 요소 크기 동일)입니다. 

 

<color>

그림자 음영의 색상

 

 

ex)

전.

아무런 옵션 없이 단순히 영역만을 만든다면, 아래 사진처럼 선으로만 구분되는 영역이 만들어 집니다.

후.

box-shadow: 0 6px 6px 0 gray;

div {
  width: 400px;
  height: 200px;
  margin: auto;
  background-color: white;
  box-shadow: 0 6px 6px 0 gray;
}

 

 

참고 : developer.mozilla.org/ko/docs/Web/CSS/box-shadow