Compare Revisions

box-shadow

Revision 28077:

Revision 28077 by Jürgen Jeka on

Revision 28078:

Revision 28078 by noob on

Title:
box-shadow
box-shadow
Slug:
CSS/Box-shadow
CSS/Box-shadow
Tags:
css, "CSS Reference", CSS3, css3-background
css, "CSS Reference", CSS3, css3-background
Content:

Revision 28077
Revision 28078
t8      See {{ Cssxref("-moz-box-shadow") }}t8      {{ CSSMozExtensionRef() }}{{ gecko_minversion_header("2.0")
 > }}
9    </p>
10    <h3>
11      Summary
12    </h3>
13    <p>
14      The <code>box-shadow</code> CSS property accepts one or mor
 >e shadow effects as a comma-separated list. It allows to cast a d
 >rop shadow from the frame of almost any arbitrary element. If a {
 >{ cssxref("-moz-border-radius","border-radius") }} is specified o
 >n the element with a box shadow, the box shadow will take on the 
 >same rounded corners. The z-ordering of multiple box shadows is t
 >he same as multiple {{ cssxref("text-shadow", "text-shadows") }} 
 >(the first specified shadow is on top).
15    </p>
16    <ul>
17      <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}
18      </li>
19      <li>Applies to: all elements
20      </li>
21      <li>{{ Xref_cssinherited() }}: no
22      </li>
23      <li>Media: {{ Xref_cssvisual() }}
24      </li>
25      <li>{{ Xref_csscomputed() }}: as specified (any <code>&lt;l
 >ength&gt;</code> made absolute; any <code>&lt;color&gt;</code> co
 >mputed)
26      </li>
27    </ul>
28    <h3>
29      Syntax
30    </h3>
31    <pre>
32box-shadow:  none | &lt;shadow&gt; [,&lt;shadow&gt;]*
33 
34  where &lt;shadow&gt; is defined as:
35 
36inset? &amp;&amp; [ &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-ra
 >dius&gt;? &lt;spread-radius&gt;? &lt;color&gt;? ]
37</pre>
38    <h3>
39      Values
40    </h3>
41    <dl>
42      <dt>
43        inset <small>(optional)</small>
44      </dt>
45      <dd>
46        If not specified (default), the shadow is assumed to be a
 > drop shadow (as if the box were raised above the content).<br>
47        The presence of the <code>inset</code> keyword changes th
 >e shadow to one inside the frame (as if the content was depressed
 > inside the box). Inset shadows are drawn above background, but b
 >elow border and content.
48      </dd>
49      <dt>
50        &lt;offset-x&gt; &lt;offset-y&gt; <small>(required)</smal
 >l>
51      </dt>
52      <dd>
53        This are two {{ Xref_csslength() }} values to set the sha
 >dow offset. <code>&lt;offset-x&gt;</code> specifies the horizonta
 >l distance. Negative values place the shadow to the left of the e
 >lement. <code>&lt;offset-y&gt;</code> specifies the vertical dist
 >ance. Negative values place the shadow above the element. See {{ 
 >Xref_csslength() }} for possible units.<br>
54        If both values are <code>0</code>, the shadow is placed b
 >ehind the element (and may generate a blur effect if <code>&lt;bl
 >ur-radius&gt;</code> and/or <code>&lt;spread-radius&gt;</code> is
 > set).
55      </dd>
56      <dt>
57        &lt;blur-radius&gt; <small>(optional)</small>
58      </dt>
59      <dd>
60        This is a third {{ Xref_csslength() }} value. The larger 
 >this value, the bigger the blur, so the shadow becomes bigger and
 > lighter. Negative values are not allowed. If not specified, it w
 >ill be <code>0</code> (the shadow's edge is sharp).
61      </dd>
62      <dt>
63        &lt;spread-radius&gt; <small>(optional)</small>
64      </dt>
65      <dd>
66        This is a fourth {{ Xref_csslength() }} value. Positive v
 >alues will cause the shadow to expand and grow bigger, negative v
 >alues will cause the shadow to shrink. If not specified, it will 
 >be <code>0</code> (the shadow will be the same size as the elemen
 >t).
67      </dd>
68      <dt>
69        &lt;color&gt; <small>(optional)</small>
70      </dt>
71      <dd>
72        See {{ Xref_csscolorvalue() }} values for possible keywor
 >ds and notations.<br>
73        If not specified, the color depends on the browser. In Ge
 >cko (Firefox), the value of the {{ cssxref("color") }} property i
 >s used. WebKit's shadow is transparent and therefore useless if <
 >code>&lt;color&gt;</code> is omitted.
74      </dd>
75    </dl>
76    <h3>
77      Live Examples
78    </h3>
79    <ul>
80      <li>
81        <a class="external" href="http://www.elektronotdienst-nue
 >rnberg.de/bugs/box-shadow_inset.html" title="http://www.elektrono
 >tdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test<
 >/a>
82      </li>
83      <li>
84        <a class="external" href="http://markusstange.wordpress.c
 >om/2009/02/15/fun-with-box-shadows/" title="http://markusstange.w
 >ordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutoria
 >l and examples</a>
85      </li>
86    </ul>
87    <pre style="-moz-box-shadow: 60px -16px teal; float: left; ma
 >rgin: 1em;">
88   -moz-box-shadow: 60px -16px teal;
89-webkit-box-shadow: 60px -16px teal;
90        box-shadow: 60px -16px teal;
91</pre>
92    <pre style="-moz-box-shadow: 10px 5px 5px black; float: left;
 > margin: 1em;">
93   -moz-box-shadow: 10px 5px 5px black;
94-webkit-box-shadow: 10px 5px 5px black;
95        box-shadow: 10px 5px 5px black;
96</pre>
97    <pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em oliv
 >e; float: left; margin: 1em;">
98   -moz-box-shadow: 3px 3px red, -1em 0 0.4em olive;
99-webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive;
100        box-shadow: 3px 3px red, -1em 0 0.4em olive;
101</pre>
102    <pre style="-moz-box-shadow: 5em 1em gold inset; float: left;
 > margin: 1em;">
103   -moz-box-shadow: inset 5em 1em gold;
104-webkit-box-shadow: inset 5em 1em gold;
105        box-shadow: inset 5em 1em gold; 
106</pre>
107    <pre style="-moz-box-shadow: 0pt 0pt 1em gold; float: left; m
 >argin: 1em;">
108   -moz-box-shadow: 0 0 1em gold;
109-webkit-box-shadow: 0 0 1em gold;
110        box-shadow: 0 0 1em gold; 
111</pre>
112    <pre style="-moz-box-shadow: 0pt 0pt 1em gold inset; float: l
 >eft; margin: 1em;">
113   -moz-box-shadow: inset 0 0 1em gold;
114-webkit-box-shadow: inset 0 0 1em gold;
115        box-shadow: inset 0 0 1em gold;
116</pre>
117    <p style="clear: both;">
118      &nbsp;
119    </p>
120    <h3>
121      Browser compatibility
122    </h3>
123    <table class="standard-table">
124      <tbody>
125        <tr>
126          <th>
127            Browser
128          </th>
129          <th colspan="2">
130            Basic support
131          </th>
132          <th>
133            Multiple shadows
134          </th>
135          <th>
136            <code>inset</code> keyword
137          </th>
138          <th>
139            Spread radius
140          </th>
141        </tr>
142        <tr>
143          <td>
144            Internet Explorer
145          </td>
146          <td colspan="2">
147            ---<br>
148            5.5&nbsp; supports Microsoft's <a class="external" hr
 >ef="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loba
 >nd%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms5329
 >85(VS.85,loband).aspx">DropShadow</a> and <a class="external" hre
 >f="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loban
 >d%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms53308
 >6(VS.85,loband).aspx">Shadow</a> Filter
149          </td>
150          <td>
151            ---
152          </td>
153          <td>
154            ---
155          </td>
156          <td>
157            ---
158          </td>
159        </tr>
160        <tr>
161          <td>
162            Firefox (Gecko)
163          </td>
164          <td>
165            <strong>4.0</strong> (2.0)
166          </td>
167          <td>
168            <code>box-shadow<br></code>
169          </td>
170          <td>
171            4.0 (2.0)
172          </td>
173          <td>
174            4.0 (2.0)
175          </td>
176          <td>
177            4.0 (2.0)
178          </td>
179        </tr>
180        <tr>
181          <td>
182            Opera
183          </td>
184          <td>
185            <strong>10.5</strong>
186          </td>
187          <td>
188            <code>box-shadow</code>
189          </td>
190          <td>
191            10.5
192          </td>
193          <td>
194            10.5
195          </td>
196          <td>
197            10.5
198          </td>
199        </tr>
200        <tr>
201          <td>
202            Safari | Chrome | WebKit
203          </td>
204          <td>
205            3.0 | 1.0 | 522
206          </td>
207          <td>
208            <code>-webkit-box-shadow</code>
209          </td>
210          <td>
211            4.0 | 1.0 | 528
212          </td>
213          <td>
214            5.0 | 4.0 | 533
215          </td>
216          <td>
217            5.0 | 4.0 | 533
218          </td>
219        </tr>
220      </tbody>
221    </table>
222    <h3>
223      Specifications
224    </h3>
225    <ul>
226      <li>
227        <a class="external" href="http://www.w3.org/TR/css3-backg
 >round/#the-box-shadow" title="http://www.w3.org/TR/css3-backgroun
 >d/#the-box-shadow">CSS 3 Backgrounds and Borders</a> Last call wo
 >rking draft
228      </li>
229    </ul>
230    <p>
231      {{ languages( { "de": "de/CSS/box-shadow",&nbsp; "fr": "fr/
 >CSS/box-shadow" } ) }}

Back to History