box-shadow

요약

CSS의 box-shadow 속성은 콤마(,)로 구분된 하나이상의 그림자(shadow) 효과를 표현한다. 거의 모든 엘리먼트(element)의 프레임(frame)의 그림자가 표현 가능하다. 만약 그림자가 설정된 엘리먼트(element)에 border-radius 속성도 함께 설정되어 있다면, 그림자도 둥근모서리를 가지게 된다. 겹치는 그림자에 대한 z축 순서(z-ordering)는 text shadows 에서와 동일하게 적용된다.(첫번째로 설정된 그림자가 상단(top)에 존재한다.)

문법

box-shadow:  none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

속성값

inset

만약 값이 지정되지 않았다면, (기본값(default)으로) 그림자가 엘리먼트 하단에 나타나도록(drop shadow) 설정한 것으로 처리한다(엘리먼트 영역이 떠 있는 것처럼).

inset 키워드는 그림자가 엘리먼트 프레임(frame)안쪽에 위치하도록 해준다(컨텐츠가 엘리먼트 영역 안쪽 깊게 존재하는 것처럼). 내부 그림자(Inset shadows)는 외곽선(border)안쪽에 표시되는데(투명한 엘리먼트에서도), 배경(background) 속성 위(above)에, 컨텐츠(content)의 아래(below) 표시된다.

<offset-x> <offset-y>

그림자의 위치값(offset)을 설정하는 두개의 <length> 타입 값이다. <offset-x> 는 수평(x축)거리를 의미한다. 음수값은 그림자가 엘리먼트(element)의 왼쪽(left)에 나타나게한다. <offset-y> 값은 수직(y축)거리를 의미한다. 음수값은 그림자를 엘리먼트 위(above)쪽 방향으로 나타나게 한다. 가능한 값의 단위에 대해서는 <length> 를 참고하도록 하자.
만약 두 값이 모두 0으로 설정된다면, 그림자는 엘리먼트의 바로 뒤에 표시된다(그리고  <blur-radius> 과/혹은 <spread-radius> 값이 설정되어 있는 경우에는, blur효과 정도를 나타낼 것이다).

<blur-radius>

세번째 <length> 타입의 값이다. 이 값이 클수록 더 큰 blur 효과를 나타내며, 그림자는 더욱 커지고 흐려지게 된다. 음수값은 사용할 수 없다. 값이 설정되지 않았다면, 0으로 설정될 것이다(그림자의 테두리(edge)가 또렷한 상태).

<spread-radius>

네번째 <length> 타입의 값이다. 양수값(positive values)은 그림자를 더 크게 확장시키고 키우며, 음수값(negative values)은 그림자를 축소시킨다. 만약 값이 설정되지 않았다면, 0으로 설정될 것이다(그림자가 엘리먼트(element)와 동일한 크기(size)를 갖는 상태).

<color>

<color> 타입의 값으로 설정이 가능하다. 
만약 값이 설정되지 않았다면, 브라우저에 따라 다른 색상값이 설정된다. Gecko (Firefox), Presto (Opera), Trident (Internet Explorer) 에서는 color 속성이 값으로 사용된다. 반면에 WebKit 에서는 <color> 값이 설정되지 않은경우, 그림자가 투명하게 표시된다.

예제

• box-shadow test
• box-shadow tutorial and examples

box-shadow: 60px -16px teal;

box-shadow: 10px 5px 5px black;

box-shadow: 3px 3px red, -1em 0 0.4em olive;

box-shadow: inset 5em 1em gold;

box-shadow: 0 0 1em gold;

box-shadow: inset 0 0 1em gold;

명세

브라우저 호환성

주의사항

• Internet Explorer 5.5 부터 Microsoft에서는 DropShadow 와 Shadow 필터(Filter)를 제공한다. 이 확장 속성으로 그림자를 표현할 수 있다(다만 문법(syntax)과 효과(effect)는 CSS3와 다르다).
• 오래된 Gecko, Presto,Webkit 에서는 그림자가 레이아웃(layout)에 영향을 준다. 예를 들면, width 가 100%로 설정된 엘리먼트에 외부 그림자(outer shadow)를 주었을 때, 스크롤바가 나타난다. 
• Gecko 13 (Firefox 13) 에서는 -moz-box-shadow 에 대한 지원을 중단했다. 그 이후로 prefix가 붙지 않은 버전만 지원하고 있다.
• IE9 이후로 box-shadow 를 적용하기 위해서는, border-collapse 속성을 separate 값으로 설정해야 한다.