E77F csswg-drafts/css3-background/box-shadow.src.html at 39237abd64ef7e52c50ba078aea11503f8ca2bce · w3c/csswg-drafts · GitHub
Skip to content

box-shadow.src.html

Latest commit

 

History

History
313 lines (268 loc) · 11.3 KB

box-shadow.src.html

File metadata and controls

313 lines (268 loc) · 11.3 KB
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html lang="en">
<head>
<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="http://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="http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]</a></dd> -->
<a href="http://dev.w3.org/csswg/css3-background/box-shadow">http://dev.w3.org/csswg/css3-background/box-shadow</a>
<dt>Latest version:
<dd><a
href="http://www.w3.org/TR/css3-background">[LATEST]</a>
<dt>Previous versions:
<dd><a
href="http://www.w3.org/TR/2005/WD-css3-background-20050216">http://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>
< A6BA 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:
-->