box-shadow

  • 리비전 슬러그: CSS/box-shadow
  • 리비전 제목: box-shadow
  • 리비전 아이디: 332105
  • 제작일시:
  • 만든이: mirinae312
  • 현재 리비전인가요? 아니오
  • 댓글

리비전 내용

{{ CSSRef }}

요약(Summary)

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

  • {{ Xref_cssinitial }} {{ Cssxref("none") }}
  • Applies to all elements
  • {{ Xref_cssinherited }} no
  • Media {{ Xref_cssvisual }}
  • {{ Xref_csscomputed }} as specified (any {{ xref_csslength }} made absolute; any {{ xref_csscolorvalue }} computed)

문법(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)을 설정하는 두개의 {{ Xref_csslength }} 타입 값이다. <offset-x> 는 수평(x축)거리를 설정한다. 음수값은 그림자를 엘리먼트(element)의 왼쪽(left)에 나타나게한다. <offset-y> 값은 수직(y축)거리를 설정한다. 음수값은 그림자를 엘리먼트 위쪽 방향으로 나타나게 한다. 가능한 값의 단위에 대해서는 {{ Xref_csslength }} 를 참고하도록 하자.
만약 두 값이 0으로 설정된다면, 그림자는 엘리먼트의 뒤에 표시된다.(그리고  <blur-radius> 과/혹은 <spread-radius> 값이 설정되어 있었다면, blur효과 정도를 나타낼 것이다.)
<blur-radius>
세번째 {{ Xref_csslength }} 타입의 값이다. 이 값이 클수록 더 큰 blur 효과를 나타내며, 그림자는 더욱 커지고 흐려지게 된다. 음수값은 사용할 수 없다. 값이 설정되지 않았다면, 0으로 설정될 것이다(그림자의 테두리(edge)가 또렷한 상태).
<spread-radius>
네번째의 {{ Xref_csslength }} 값이다. 양수값(positive values)은 그림자를 더 크게 확장시키고 키우며, 음수값(negative values)은 그림자를 축소시킨다. 만약 값이 설정되지 않았다면, 0으로 설정될 것이다(그림자가 엘리먼트(element)와 동일한 크기(size)를 갖는 상태).
<color>
값으로 가능한 키워드나 용어는 {{ Xref_csscolorvalue }} 타입을 참조하기 바란다. 
만약 값이 설정되지 않았다면, 브라우저에 따라 다른 색상값이 설정된다. Gecko (Firefox), Presto (Opera), Trident (Internet Explorer) 에서는 {{ cssxref("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
{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }} {{ Spec2('CSS3 Backgrounds') }}  

브라우저 호환성(Browser compatibility)

{{ CompatibilityTable }}

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

5.0
{{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}

{{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
Multiple shadows 5.0
{{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}
{{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
inset keyword 5.0
{{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}
{{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
Spread radius 5.0
{{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}
{{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}

주의사항(Notes)

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

리비전 소스

<div>
  {{ CSSRef }}</div>
<h2 id="Summaty" name="Summaty">요약(Summary)</h2>
<p>CSS의&nbsp;<code>box-shadow</code>&nbsp;속성은 콤마(,)로 구분된 하나이상의 그림자(shadow) 효과를 표현한다. 거의 모든 엘리먼트(element)의 프레임(frame)의 그림자가 표현 가능하다. 만약 그림자가 설정된 엘리먼트(element)에&nbsp;{{ cssxref("border-radius") }} 속성도 함께 설정되어 있다면, 그림자도 둥근모서리를 가지게 된다. 겹치는 그림자에 대한 z축 순서(z-ordering)는 <a href="/en-US/CSS/text-shadow" title="text-shadow">text shadows</a>&nbsp;에서와 동일하게 적용된다.(첫번째로 설정된 그림자가 상단(top)에 존재한다.)</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial }}</dfn> {{ Cssxref("none") }}</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual }}</li>
  <li><dfn>{{ Xref_csscomputed }}</dfn> as specified (any {{ xref_csslength }} made absolute; any {{ xref_csscolorvalue }} computed)</li>
</ul>
<h2 id="Syntax" name="Syntax">문법(Syntax)</h2>
<pre class="syntaxbox">
box-shadow:  none | [inset? &amp;&amp; [ &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;spread-radius&gt;? &lt;color&gt;? ] ]#</pre>
<h3 id="Values" name="Values">속성값(Values)</h3>
<dl>
  <dt>
    inset</dt>
  <dd>
    만약 값이 지정되지 않았다면, (기본값(default)으로) 그림자가 엘리먼트 하단에 나타나도록(drop shadow)&nbsp;설정한 것으로 처리한다(엘리먼트 영역이 떠 있는 것처럼).</dd>
  <dd>
    <code>inset</code>&nbsp;키워드는 그림자가 엘리먼트 프레임(frame)안쪽에 위치하도록 해준다(컨텐츠가 엘리먼트 영역 안쪽 깊게 존재하는 것처럼). 내부 그림자(Inset shadows)는 외곽선(border)안쪽에 표시되는데(투명한 엘리먼트에서도), 배경(background) 속성 위(above)에, 컨텐츠(content)의 아래(below) 표시된다.</dd>
  <dt>
    &lt;offset-x&gt; &lt;offset-y&gt;</dt>
  <dd>
    그림자의 위치값(offset)을 설정하는 두개의 {{ Xref_csslength }} 타입 값이다. <code>&lt;offset-x&gt;</code>&nbsp;는 수평(x축)거리를 설정한다. 음수값은 그림자를 엘리먼트(element)의 왼쪽(left)에 나타나게한다.&nbsp;<code>&lt;offset-y&gt;</code>&nbsp;값은 수직(y축)거리를 설정한다. 음수값은 그림자를 엘리먼트 위쪽 방향으로 나타나게 한다. 가능한 값의 단위에 대해서는 {{ Xref_csslength }} 를 참고하도록 하자.<br />
    만약 두 값이 0으로 설정된다면, 그림자는 엘리먼트의 뒤에 표시된다.(그리고&nbsp;&nbsp;<code style="font-size: 14px;">&lt;blur-radius&gt; 과/혹은</code>&nbsp;<code style="font-size: 14px;">&lt;spread-radius&gt;&nbsp;</code>값이 설정되어 있었다면, blur효과 정도를 나타낼 것이다.)</dd>
  <dt>
    &lt;blur-radius&gt;</dt>
  <dd>
    세번째 {{ Xref_csslength }} 타입의 값이다. 이 값이 클수록 더 큰 blur 효과를 나타내며, 그림자는 더욱 커지고 흐려지게 된다. 음수값은 사용할 수 없다. 값이 설정되지 않았다면, 0으로 설정될 것이다(그림자의 테두리(edge)가 또렷한 상태).</dd>
  <dt>
    &lt;spread-radius&gt;</dt>
  <dd>
    네번째의 {{ Xref_csslength }} 값이다. 양수값(positive values)은 그림자를 더 크게 확장시키고 키우며, 음수값(negative values)은 그림자를 축소시킨다. 만약 값이 설정되지 않았다면, 0으로 설정될 것이다(그림자가 엘리먼트(element)와 동일한 크기(size)를 갖는 상태).</dd>
  <dt>
    &lt;color&gt;</dt>
  <dd>
    값으로 가능한 키워드나 용어는 {{ Xref_csscolorvalue }} 타입을 참조하기 바란다.&nbsp;<br />
    만약 값이 설정되지 않았다면, 브라우저에 따라 다른 색상값이 설정된다. Gecko (Firefox), Presto (Opera), Trident (Internet Explorer) 에서는 {{ cssxref("color") }} 속성이 값으로 사용될 것이다. 반면에 WebKit 에서는&nbsp;<span style="font-family: 'Courier New', 'Andale Mono', monospace;">&lt;color&gt;</span>&nbsp;값이 설정되지 않았다면, 그림자가 투명하게 표시된다.</dd>
</dl>
<h2 id="Live_examples" name="Live_examples">예제(Live examples)</h2>
<ul>
  <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test</a></li>
  <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutorial and examples</a></li>
</ul>
<pre style="-moz-box-shadow: 60px -16px teal; -webkit-box-shadow: 60px -16px teal; box-shadow: 60px -16px teal; float: left; margin: 1em;">
box-shadow: 60px -16px teal;</pre>
<pre style="-moz-box-shadow: 10px 5px 5px black; -webkit-box-shadow: 10px 5px 5px black; box-shadow: 10px 5px 5px black; float: left; margin: 1em;">
box-shadow: 10px 5px 5px black;</pre>
<pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em olive; -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive; box-shadow: 3px 3px red, -1em 0 0.4em olive; float: left; margin: 1em;">
box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre>
<pre style="-moz-box-shadow: 5em 1em gold inset; -webkit-box-shadow: inset 5em 1em gold; box-shadow: inset 5em 1em gold; float: left; margin: 1em;">
box-shadow: inset 5em 1em gold;</pre>
<pre style="-moz-box-shadow: 0 0 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; float: left; margin: 1em;">
box-shadow: 0 0 1em gold;</pre>
<pre style="-moz-box-shadow: 0 0 1em gold inset; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">
box-shadow: inset 0 0 1em gold;</pre>
<h2 class="cleared" id="Specifications" name="Specifications">명세(Specifications)</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성(Browser compatibility)</h2>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>10.0<br />
          1.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}<br />
          {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
        <td>9.0 (See note)</td>
        <td>10.5</td>
        <td>5.1 (WebKit 534)<br />
          3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td>Multiple shadows</td>
        <td>10.0<br />
          1.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}<br />
          {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>5.1 (WebKit 534)<br />
          3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td><code>inset</code> keyword</td>
        <td>10.0<br />
          4.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}<br />
          {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>5.1 (WebKit 534)<br />
          5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td>Spread radius</td>
        <td>10.0<br />
          4.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}<br />
          {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>5.1 (WebKit 534)<br />
          5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>iOS Safari</th>
        <th>Opera Mini</th>
        <th>Opera Mobile</th>
        <th>Android Browser</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>
          <p>5.0<br />
            {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</p>
        </td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
      <tr>
        <td>Multiple shadows</td>
        <td>5.0<br />
          {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
      <tr>
        <td><code>inset</code> keyword</td>
        <td>5.0<br />
          {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
      <tr>
        <td>Spread radius</td>
        <td>5.0<br />
          {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes">주의사항(Notes)</h3>
<ul>
  <li>Internet Explorer 5.5 부터 Microsoft에서는&nbsp;<a class="external" href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532985(VS.85,loband).aspx">DropShadow</a>&nbsp;와&nbsp;<a class="external" href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533086(VS.85,loband).aspx">Shadow</a>&nbsp;필터(Filter)를 제공한다. 이 확장 속성으로 그림자를 표한할 수 있다(다만 문법(syntax)과 효과(effect)는 CSS3와 다르다).</li>
  <li>오래된 Gecko, Presto,Webkit 에서는 그림자가 레이아웃(layout)에 영향을 준다. 예를 들면, <code style="font-size: 14px;">width</code>&nbsp;가&nbsp;<code style="font-size: 14px;">100%로 설정된</code>&nbsp;엘리먼트 외부에 그림자효과를 주었을 때, 스크롤바가 나타나게 된다.&nbsp;</li>
  <li>Gecko 13 (Firefox 13) 에서는&nbsp;<code>-moz-box-shadow&nbsp;</code>에 대한 지원을 중단했다. 그 이후로 prefix가 붙지 않은 버전만 지원하고 있다.</li>
  <li>IE9 이후로&nbsp;<code>box-shadow</code>&nbsp;를 적용하기 위해서는, {{ cssxref("border-collapse") }} 속성을&nbsp;<code>separate&nbsp;</code>값으로 설정해야 한다.</li>
</ul>
Revert to this revision