Skip to content

Commit c9cab7a

Browse files
committed
[css-backgrounds-3] Only apply 0 < 1 radius-to-spread ratio adjustment for outset shadows; inset shadows don't need it because their radii shrink rather than grow. #1900
1 parent f885ef0 commit c9cab7a

File tree

1 file changed

+23
-3
lines changed

1 file changed

+23
-3
lines changed

css-backgrounds-3/Overview.bs

+23-3
Original file line numberDiff line numberDiff line change
@@ -2932,11 +2932,13 @@ Shadow Shape, Spread, and Knockout</h4>
29322932

29332933
<p>To preserve the box's shape when spread is applied,
29342934
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).
29362937
However, in order to create a sharper corner when the border radius is small
29372938
(and thus ensure continuity between round and sharp corners),
29382939
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>,
29402942
where <var>r</var> is the ratio of the border radius to the <i>spread distance</i>,
29412943
in calculating the corner radii of the spread shadow shape.
29422944
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>
30623064
Changes since the 17 October 2017 Candidate Recommendation</h3>
30633065

30643066
<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()''.
30663069
(<a href="https://github.com/w3c/csswg-drafts/issues/2305">Issue 2305</a>)
30673070
<blockquote>
30683071
<pre><<shadow>> = <del>inset</del><ins><<color>></ins>? &amp;&amp; <<length>>{2,4} &amp;&amp; <del><<color>></del><ins>inset</ins>?</pre>
30693072
</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>
30703090
</ul>
30713091

30723092
<h3 id="changes-2014-09">

0 commit comments

Comments
 (0)