@@ -2932,11 +2932,13 @@ Shadow Shape, Spread, and Knockout</h4>
2932
2932
2933
2933
<p> To preserve the box's shape when spread is applied,
2934
2934
the corner radii of the shadow are also increased (decreased, for inner shadows)
2935
- from the border-box radii by adding the <i> spread distance</i> (and flooring at zero).
2935
+ from the border-box radii by adding (subtracting)
2936
+ the <i> spread distance</i> (and flooring at zero).
2936
2937
However, in order to create a sharper corner when the border radius is small
2937
2938
(and thus ensure continuity between round and sharp corners),
2938
2939
when the <i> border radius</i> is less than the <i> spread distance</i> ,
2939
- the <i> spread distance</i> is multiplied by the proportion 1 + (<var> r</var> -1)<sup> 3</sup> ,
2940
+ the <i> spread distance</i> of an outer shadow
2941
+ is multiplied by the proportion 1 + (<var> r</var> -1)<sup> 3</sup> ,
2940
2942
where <var> r</var> is the ratio of the border radius to the <i> spread distance</i> ,
2941
2943
in calculating the corner radii of the spread shadow shape.
2942
2944
For example, if the border radius is 10px and the <i> spread distance</i> is 20px (<var> r</var> = .5),
@@ -3062,11 +3064,29 @@ Changes</h2>
3062
3064
Changes since the 17 October 2017 Candidate Recommendation</h3>
3063
3065
3064
3066
<ul>
3065
- <li> Inverted order of <<shadow>> grammar to match browser serialization and 'text-shadow' /''drop-shadow()'' .
3067
+ <li>
3068
+ Inverted order of <<shadow>> grammar to match browser serialization and 'text-shadow' /''drop-shadow()'' .
3066
3069
(<a href="https://github.com/w3c/csswg-drafts/issues/2305">Issue 2305</a> )
3067
3070
<blockquote>
3068
3071
<pre> <<shadow>> = <del> inset</del><ins> <<color>> </ins> ? && <<length>> {2,4} && <del> <<color>> </del><ins> inset</ins> ?</pre>
3069
3072
</blockquote>
3073
+ <li>
3074
+ Spread radius adjustment is only applied to outer shadows (and positive margins)--
3075
+ i.e. cases where the radius of curvature grows, rather than shrinks.
3076
+ (<a href="https://github.com/w3c/csswg-drafts/issues/1900">Issue 1900</a> )
3077
+ <blockquote>
3078
+ <p> To preserve the box's shape when spread is applied,
3079
+ the corner radii of the shadow are also increased (decreased, for inner shadows)
3080
+ from the border-box radii by adding (subtracting)
3081
+ the <i> spread distance</i> (and flooring at zero).
3082
+ However, in order to create a sharper corner when the border radius is small
3083
+ <ins> (and thus ensure continuity between round and sharp corners)</ins> ,
3084
+ when the <i> border radius</i> is less than the <i> spread distance</i> ,
3085
+ the <i> spread distance</i> <ins> of an outer shadow</ins>
3086
+ is multiplied by the proportion 1 + (<var> r</var> -1)<sup> 3</sup> ,
3087
+ where <var> r</var> is the ratio of the border radius to the <i> spread distance</i> ,
3088
+ in calculating the corner radii of the spread shadow shape.
3089
+ </blockquote>
3070
3090
</ul>
3071
3091
3072
3092
<h3 id="changes-2014-09">
0 commit comments