mozilla
검색 결과

    box-shadow

    요약(Summary)

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

    문법(Syntax)

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

    속성값(Values)

    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> 값이 설정되지 않은경우, 그림자가 투명하게 표시된다.

    예제(Live 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;

    명세(Specifications)

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

    브라우저 호환성(Browser compatibility)

    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
    ? ? ?

    주의사항(Notes)

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

    문서 태그 및 공헌자

    Contributors to this page: mirinae312, hibiya, teoli
    최종 변경: hibiya,