CSS3 Box-Shadow (박스 그림자)

CSS3에 추가된 box-shadow 속성은 박스에 그림자 효과를 표시합니다.

box-shadow

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

지원 브라우저

IE8 이하를 제외한 대부분의 브라우저에서 지원합니다.

미리보기

기본

box-shadow 1

<div id="shadow_1">Text-Shadow 2</div>

#shadow_1 {box-shadow: -10px 10px 10px #ccc;}

흐림없이

box-shadow 2

<div id="shadow_2">Box-Shadow</div>

#shadow_2 {box-shadow:10px 10px #ccc;}

안쪽 그림자

Box-Shadow 3

<div id="shadow_3">Box-Shadow 3</div>

#shadow_3 {box-shadow: inset 0 0 5px #888;}

콤마(,)를 사용하여 여러개의 그림자를 추가할 수 있습니다.

이 글은...

• 과거 이 블로그의 글을 정리 후 재 발행하는 글입니다.
• 2011.09.27 16:34: 첫 발행
• 2016.07.15 21:24: 2차 발행