Shift spread an blur definitions to below the list, to make the spec easier to understand for authors and to make the shape definitions flow in chronological order. Also attempted to make prose clearer, and added explicit text for degenerate shadows.

Author: fantasai

css3-background/Overview.html

@@ -22,12 +22,12 @@
 
    <h1>CSS Backgrounds and Borders Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 May 2010</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 June 2010</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!--<a href="http://www.w3.org/TR/2010/WD-css3-background-20100505">http://www.w3.org/TR/2010/ED-css3-background-20100505</a>-->
+    <dd><!--<a href="http://www.w3.org/TR/2010/WD-css3-background-20100603">http://www.w3.org/TR/2010/ED-css3-background-20100603</a>-->
      <a
      href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>
 
@@ -3704,27 +3704,15 @@ <h3 id=the-box-shadow><span class=secno>6.2. </span>The &lsquo;<a
    <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.
-    The blur radius is perpendicular to and centered on the shadow's edge and
-    defines a gradient color transition ranging from the full shadow color at
-    the radius endpoint inside the shadow to fully transparent at the
-    endpoint outside it: if the blur radius is 0, the shadow's edge is sharp,
-    otherwise the larger the value, the more the shadow is blurred. The exact
-    algorithm for the blur transition is not specified.
+   <li>The third length is a blur radius. Negative values are not allowed. If
+    the blur radius is zero, the shadow's edge is sharp. Otherwise, the
+    larger the value, the more the shadow's edge is blurred. See below.
 
    <li>The fourth length is a spread radius. Positive values cause the shadow
     shape to expand in all directions by the specified radius. Negative
-    values cause the shadow shape to contract. For corners with a zero
-    border-radius, the corner remains sharp. Otherwise the spread radius
-    outsets the edge of the shadow by the amount of the spread radius in the
-    direction perpendicular to the shadow's edge. <span class=note>Note that
-    for inner shadows, expanding the shadow means shrinking the shadow's
-    perimeter.</span> The UA may approximate the spread shape by outsetting
-    (insetting, for inner shadows) the shadow's straight edges by the spread
-    radius and increasing (decreasing, for inner shadows) and flooring at
-    zero the corner radii by the same amount. If both a blur radius and a
-    spread radius are defined, the blur is applied to the resulting shape
-    after the spread is applied.
+    values cause the shadow shape to contract. See below. <span
+    class=note>Note that for inner shadows, expanding the shadow (creating
+    more shadow area) means contracting the shadow's perimeter shape.</span>
 
    <li>The color is the color of the shadow.
 
@@ -3745,15 +3733,35 @@ <h3 id=the-box-shadow><span class=secno>6.2. </span>The &lsquo;<a
 
   <p>If the box has a nonzero <span class=property>&lsquo;<a
    href="#border-radius"><code
-   class=property>border-radius</code></a>&rsquo;</span>, the shadow is
+   class=property>border-radius</code></a>&rsquo;</span>, the shadow shape is
    rounded in the same way. The &lsquo;<a href="#border-image"><code
    class=property>border-image</code></a>&rsquo; does not affect the shape of
    the box-shadow.
 
-  <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 &lsquo;<a
-   href="#box-decoration-break"><code
-   class=property>box-decoration-break</code></a>&rsquo;.
+  <p>If a spread radius is defined, it increases the size of the shadow in
+   the direction normal to the shadow's edge by the specified amount.
+   However, for corners with a zero border-radius, the corner remains sharp,
+   i.e. the operation is equivalent to scaling the border-box. The UA may
+   approximate the transformed shadow perimeter shape by outsetting
+   (insetting, for inner shadows) the shadow's straight edges by the spread
+   radius and increasing (decreasing, for inner shadows) and flooring at zero
+   the corner radii by the same amount. In either case, the effective width
+   and height of the shadow shape is floored at zero. (A zero-sized shadow
+   shape would cause an outer shadow to disappear, and an inner shadow to
+   cover the entire padding-box.)
+
+  <p>The blur radius is perpendicular to and centered on the shadow's edge
+   and defines a gradient color transition ranging from the full shadow color
+   at the radius endpoint inside the shadow to fully transparent at the
+   endpoint outside it. The exact algorithm for the blur transition is not
+   specified.
+
+  <div class=example>
+   <p>The example below demonstrates the effects of the spread and blur radii
+    on the shadow:</p>
+
+   <p class=figure> <img src=spread-blur.png></p>
+  </div>
 
   <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
@@ -3763,6 +3771,11 @@ <h3 id=the-box-shadow><span class=secno>6.2. </span>The &lsquo;<a
    are drawn immediately above the background of that element (below the
    borders and border image, if any).
 
+  <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 &lsquo;<a
+   href="#box-decoration-break"><code
+   class=property>box-decoration-break</code></a>&rsquo;.
+
   <p>Shadows do not trigger scrolling or increase the size of the scrollable
    area.
 

css3-background/Overview.src.html

@@ -2681,30 +2681,17 @@ <h3 id="the-box-shadow">The 'box-shadow' property</h3>
   offsets the shadow down, a negative one up.
 
   <li>The third length is a blur radius. Negative values are not
-  allowed. The blur radius is perpendicular to and centered on the
-  shadow's edge and defines a gradient color transition ranging from
-  the full shadow color at the radius endpoint inside the shadow to
-  fully transparent at the endpoint outside it: if the blur radius
-  is 0, the shadow's edge is sharp, otherwise the larger the value,
-  the more the shadow is blurred. The exact algorithm for the blur
-  transition is not specified.
+  allowed. If the blur radius is zero, the shadow's edge is sharp.
+  Otherwise, the larger the value, the more the shadow's edge is
+  blurred. See below.
 
   <li>The fourth length is a spread radius. Positive values cause
   the shadow shape to expand in all directions by the specified
-  radius. Negative values cause the shadow shape to contract. For
-  corners with a zero border-radius, the corner remains sharp.
-  Otherwise the spread radius outsets the edge of the shadow by
-  the amount of the spread radius in the direction perpendicular
-  to the shadow's edge.
+  radius. Negative values cause the shadow shape to contract.
+  See below.
   <span class="note">Note that for inner shadows, expanding the
-  shadow means shrinking the shadow's perimeter.</span>
-  The UA may approximate the spread shape by outsetting (insetting,
-  for inner shadows) the shadow's straight edges by the spread
-  radius and increasing (decreasing, for inner shadows) and
-  flooring at zero the corner radii by the same amount.
-
-  If both a blur radius and a spread radius are defined, the blur
-  is applied to the resulting shape after the spread is applied.
+  shadow (creating more shadow area) means contracting the shadow's
+  perimeter shape.</span>
 
   <li>The color is the color of the shadow.
 
@@ -2724,12 +2711,34 @@ <h3 id="the-box-shadow">The 'box-shadow' property</h3>
 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. The 'border-image' does not affect
-the shape of the box-shadow.
+the shadow shape is rounded in the same way. The 'border-image' does not
+affect the shape of the box-shadow.
+
+<p>If a spread radius is defined, it increases the size of the shadow
+in the direction normal to the shadow's edge by the specified amount.
+However, for corners with a zero border-radius, the corner remains
+sharp, i.e. the operation is equivalent to scaling the border-box.
+The UA may approximate the transformed shadow perimeter shape by
+outsetting (insetting, for inner shadows) the shadow's straight edges
+by the spread radius and increasing (decreasing, for inner shadows)
+and flooring at zero the corner radii by the same amount. In either
+case, the effective width and height of the shadow shape is floored
+at zero. (A zero-sized shadow shape would cause an outer shadow to
+disappear, and an inner shadow to cover the entire padding-box.)
+
+<p>The blur radius is perpendicular to and centered on the shadow's
+edge and defines a gradient color transition ranging from the full
+shadow color at the radius endpoint inside the shadow to
+fully transparent at the endpoint outside it. The exact algorithm
+for the blur transition is not specified.
 
-<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-decoration-break'.
+<div class="example">
+<p>The example below demonstrates the effects of the spread and
+blur radii on the shadow:</p>
+<p class="figure">
+  <img src="spread-blur.png">
+</p>
+</div>
 
 <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
@@ -2739,6 +2748,10 @@ <h3 id="the-box-shadow">The 'box-shadow' property</h3>
 an element are drawn immediately above the background of that element
 (below the borders and border image, if any).
 
+<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-decoration-break'.
+
 <p>Shadows do not trigger scrolling or increase the size of the scrollable
 area.