Add Brad Kemper's examples http://bradclicks.com/cssplay/shadows/shadows.html that he created for inclusion in the spec

Author: fantasai

css3-background/Overview.html

@@ -8,6 +8,7 @@
   <style type="text/css">
     .rhs { white-space: pre-wrap; }
     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-WD.css">
@@ -2464,20 +2465,98 @@ <h3 id="the-box-shadow">The 'box-shadow' property</h3>
 (below the borders and border-image, if any).
 
 <div class="example">
-<p>Here is an example of single words with a drop shadow. Assume the
-words were enclosed in <span class="html">&lt;span&gt;</span> and the
-style rule was
-
-<pre>span {border: thin solid; box-shadow: 0.2em 0.2em #CCC}</pre>
-
-<p>The result might look like this:
-
-<div class=figure>
-  <p><img alt="He will be put on b_r_e_a_d_| and w_a_t_e_r_|"
-  src="box-shadow.png">
-</div>
-</div>
-
+<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
+<!-- -->  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
+<!-- -->  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>
 
 
 <h2>Definitions</h2>
@@ -2684,7 +2763,8 @@ <h2>Acknowledgments</h2>
 image(s) cannot be loaded.
 
 <p>Finally, special thanks go to Brad Kemper for his feedback and
-suggestions for many of the features in the draft.</p>
+suggestions for many of the features in the draft, and for drawing
+all the box-shadow examples.</p>
 
 <!--
 <p class=issue>Editor's Note: This list needs to be updated (or

css3-background/Overview.src.html

@@ -452,6 +452,10 @@ table.features td {
       border: solid;
     }
 
+    .data img {
+      vertical-align: middle;
+    }
+
     table.propdef {
       table-layout: auto;
     }