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
<li><strong>closest-side</strong> uses the length from the center of the shape to the closest side of the relevant box.</li>
512
512
<li><strong>farthest-side</strong> uses the length from the center of the shape to the farthest side of the relevant box.</li>
513
-
<li><strong><dfndata-dfn-type=dfndata-noexport="" id=contain>contain<aclass=self-linkhref=#contain></a></dfn></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>
513
+
<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>
The <aclass=propertydata-link-type=propdeschref=#propdef-shape-outsidetitle=shape-outside>shape-outside</a> Property</span><aclass=self-linkhref=#shape-outside-property></a></h3>
677
677
678
-
<tableclass="definition propdef"><tr><th>Name:<td><dfnclass=css-codedata-dfn-type=propertydata-export="" id=propdef-shape-outside>shape-outside<aclass=self-linkhref=#propdef-shape-outside></a></dfn><tr><th>Value:<td>auto | <aclass="production css-code" data-link-type=typehref=#typedef-basic-shapetitle="<basic-shape>"><basic-shape></a> | <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-images-3/#image-typetitle="<image>"><image></a><tr><th>Initial:<td>auto<tr><th>Applies to:<td>floats<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>computed lengths for <aclass="production css-code" data-link-type=typehref=#typedef-basic-shapetitle="<basic-shape>"><basic-shape></a>, the <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-images-3/#image-typetitle="<image>"><image></a> with its URI made absolute, otherwise as specified</table>
678
+
<tableclass="definition propdef"><tr><th>Name:<td><dfnclass=css-codedata-dfn-type=propertydata-export="" id=propdef-shape-outside>shape-outside<aclass=self-linkhref=#propdef-shape-outside></a></dfn><tr><th>Value:<td>auto | <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-backgrounds-4/#boxtitle="<box>"><box></a> | [<aclass="production css-code" data-link-type=typehref=#typedef-basic-shapetitle="<basic-shape>"><basic-shape></a> || <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-backgrounds-4/#boxtitle="<box>"><box></a>] | <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-images-3/#image-typetitle="<image>"><image></a><tr><th>Initial:<td>auto<tr><th>Applies to:<td>floats<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>computed lengths for <aclass="production css-code" data-link-type=typehref=#typedef-basic-shapetitle="<basic-shape>"><basic-shape></a>, the <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-images-3/#image-typetitle="<image>"><image></a> with its URI made absolute, otherwise as specified</table>
679
679
<p> The values of this property have the following meanings:
similar to <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-backgrounds-4/#background-cliptitle=background-clip>background-clip</a><adata-biblio-type=normativedata-link-type=bibliohref=#css3bgtitle=css3bg>[CSS3BG]</a>.
of <aclass=cssdata-link-type=maybehref=#funcdef-insettitle=inset()>inset()</a>, <aclass=cssdata-link-type=maybehref=#funcdef-circletitle=circle()>circle()</a>, <aclass=cssdata-link-type=maybehref=#funcdef-ellipsetitle=ellipse()>ellipse()</a>
691
-
or <aclass=cssdata-link-type=maybehref=#funcdef-polygontitle=polygon()>polygon()</a>.
703
+
or <aclass=cssdata-link-type=maybehref=#funcdef-polygontitle=polygon()>polygon()</a>. If a <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-backgrounds-4/#boxtitle="<box>"><box></a> is also supplied, this defines the relevant box for the <aclass="production css-code" data-link-type=typehref=#typedef-basic-shapetitle="<basic-shape>"><basic-shape></a> function. If <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-backgrounds-4/#boxtitle="<box>"><box></a> is not supplied, then the relevant box defaults to <spanclass=cssdata-link-type=maybetitle=margin-box>margin-box</span>.
<tr><thscope=row><adata-property="">shape-outside</a><td>auto | <basic-shape> | <image><td>auto<td>floats<td>no<td><td>visual<td>computed lengths for <basic-shape>, the <image> with its URI made absolute, otherwise as specified
1072
+
<tr><thscope=row><adata-property="">shape-outside</a><td>auto | <box> | [<basic-shape> || <box>] | <image><td>auto<td>floats<td>no<td><td>visual<td>computed lengths for <basic-shape>, the <image> with its URI made absolute, otherwise as specified
1060
1073
<tr><thscope=row><adata-property="">shape-image-threshold</a><td><number><td>0.0<td>floats<td>no<td><td>visual<td>The same as the specified value after clipping the <number> to the range [0.0,1.0]
The <span>float area</span> uses the margin box as normal.
579
579
</dd>
580
580
581
+
<dt><dfn><<box>></dfn></dt>
582
+
<dd>
583
+
The shape is computed based on one of
584
+
''margin-box'',
585
+
''border-box'',
586
+
''padding-box'' or
587
+
''content-box''
588
+
which use their respective boxes
589
+
including curvature from border-radius,
590
+
similar to 'background-clip' [[!CSS3BG]].
591
+
</dd>
592
+
581
593
<dt><dfn><<basic-shape>></dfn></dt>
582
594
<dd>
583
595
The shape is computed based on the values of one
584
596
of ''inset()'', ''circle()'', ''ellipse()''
585
-
or ''polygon()''.
597
+
or ''polygon()''. If a <<box>> is also supplied, this defines the relevant box for the <<basic-shape>> function. If <<box>> is not supplied, then the relevant box defaults to ''margin-box''.
0 commit comments