[CSS] div 그림자 효과, box-shadow 속성
페이지 정보
작성자 구피아 작성일17-02-13 14:27 조회5,614회 댓글0건관련링크
본문
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 내부에 생기게 됩니다.
댓글목록
등록된 댓글이 없습니다.