CSS shape-outside 属性

定义和用法

shape-outside 属性允许您为行内内容定义包裹形状。默认情况下，行内内容会围绕其外边距框进行包裹，而使用 shape-outside，您可以自定义这种包裹方式。

shape-outside 属性定义了浮动元素的浮动区域。这个浮动区域定义了行内内容浮动元素围绕其进行包裹的形状。

让行内内容围绕图像以圆形环绕：

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

值	描述
none	默认值。浮动区域不受影响。行内内容围绕元素的外边距框进行包裹。
margin-box	定义由外边距外边缘包围的形状。
border-box	定义由边框外边缘包围的形状。
padding-box	定义由内边距外边缘包围的形状。
content-box	定义由内容边缘包围的形状。此框的每个角半径为 0 或 border-radius - border-width - padding 中的较大值。
basic-shape	浮动区域基于 inset()、circle()、ellipse() 或 polygon() 函数的形状。
url(image)	浮动区域基于指定图像的 alpha 通道，由 shape-image-threshold 定义。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

默认值：	none
继承性：	否
动画制作：	yes for basic-shape. Read about animatable
版本：	CSS Shapes Module Level 1
JavaScript 语法：	object.style.shapeOutside="circle(50%)"

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome	Edge	Firefox	Safari	Opera
37	79	62	10.1	24