使用 shape-outside 创建基本形状

<basic-shape> 类型用作所有基本形状的值。此类型是函数符号：函数括号包含用于描述形状的参数。

接受的参数因您要创建的形状而异。我们将在下面的示例中介绍这些参数。

了解 CSS 形状使用的参考框在使用基本形状时很重要，因为它定义了每个形状的坐标系。您已经在 创建来自框值的形状指南 中遇到了参考框，该指南直接使用参考框来创建形状。

下面的屏幕截图显示了 Firefox 形状检查器，它显示了使用 shape-outside: circle(50%) 创建的圆形的参考框。该元素应用了 20 像素的填充、边框和边距。形状检查器突出显示了这些参考框。

基本形状的默认参考框是 margin-box。您可以在屏幕截图中看到，形状是相对于框模型的那部分定义的。

虽然默认参考框是 margin-box，但可以对其进行修改。要将不同的框设置为参考框，请在基本形状定义之后包含所需的框值。

这两个声明相同

shape-outside: circle(50%);
shape-outside: circle(50%) margin-box;

要让您的形状使用不同的参考框，请包含不同的 <box-edge> 值，例如，要使用边框作为我们圆形的参考框，请设置

.shape {
  shape-outside: circle(50%) border-box;
}

创建的超出边距框的形状将被剪切到边距框。以下基本形状演示了这一点。

有关参考框在应用于 CSS 形状时的更详细解释，请参阅 了解 CSS 形状的参考框.

inset() 函数定义了一个矩形。这可能看起来不太有用，因为浮动一个项目（没有形状）会在它周围生成一个矩形形状。但是，inset() 类型允许定义偏移量，从而将包裹文本拉到缩小尺寸的矩形周围，覆盖浮动元素的部分。

inset() 函数最多可接受四个边偏移值，加上一个可选的 round 关键字，然后是一个 border-radius 值。以下 CSS 创建了一个矩形形状，它从浮动元素的参考框内缩 20 像素，从顶部和底部缩 10 像素，从左侧和右侧缩 10 像素，border-radius 值为 10 像素。

.shape {
  float: left;
  shape-outside: inset(20px 10px 20px 10px round 10px);
}

偏移值使用与 margin 简写相同的规则。四个以空格分隔的值分别定义了顶部、右侧、底部和左侧偏移量。您也可以同时设置多个偏移量

• 如果只有一个值，它将应用于所有边。
• 如果有两个值，顶部和底部的偏移量将设置为第一个值，右侧和左侧的偏移量将设置为第二个值。
• 如果有三个值，则顶部设置为第一个值，左侧和右侧设置为第二个值，底部设置为第三个值。

因此，上述规则也可以写成

.shape {
  float: left;
  shape-outside: inset(20px 10px round 10px);
}

在下面的示例中，我们使用了一个 inset() 形状来拉动浮动元素上的内容。更改偏移值以查看形状如何变化。

您还可以添加一个框值作为替代参考框。在下面的示例中，尝试将参考框从 margin-box 更改为 border-box、padding-box 或 content-box，以查看在计算偏移量之前用作起点的参考框是如何变化的。

您还可以使用 rect() 函数根据参考框的顶部和左侧边缘的距离创建矩形，或者使用 xywh() 函数使用宽度和高度创建矩形；这两个函数都支持可选的圆角。

shape-outside 的 circle() 值可以接受两个可能的参数：定义大小的 <shape-radius> 和定义其位置的 <position>。

circle() 和 ellipse() shape-outside 值都接受 <shape-radius> 作为参数。这可以是 <length>、<percentage> 或其中一个关键字 closest-side 或 farthest-side。

closest-side 关键字值使用从形状中心到参考框最近边的长度来创建半径长度。farthest-side 关键字值使用从形状中心到参考框最远边的长度。

第二个参数是 position，它接受一个或两个关键字 <position> 值，以指示圆心的位置。这与 background-position 的指定方式相同；如果一个或两个值被省略，则默认值为 center。

要创建圆形，我们包含一个半径值，之后可以可选地加上关键字 at，然后是位置值。此示例对一个 <img> 应用了一个圆形，该圆形具有 210px 的 width 和 height 以及 20px 的 margin。这使得参考框的总宽度为 250px。<shape-radius> 的 50% 值表示半径为 125px。位置值设置为 30%，表示从左侧的 30% 处，以及默认的垂直 center。

通过更改半径的大小来增加或减少圆形的大小，通过位置值移动圆形，或者设置参考框（就像我们对 inset() 所做的那样）来进行尝试。

下面的示例将生成的内容与使用关键字 top left 作为位置的 circle() 函数结合起来。这会在页面左上角创建一个四分之一圆形，用于文本环绕。

如上文 参考框 中所述，margin-box 将裁剪形状。您可以通过将圆心向内容移动（将位置设置为 60%）来查看这一点。圆心将更靠近内容，并且圆形将延伸到边距框之外。这意味着扩展将被裁剪并被切成方形。

img {
  float: left;
  shape-outside: circle(50% at 60%);
}

椭圆形是一个扁平的圆形。因此，ellipse() 函数的工作方式与 circle() 非常相似，除了我们必须按顺序指定两个半径 x 和 y。

之后可以加上一个或两个 <position> 值，就像 circle() 一样，以定义椭圆中心的位

closest-side 和 farthest-side 的关键字值在根据浮动元素参考框的大小快速创建椭圆形时非常有用。

使用 polygon() 函数更加复杂，可以创建多边形的形状。此形状接受三个或更多对值（多边形至少需要绘制一个三角形）。每对以空格分隔的值用逗号分隔，并代表相对于参考框绘制的单个顶点的坐标。每对坐标定义多边形的一条边，最后一条边由第一组和最后一组坐标定义。

下面的示例使用 polygon() 函数创建文本跟随的形状。尝试更改坐标值以查看形状如何变化。

要创建更复杂的形状，您可以使用 path() 或 shape() 函数定义任何形状的轮廓。

inset()、circle()、ellipse() 和 polygon() 可以使用 Firefox 开发者工具的形状检查器进行检查和编辑。下面的屏幕截图显示了在工具中突出显示的形状。

另一个资源是 Clippy，这是一个使用 CSS clip-path 属性创建形状的工具，它使用与 shape-outside 属性相同的基本形状函数和值。