Skip to content

Commit 30444ba

Browse files
fantasaifantasai
committed
Add box-shadow definition into a separate file so that we can work on it
1 parent 95ff9f3 commit 30444ba

1 file changed

Lines changed: 309 additions & 0 deletions

File tree

‎css3-background/box-shadow.src.html‎

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
2+
'http://www.w3.org/TR/html4/strict.dtd'>
3+
4+
<html lang="en">
5+
<head>
6+
<title>CSS Backgrounds and Borders Module Level 3: The box-shadow Chapter</title>
7+
<link rel="stylesheet" type="text/css" href="default.css">
8+
<style type="text/css">
9+
.prod { font-family: inherit; font-size: inherit }
10+
pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
11+
code { font-size: inherit; }
12+
#box-shadow-samples td { background: white; color: black; }
13+
</style>
14+
<link rel="stylesheet" type="text/css"
15+
href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
16+
</head>
17+
18+
<body>
19+
20+
<div class="head">
21+
<!--logo-->
22+
23+
<h1>CSS Backgrounds and Borders Module Level 3: Box Shadow Chapter</h1>
24+
25+
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
26+
<dl>
27+
<dt>This version:
28+
<dd><!-- <a href="http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]</a></dd> -->
29+
<a href="http://dev.w3.org/csswg/css3-background/box-shadow">http://dev.w3.org/csswg/css3-background/box-shadow</a>
30+
<dt>Latest version:
31+
<dd><a
32+
href="http://www.w3.org/TR/css3-background">[LATEST]</a>
33+
<dt>Previous versions:
34+
<dd><a
35+
href="http://www.w3.org/TR/2005/WD-css3-background-20050216">http://www.w3.org/TR/2005/WD-css3-background-20050216</a>
36+
<dt id="editors-list">Editors:
37+
<dd><a href="mailto:bert@w3.org">Bert Bos</a> (<a
38+
href="http://www.w3.org/">W3C</a>)
39+
<dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Invited Expert)
40+
<dd>Brad Kemper (Invited Expert)
41+
</dl>
42+
43+
<!--copyright-->
44+
45+
<hr title="Separator for header">
46+
</div>
47+
48+
49+
50+
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
51+
<p>This document contains the definition of the 'box-shadow'
52+
property, which has been removed from the CSS3 Backgrounds and
53+
Borders Module until stabilized.</p>
54+
55+
<h2 class="no-num no-toc" id="status">Status of this document</h2>
56+
<!--status-->
57+
58+
<h3 id="the-box-shadow">The 'box-shadow' property</h3>
59+
60+
<table class=propdef>
61+
<tr>
62+
<th>Name:
63+
<td><dfn>box-shadow</dfn>
64+
<tr>
65+
<th>Value:
66+
<td>none | <var>&lt;shadow&gt;</var> [ , <var>&lt;shadow&gt;</var> ]*
67+
<tr>
68+
<th>Initial:
69+
<td>none
70+
<tr>
71+
<th>Applies to:
72+
<td>all elements
73+
<tr>
74+
<th>Inherited:
75+
<td>no
76+
<tr>
77+
<th>Percentages:
78+
<td>N/A
79+
<tr>
80+
<th>Media:
81+
<td>visual
82+
<tr>
83+
<th>Computed value:
84+
<td>any &lt;length&gt; made absolute; any color computed; otherwise as specified
85+
</table>
86+
87+
<p>The 'box-shadow' property attaches one or more drop-shadows
88+
to the box. The property is a comma-separated list of shadows, each specified
89+
by 2-4 length values, an optional color, and an optional ''inset''
90+
keyword. Omitted lengths are 0, omitted colors are a UA-chosen color.
91+
92+
<p>Where
93+
<pre class=prod>
94+
<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>
95+
<p>The components of each <var>&lt;shadow&gt;</var> are interpreted as follows:
96+
97+
<ul>
98+
<li>The first length is the horizontal offset of the shadow. A
99+
positive value draws a shadow that is offset to the right of the
100+
box, a negative length to the left.
101+
102+
<li>The second length is the vertical offset. A positive value
103+
offsets the shadow down, a negative one up.
104+
105+
<li>The third length is a blur radius. Negative values are not
106+
allowed. If it is 0, the shadow is sharp, otherwise the larger the
107+
value, the more the shadow is blurred. The exact algorithm is not
108+
specified.
109+
110+
<li>The fourth length is a spread radius. Positive values cause
111+
the shadow to grow in all directions by the specified radius.
112+
Negative values cause the shadow to shrink. The shadow should not
113+
change shape when a spread radius is applied: sharp corners should
114+
remain sharp.
115+
116+
<li>The color is the color of the shadow.
117+
118+
<li>The ''inset'' keyword, if present, changes the drop
119+
shadow from an outer shadow (one that shadows the box onto the
120+
canvas, as if it were lifted above the canvas) to an inner shadow
121+
(one that shadows the canvas onto the box, as if the box were cut
122+
out of the canvas and shifted behind it).
123+
</ul>
124+
125+
<p>An outer box-shadow casts a shadow as if the border-box of the element
126+
were opaque. The shadow is drawn outside the border edge only: it is
127+
not drawn inside the border-box of the element.
128+
129+
<p>An inner box-shadow casts a shadow as if everything outside the padding
130+
edge were opaque. The inner shadow is drawn inside the padding edge only:
131+
it is not drawn outside the padding box of the element.
132+
133+
<p>If the box has a nonzero <span class="property">'border-radius'</span>,
134+
the shadow is rounded in the same way.
135+
136+
<div class="issue">
137+
138+
<p><strong>This is still <a href="http://lists.w3.org/Archives/Public/www-style/2009Jul/0120.html">under discussion</a>.
139+
Please send comments to www-style.</strong></p>
140+
141+
<p>However, if the box has a border-image, the shadows drawn differently:
142+
they are masked by the border-image instead of the border area as follows.
143+
144+
<ul>
145+
<li>For an outer shadow, the shadow is created by assuming that the
146+
padding box is opaque, and then combining that with the border-image
147+
to create an alpha-channel mask for the shadow. Spread values are
148+
interpreted as increasing the size of the padding box and causing
149+
the border-image mask to be resized accordingly.
150+
The resulting shadow is only drawn outside the boundaries of the padding
151+
box.
152+
<li>For an inner shadow, the shadow is created by assuming that everything
153+
outside the border box is opaque, and then combining that with the
154+
border-image to create an alpha-channel mask for the shadow. Spread values
155+
are interpreted as decreasing the size of the border box and causing
156+
the border-image mask to be resized accordingly.
157+
The resulting shadow is only drawn inside the boundaries of the border box.
158+
</ul>
159+
<p>If the UA is unable to create shadows that respect the transparent
160+
and partially-transparent aspects of the border-image, it must not create
161+
a shadow at all. The UA <em>may</em> ignore spread values when drawing
162+
shadows for a border-image.</p>
163+
</div>
164+
165+
<p>If an element has multiple boxes, all of them get drop shadows, but
166+
shadows are only drawn where borders would also be drawn, see 'box-break'.
167+
168+
<p>The shadow effects are applied front-to-back: the first shadow is
169+
on top and the others are layered behind. Shadows do not influence
170+
layout and may overlap other boxes or their shadows. In terms of stacking
171+
contexts and the painting order, the outer shadows of an element are drawn
172+
immediately below the background of that element, and the inner shadows of
173+
an element are drawn immediately above the background of that element
174+
(below the borders and border image, if any).
175+
176+
<p>Shadows never affect layout, and do not trigger scrolling or increase
177+
the size of the scrollable area.
178+
179+
<div class="example">
180+
<p>Below are some examples of an orange box with a blue border being
181+
being given a drop shadow.</p>
182+
183+
<table class="data" id="box-shadow-samples">
184+
<tr>
185+
<th scope="rowgroup">
186+
<pre><code><!--
187+
-->border:5px solid blue;
188+
<!-- -->background-color:orange;
189+
<!-- -->width: 144px;
190+
<!-- -->height: 144px;<!--
191+
--></code></pre>
192+
<th>
193+
<pre><code>border-radius: 20px;</code></pre>
194+
<th>
195+
<pre><code>border-radius: 0;</code></pre>
196+
<tr>
197+
<th>
198+
<pre><code><!--
199+
-->box-shadow:
200+
<!-- --> rgba(0,0,0,0.4)
201+
<!-- --> 10px 10px;<!--
202+
--></code></pre>
203+
<td>
204+
<img src="shadow-outer-round.png" width="175" height="175"
205+
alt="A round-cornered box with a light gray shadow the same shape
206+
as the border box offset 10px to the right and 10px down
207+
from directly underneath the box.">
208+
<td>
209+
<img src="shadow-outer-square.png" width="175" height="175"
210+
alt="A square-cornered box with a light gray shadow the same shape
211+
as the border box offset 10px to the right and 10px down
212+
from directly underneath the box.">
213+
<tr>
214+
<th>
215+
<pre><code><!--
216+
-->box-shadow:
217+
<!-- --> rgba(0,0,0,0.4)
218+
<!-- --> 10px 10px
219+
<!-- --> inset<!--
220+
--></code></pre>
221+
<td>
222+
<img src="shadow-inner-round.png" width="175" height="175"
223+
alt="A round-cornered box with a light gray shadow the inverse shape
224+
of the padding box filling 10px in from the top and left edges
225+
(just inside the border).">
226+
<td>
227+
<img src="shadow-inner-square.png" width="175" height="175"
228+
alt="A square-cornered box with a light gray shadow the inverse shape
229+
of the padding box filling 10px in from the top and left edges
230+
(just inside the border).">
231+
<tr>
232+
<th>
233+
<pre><code><!--
234+
-->box-shadow:
235+
<!-- --> rgba(0,0,0,0.4)
236+
<!-- --> 10px 10px 0
237+
<!-- --> 10px /* spread */<!--
238+
--></code></pre>
239+
<td>
240+
<img src="shadow-outer-spread-round.png" width="175" height="175"
241+
alt="A round-cornered box with a light gray shadow the same shape
242+
as the box but 20px taller and wider and offset so that the
243+
top and left edges of the shadow are directly underneath the
244+
top and left edges of the box.">
245+
<td>
246+
<img src="shadow-outer-spread-square.png" width="175" height="175"
247+
alt="A square-cornered box with a light gray shadow the same shape
248+
as the box but 20px taller and wider and offset so that the
249+
top and left edges of the shadow are directly underneath the
250+
top and left edges of the box.">
251+
<tr>
252+
<th>
253+
<pre><code><!--
254+
-->box-shadow:
255+
<!-- --> rgba(0,0,0,0.4)
256+
<!-- --> 10px 10px 0
257+
<!-- --> 10px /* spread */
258+
<!-- --> inset<!--
259+
--></code></pre>
260+
<td>
261+
<img src="shadow-inner-spread-round.png" width="175" height="175"
262+
alt="A round-cornered box with a light gray shadow the inverse shape
263+
of the box but 20px narrower and shorter filling 20px in from
264+
the top and left edges (just inside the border).">
265+
<td>
266+
<img src="shadow-inner-spread-square.png" width="175" height="175"
267+
alt="A round-cornered box with a light gray shadow the inverse shape
268+
of the box but 20px narrower and shorter filling 20px in from
269+
the top and left edges (just inside the border).">
270+
</tr>
271+
</table>
272+
</div>
273+
274+
<p>The ''box-shadow'' property applies to the ''::first-letter'' pseudo-element,
275+
but not the ''::first-line'' pseudo-element. Outer shadows have no effect on
276+
internal table elements in the collapsing border model. If a shadow is defined
277+
for single border edge in the collapsing border model has multiple border
278+
thicknesses (e.g. an outer shadow on a table where one row has thicker borders
279+
than the others, or an inner shadow on a rowspanning table cell that adjoins
280+
cells with different border thicknesses), the exact position and rendering of
281+
its shadows are undefined.
282+
283+
<h2>References</h2>
284+
285+
<h3 class="no-num">Normative references</h3>
286+
<!--normative-->
287+
288+
<h3 class="no-num">Other references</h3>
289+
<!--informative-->
290+
291+
292+
293+
<h2 class="no-num">Property index</h2>
294+
<!-- properties -->
295+
296+
297+
298+
<h2 class="no-num" id="index">Index</h2>
299+
<!--index-->
300+
301+
</body>
302+
</html>
303+
<!-- Keep this comment at the end of the file
304+
Local variables:
305+
mode: sgml
306+
sgml-default-doctype-name:"html"
307+
sgml-minimize-attributes:t
308+
End:
309+
-->

0 commit comments

Comments
 (0)