[CSS] div 그림자 효과, box-shadow 속성

CSS에서 div 요소에 box-shadow 속성을 사용하는 방법에 대해서 알아보겠습니다.

box-shadow는 그림자 효과를 나타내는 속성인데요.

인터넷 익스플로러의 경우 IE8 이상에서만 지원된다고 하네요.

사용법 :

box-shadow:[inset] 오른쪽 아래 블러 색상;

간혹 실수로 (오른쪽, 아래, 블러, 색상)과 같은 식으로 각 값의 사이에 콤마(,)를 넣는 경우가 있는데요.

이러면 정상적으로 작동을 하지 않으니 각 값 사이를 공백으로 띄우고 콤마는 넣지 마세요.

예를 들면...

<div style="width:100px; height:100px"></div>

위와 같은 div 요소가 있다고 했을 때, 그림자를 오른쪽으로 10px, 아랫쪽으로 15px, 블러 효과를 5px, 색상은 gray로 하고자 한다면 아래처럼 하면 됩니다.

<div style="width:100px; height:100px; box-shadow:10px 15px 5px gray;"></div>

간단하죠?

그럼 그림자를 왼쪽을 표현하고 싶다면?

오른쪽을 마이너스(-)로 표시하면 됩니다.

box-shadow: -10px 15px 5px gray;

이런 식으로요.

그림자를 내부(안쪽)에 생기게 하고 싶다면 inset을 넣으시면 됩니다.

box-shadow: inset 0 0 5px gray;

위 경우는 그림자가 상하좌우 이동없이 블러 효과만 div 내부에 생기게 됩니다.