You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
of the <adata-link-type=dfnhref=#reference-boxtitle="reference box">reference box</a>.
396
-
For the radius <code>r</code> of a <aclass=cssdata-link-type=maybehref=#funcdef-circletitle=circle()>circle()</a>,
397
-
a percentage value is resolved from the used width and height of the <adata-link-type=dfnhref=#reference-boxtitle="reference box">reference box</a> as <code>sqrt((<em>width</em>)**2 + (<em>height</em>)**2))/sqrt(2)</code>.
<aclass="production css-code" data-link-type=typehref=#typedef-fill-ruletitle="<fill-rule>"><fill-rule></a> - The filling rule used to determine the interior of the
482
-
polygon. See <ahref=http://www.w3.org/TR/SVG/painting.html#FillRuleProperty>fill-rule</a> property in SVG for details. Possible values are nonzero
483
-
or evenodd. Default value when omitted is nonzero.</li>
Defines a radius for a circle or ellipse. If omitted it defaults to contain.
523
+
Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.
513
524
<ul>
514
-
<li><strong>closest-side</strong> uses the length from the center of the shape to the closest side of the <adata-link-type=dfnhref=#reference-boxtitle="reference box">reference box</a>.</li>
515
-
<li><strong>farthest-side</strong> uses the length from the center of the shape to the farthest side of the <adata-link-type=dfnhref=#reference-boxtitle="reference box">reference box</a>.</li>
516
-
<li><strong>contain</strong> uses the same value as closest-side for circle(). For ellipse the <strong>rx</strong> value uses the length from the center of the shape to the closest width side, and the <strong>ry</strong> value uses the length from the center of the shape to the closest height side.</li>
525
+
<li>
526
+
<strong>closest-side</strong>
527
+
uses the length from the center
528
+
of the shape to the closest side
529
+
of the <adata-link-type=dfnhref=#reference-boxtitle="reference box">reference box</a>.
530
+
For circles,
531
+
this is the closest side
532
+
in any dimension.
533
+
For ellipses,
534
+
this is the closest side
535
+
in the radius dimension.
536
+
</li>
537
+
<li>
538
+
<strong>farthest-side</strong>
539
+
uses the length from the center
540
+
of the shape to the farthest side
541
+
of the <adata-link-type=dfnhref=#reference-boxtitle="reference box">reference box</a>.
For interpolating between two shapes that are type inset-rectangle, ellipse or circle:
561
+
For interpolating between two shapes that are type insetrectangle, ellipse or circle:
537
562
<ul>
538
563
<li>
539
-
Replace each inset-rectangle with a temporary inset-rectangle with offsets relative to the margin-box.
564
+
Replace each insetrectangle with a temporary insetrectangle with offsets relative to the margin-box.
540
565
</li>
541
566
<li>
542
-
Replace each circle and ellipse with a temporary inset-rectangle with offsets relative to the margin-box, and <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-backgrounds-4/#border-radiustitle=border-radius>border-radius</a> values to make the inset-rectangle equivalent to the original circle or ellipse
567
+
Replace each circle and ellipse with a temporary insetrectangle with offsets relative to the margin-box, and <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-backgrounds-4/#border-radiustitle=border-radius>border-radius</a> values to make the insetrectangle equivalent to the original circle or ellipse
543
568
</li>
544
569
<li>
545
-
Interpolate between each value of the temporary inset-rectangles.
570
+
Interpolate between each value of the temporary insetrectangles.
a percentage value is resolved from the used width and height of the <a>reference box</a> as <code>sqrt((<em>width</em>)**2 + (<em>height</em>)**2))/sqrt(2)</code>.
Defines a radius for a circle or ellipse. If omitted it defaults to contain.
406
+
Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.
396
407
<ul>
397
-
<li><strong>closest-side</strong> uses the length from the center of the shape to the closest side of the <a>reference box</a>.</li>
398
-
<li><strong>farthest-side</strong> uses the length from the center of the shape to the farthest side of the <a>reference box</a>.</li>
399
-
<li><strong>contain</strong> uses the same value as closest-side for circle(). For ellipse the <strong>rx</strong> value uses the length from the center of the shape to the closest width side, and the <strong>ry</strong> value uses the length from the center of the shape to the closest height side.</li>
408
+
<li>
409
+
<strong>closest-side</strong>
410
+
uses the length from the center
411
+
of the shape to the closest side
412
+
of the <a>reference box</a>.
413
+
For circles,
414
+
this is the closest side
415
+
in any dimension.
416
+
For ellipses,
417
+
this is the closest side
418
+
in the radius dimension.
419
+
</li>
420
+
<li>
421
+
<strong>farthest-side</strong>
422
+
uses the length from the center
423
+
of the shape to the farthest side
424
+
of the <a>reference box</a>.
425
+
For circles,
426
+
this is the farthest side
427
+
in any dimension.
428
+
For ellipses,
429
+
this is the farthest side
430
+
in the radius dimension.</li>
400
431
</ul>
401
432
</dd>
402
-
403
-
<dt><dfn><<fill-rule>></dfn> = nonzero | evenodd
404
-
</dt>
405
-
<dd>
406
-
See <ahref="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a> property in SVG for details.
For interpolating between two shapes that are type inset-rectangle, ellipse or circle:
444
+
For interpolating between two shapes that are type insetrectangle, ellipse or circle:
420
445
<ul>
421
446
<li>
422
-
Replace each inset-rectangle with a temporary inset-rectangle with offsets relative to the margin-box.
447
+
Replace each insetrectangle with a temporary insetrectangle with offsets relative to the margin-box.
423
448
</li>
424
449
<li>
425
-
Replace each circle and ellipse with a temporary inset-rectangle with offsets relative to the margin-box, and 'border-radius' values to make the inset-rectangle equivalent to the original circle or ellipse
450
+
Replace each circle and ellipse with a temporary insetrectangle with offsets relative to the margin-box, and 'border-radius' values to make the insetrectangle equivalent to the original circle or ellipse
426
451
</li>
427
452
<li>
428
-
Interpolate between each value of the temporary inset-rectangles.
453
+
Interpolate between each value of the temporary insetrectangles.
0 commit comments