csswg-drafts/css-backgrounds-3/box-shadow.src.html at f885ef0ae5aae797794c1ca279ef1a9e4d35b00e · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
1
F440
71
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
  'http://www.w3.org/TR/html4/strict.dtd'>

<html lang="en">
<head>
  <meta charset=utf8>
  <title>CSS Backgrounds and Borders Module Level 3: The box-shadow Chapter</title>
  <link rel="stylesheet" type="text/css" href="default.css">
  <style type="text/css">
    .prod { font-family: inherit; font-size: inherit }
    pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
    code { font-size: inherit; }
    #box-shadow-samples td { background: white; color: black; }
  </style>
  <link rel="stylesheet" type="text/css"
  href="https://www.w3.org/StyleSheets/TR/W3C-ED.css">
</head>

<body>

<div class="head">
<!--logo-->

<h1>CSS Backgrounds and Borders Module Level 3: Box Shadow Chapter</h1>

<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
  <dt>This version:
    <dd><!-- <a href="https://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]">https://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]</a></dd> -->
    <a href="https://drafts.csswg.org/css3-background/box-shadow">https://drafts.csswg.org/css3-background/box-shadow</a>
  <dt>Latest version:
    <dd><a
      href="https://www.w3.org/TR/css3-background">[LATEST]</a>
  <dt>Previous versions:
    <dd><a
      href="https://www.w3.org/TR/2005/WD-css3-background-20050216">https://www.w3.org/TR/2005/WD-css3-background-20050216</a>
  <dt id="editors-list">Editors:
    <dd><a href="mailto:bert@w3.org">Bert Bos</a> (<a
      href="http://www.w3.org/">W3C</a>)
    <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Invited Expert)
    <dd>Brad Kemper (Invited Expert)
</dl>

<!--copyright-->

<hr title="Separator for header">
</div>


<h2 class="no-num no-toc" id="abstract">Abstract</h2>
<p>This document contains the definition of the 'box-shadow'
property, which has been removed from the CSS3 Backgrounds and
Borders Module until stabilized.</p>

<h2 class="no-num no-toc" id="status">Status of this document</h2>

<p>This is a scrappy bit of an Editor'd Draft, is totally unstable,
and has no official status whatsoever. Treat it as you would a
post-it note on the editors' desk.</p>
<!--status-->

<h3 id="the-box-shadow">The 'box-shadow' property</h3>

<table class=propdef>
  <tr>
    <th>Name:
    <td><dfn>box-shadow</dfn>
  <tr>
    <th>Value:
    <td>none | <var>&lt;shadow&gt;</var> [ , <var>&lt;shadow&gt;</var> ]*
  <tr>
    <th>Initial:
    <td>none
  <tr>
    <th>Applies to:
    <td>all elements
  <tr>
    <th>Inherited:
    <td>no
  <tr>
    <th>Percentages:
    <td>N/A
  <tr>
    <th>Media:
    <td>visual
  <tr>
    <th>Computed value:
    <td>any &lt;length&gt; made absolute; any color computed; otherwise as specified
</table>

<p>The 'box-shadow' property attaches one or more drop-shadows
to the box. The property is a comma-separated list of shadows, each specified
by 2-4 length values, an optional color, and an optional ''inset''
keyword. Omitted lengths are 0, omitted colors are a UA-chosen color.

<p>Where
<pre class=prod>
<dfn><var>&lt;shadow&gt;</var></dfn> = inset? &amp;&amp; [ <var>&lt;length&gt;</var>{2,4} &amp;&amp; <var>&lt;color&gt;</var>? ]</pre>
<p>The components of each <var>&lt;shadow&gt;</var> are interpreted as follows:

<ul>
  <li>The first length is the horizontal offset of the shadow. A
  positive value draws a shadow that is offset to the right of the
  box, a negative length to the left.

  <li>The second length is the vertical offset. A positive value
  offsets the shadow down, a negative one up.

  <li>The third length is a blur radius. Negative values are not
  allowed. If it is 0, the shadow is sharp, otherwise the larger the
  value, the more the shadow is blurred. The exact algorithm is not
  specified.

  <li>The fourth length is a spread radius. Positive values cause
  the shadow to grow in all directions by the specified radius.
  Negative values cause the shadow to shrink. The shadow should not
  change shape when a spread radius is applied: sharp corners should
  remain sharp.

  <li>The color is the color of the shadow.

  <li>The ''inset'' keyword, if present, changes the drop
  shadow from an outer shadow (one that shadows the box onto the
  canvas, as if it were lifted above the canvas) to an inner shadow
  (one that shadows the canvas onto the box, as if the box were cut
  out of the canvas and shifted behind it).
</ul>

<p>An outer box-shadow casts a shadow as if the border-box of the element
were opaque. The shadow is drawn outside the border edge only: it is
not drawn inside the border-box of the element.

<p>An inner box-shadow casts a shadow as if everything outside the padding
edge were opaque. The inner shadow is drawn inside the padding edge only:
it is not drawn outside the padding box of the element.

<p>If the box has a nonzero <span class="property">'border-radius'</span>,
the shadow is rounded in the same way.

<div class="issue">

<p><strong>This is still <a href="http://lists.w3.org/Archives/Public/www-style/2009Jul/0120.html">under discussion</a>.
Please send comments to www-style.</strong></p>

<p>However, if the box has a border-image, the shadows drawn differently:
they are masked by the border-image instead of the border area as follows.

<ul>
  <li>For an outer shadow, the shadow is created by assuming that the
    padding box is opaque, and then combining that with the border-image
    to create an alpha-channel mask for the shadow. Spread values are
    interpreted as increasing the size of the padding box and causing
    the border-image mask to be resized accordingly.
    The resulting shadow is only drawn outside the boundaries of the padding
    box.
  <li>For an inner shadow, the shadow is created by assuming that everything
    outside the border box is opaque, and then combining that with the
    border-image to create an alpha-channel mask for the shadow. Spread values
    are interpreted as decreasing the size of the border box and causing
    the border-image mask to be resized accordingly.
    The resulting shadow is only drawn inside the boundaries of the border box.
</ul>
<p>If the UA is unable to create shadows that respect the transparent
and partially-transparent aspects of the border-image, it must not create
a shadow at all. The UA <em>may</em> ignore spread values when drawing
shadows for a border-image.</p>
</div>

<p>If an element has multiple boxes, all of them get drop shadows, but
shadows are only drawn where borders would also be drawn, see 'box-break'.

<p>The shadow effects are applied front-to-back: the first shadow is
on top and the others are layered behind. Shadows do not influence
layout and may overlap other boxes or their shadows. In terms of stacking
contexts and the painting order, the outer shadows of an element are drawn
immediately below the background of that element, and the inner shadows of
an element are drawn immediately above the background of that element
(below the borders and border image, if any).

<p>Shadows never affect layout, and do not trigger scrolling or increase
  the size of the scrollable area.

<div class="example">
<p>Below are some examples of an orange box with a blue border being
  being given a drop shadow.</p>

<table class="data" id="box-shadow-samples">
  <tr>
    <th scope="rowgroup">
      <pre><code><!--
     -->border:5px solid blue;
<!-- -->background-color:orange;
<!-- -->width: 144px;
<!-- -->height: 144px;<!--
   --></code></pre>
    <th>
      <pre><code>border-radius: 20px;</code></pre>
    <th>
      <pre><code>border-radius: 0;</code></pre>
  <tr>
    <th>
      <pre><code><!--
     -->box-shadow:
<!-- -->  rgba(0,0,0,0.4)
<!-- -->  10px 10px;<!--
   --></code></pre>
    <td>
      <img src="shadow-outer-round.png" width="175" height="175"
           alt="A round-cornered box with a light gray shadow the same shape
                as the border box offset 10px to the right and 10px down
                from directly underneath the box.">
    <td>
      <img src="shadow-outer-square.png" width="175" height="175"
           alt="A square-cornered box with a light gray shadow the same shape
                as the border box offset 10px to the right and 10px down
                from directly underneath the box.">
  <tr>
    <th>
      <pre><code><!--
     -->box-shadow:
<!-- -->  rgba(0,0,0,0.4)
<!-- -->  10px 10px
<!-- -->  inset<!--
   --></code></pre>
    <td>
      <img src="shadow-inner-round.png" width="175" height="175"
           alt="A round-cornered box with a light gray shadow the inverse shape
                of the padding box filling 10px in from the top and left edges
                (just inside the border).">
    <td>
      <img src="shadow-inner-square.png" width="175" height="175"
           alt="A square-cornered box with a light gray shadow the inverse shape
                of the padding box filling 10px in from the top and left edges
                (just inside the border).">
  <tr>
    <th>
      <pre><code><!--
     -->box-shadow:
<!-- -->  rgba(0,0,0,0.4)
<!-- -->  10px 10px 0
<!-- -->  10px /* spread */<!--
   --></code></pre>
    <td>
      <img src="shadow-outer-spread-round.png" width="175" height="175"
           alt="A round-cornered box with a light gray shadow the same shape
                as the box but 20px taller and wider and offset so that the
                top and left edges of the shadow are directly underneath the
                top and left edges of the box.">
    <td>
      <img src="shadow-outer-spread-square.png" width="175" height="175"
           alt="A square-cornered box with a light gray shadow the same shape
                as the box but 20px taller and wider and offset so that the
                top and left edges of the shadow are directly underneath the
                top and left edges of the box.">
  <tr>
    <th>
      <pre><code><!--
     -->box-shadow:
<!-- -->  rgba(0,0,0,0.4)
<!-- -->  10px 10px 0
<!-- -->  10px /* spread */
<!-- -->  inset<!--
   --></code></pre>
    <td>
      <img src="shadow-inner-spread-round.png" width="175" height="175"
           alt="A round-cornered box with a light gray shadow the inverse shape
                of the box but 20px narrower and shorter filling 20px in from
                the top and left edges (just inside the border).">
    <td>
      <img src="shadow-inner-spread-square.png" width="175" height="175"
           alt="A round-cornered box with a light gray shadow the inverse shape
                of the box but 20px narrower and shorter filling 20px in from
                the top and left edges (just inside the border).">
  </tr>
</table>
</div>

<p>The ''box-shadow'' property applies to the ''::first-letter'' pseudo-element,
but not the ''::first-line'' pseudo-element. Outer shadows have no effect on
internal table elements in the collapsing border model. If a shadow is defined
for single border edge in the collapsing border model has multiple border
thicknesses (e.g. an outer shadow on a table where one row has thicker borders
than the others, or an inner shadow on a rowspanning table cell that adjoins
cells with different border thicknesses), the exact position and rendering of
its shadows are undefined.

<h2>References</h2>

<h3 class="no-num">Normative references</h3>
<!--normative-->

<h3 class="no-num">Other references</h3>
<!--informative-->


<h2 class="no-num">Property index</h2>
<!-- properties -->


<h2 class="no-num" id="index">Index</h2>
<!--index-->

</body>
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
End:
-->