We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

요약

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

초기값none
적용대상all elements. It also applies to ::first-letter.
상속no
Mediavisual
Computed valueany length made absolute; any specified color computed; otherwise as specified
Animation typea shadow list
Canonical orderthe unique non-ambiguous order defined by the formal grammar

문법

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: 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;

명세

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'box-shadow' in that specification.
Candidate Recommendation  

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 (See note) 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
Multiple shadows 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
inset keyword 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Spread radius 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support

5.0
(Yes)-webkit

? ? ?
Multiple shadows 5.0
(Yes)-webkit
? ? ?
inset keyword 5.0
(Yes)-webkit
? ? ?
Spread radius 5.0
(Yes)-webkit
? ? ?

주의사항

  • 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 값으로 설정해야 한다.

문서 태그 및 공헌자

이 페이지의 공헌자: Sebastianz, teoli, hibiya, mirinae312
최종 변경: Sebastianz,