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

구피아 3년전 신고 

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 내부에 생기게 됩니다.


모바일 버전으로 보기