[css-borders-4] Defined box-shadow-* as coordinating list property group (w3c#9186)

Author: SebastianZ

css-borders-4/Overview.bs

@@ -773,6 +773,37 @@ Animation type: see individual properties
   <pre class=prod>
   <dfn><<spread-shadow>></dfn> = <<'box-shadow-color'>>? &amp;&amp; [ <<'box-shadow-offset'>> [ <<'box-shadow-blur'>> <<'box-shadow-spread'>>? ]? ] &amp;&amp; <<'box-shadow-position'>>?</pre>
 
+<h3 id="shadow-layers">
+Layering, Layout, and Other Details</h4>
+
+  Drop shadows are declared in the [=coordinated value list=]
+  constructed from the 'box-shadow-*' properties,
+  which form a [=coordinating list property group=]
+  with 'box-shadow-offset' as the [=coordinating list base property=].
+  See [[css-values-4#linked-properties]].
+
+  <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 (or be overlapped by)
+  other boxes and text or their shadows.
+  In terms of stacking contexts and the painting order,
+  the <i>outer box-shadows</i> of an element are drawn immediately below the background of that element,
+  and the <i>inner shadows</i> of 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.
+
+  <p>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
+  that 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 id="changes">
 Changes</h2>