<basic-shape>

<basic-shape> 数据类型用于创建基本形状，包括通过 容器内边距、通过 坐标距离 或通过 设置尺寸 的矩形、圆形、椭圆形、多边形、路径 和 作者创建的形状。这些基本形状使用一个 <basic_shape> CSS 函数定义，每个值都需要一个遵循形状特定函数语法的参数。

一些基本形状函数语法的常用参数包括

round <'border-radius'>

使用与 CSS border-radius 简写属性相同的语法，为 容器内边距矩形、距离矩形 和 尺寸矩形 定义圆角。

<shape-radius>

为 圆形 或 椭圆形 定义半径。有效值包括 <length>、<percentage>、closest-side（默认值）和 farthest-side。负值无效。

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

<position>

定义 圆形 或 椭圆形 的中心 <position>。如果省略，则默认为 center。

<fill-rule>

设置用于确定如何填充基本形状 多边形、路径 和 形状 定义的形状内部的 fill-rule。可能的值为 nonzero（默认值）和 evenodd。

注意：<fill-rule> 在 offset-path 中不受支持，使用它会使属性失效。

inset() 函数创建一个内边距矩形，其大小由其容器的四边的偏移距离定义，并且可以选择圆角。

inset( <length-percentage>{1,4} [ round <`border-radius`> ]? )

当提供所有前四个参数时，它们分别表示从参考框向内开始的顶部、右侧、底部和左侧偏移量，这些偏移量定义了内边距矩形边缘的位置。这些参数遵循 margin 简写语法的语法，允许您使用一个、两个、三个或四个值设置所有四个内边距。

如果某个维度的一组内边距之和超过该维度的 100%，则这两个值将按比例缩小，使其和等于 100%。例如，值 inset(90% 10% 60% 10%) 具有 90% 的顶部内边距和 60% 的底部内边距。这些值将按比例缩小为 inset(60% 10% 40% 10%)。像这样的不包含任何区域且没有 shape-margin 的形状不会影响换行。

The rect() 函数使用从参考框的顶部和左侧边缘指定的距离定义一个矩形，并可以选择圆角。

rect( [ <length-percentage> | auto ]{4} [ round <`border-radius`> ]? )

使用 rect() 函数时，您无需定义矩形的宽度和高度。相反，您指定四个值来创建矩形，其尺寸由参考框的大小和四个偏移值确定。每个值可以是 <length>、<percentage> 或关键字 auto。auto 关键字对于顶部和左侧值被解释为 0%，对于底部和右侧值被解释为 100%。

The xywh() 函数定义一个矩形，该矩形位于从参考框的左侧 (x) 和顶部 (y) 边缘指定的距离处，并由指定的矩形宽度 (w) 和高度 (h) 确定尺寸（按此顺序），并可以选择圆角。

xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <`border-radius`> ]? )

The circle() 函数使用半径和位置定义一个圆形。

circle( <shape-radius>? [ at <position> ]? )

<shape-radius> 参数表示圆形的半径，定义为 <length> 或 <percentage>。此处的百分比值从参考框的已用宽度和高度解析为 sqrt(width^2+height^2)/sqrt(2)。如果省略，则半径由 closest-side 定义。

The ellipse() 函数使用两个半径和一个位置定义一个椭圆。

ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )

<shape-radius> 参数分别表示椭圆的 x 轴半径 rx 和 y 轴半径 ry（按此顺序）。这些值指定为 <length> 或 <percentage>。此处的百分比值相对于参考框的已用宽度（对于 rx 值）和已用高度（对于 ry 值）解析。如果只提供一个半径值，则 ellipse() 形状函数无效。如果未提供任何值，则使用 50% 50%。

The polygon() 函数使用 SVG fill-rule 和一组坐标定义一个多边形。

polygon( <`fill-rule`>?, [ <length-percentage> <length-percentage> ]# )

该函数采用以逗号分隔的坐标对列表，每个坐标对包含两个以空格分隔的 <length-percentage> 值作为 xi 和 yi 对。这些值表示位置 i 处多边形的 x 轴和 y 轴坐标（两条线相交的顶点）。

The path() 函数使用 SVG fill-rule 和 SVG 路径定义 定义一个形状。

path( <`fill-rule`>?, ]? <string> )

必需的 <string> 是作为带引号字符串的 SVG 路径。path() 函数不是有效的 shape-outside 属性值。

The shape() 函数使用初始起点和一系列形状命令定义一个形状。

shape( <fill-rule>? from <coordinate-pair>, <shape-command># )

from <coordinate-pair> 参数表示第一个形状命令的起点，<shape-command> 定义一个或多个形状命令，这些命令类似于 SVG 路径命令。shape() 函数不是有效的 shape-outside 属性值。

创建形状时，参考框由使用 <basic-shape> 值的属性定义。形状的坐标系默认情况下原点位于元素的边距框的左上角，x 轴向右延伸，y 轴向下延伸。所有以百分比表示的长度都从参考框的尺寸解析。

默认参考框是 margin-box，如下面的图像所示。该图像显示了一个使用 shape-outside: circle(50%) 创建的圆形，突出显示了在浏览器开发者工具中看到的盒子模型的不同部分。此处的形状是相对于边距框定义的。

<basic-shape> 函数中的值按指定计算，并考虑以下附加事项

• 对于任何省略的值，都使用其默认值。
• circle() 或 ellipse() 中的 <position> 值计算为从参考框的左上角偏移的一对偏移量：第一个偏移量是水平的，第二个是垂直的。每个偏移量都指定为 <length-percentage> 值。
• inset() 中的 <border-radius> 值扩展为一个包含八个值的列表，每个值都是 <length> 或 <percentage>。
• inset()、rect() 和 xywh() 函数计算为等效的 inset() 函数。

在两个 <basic-shape> 函数之间进行动画时，将遵循下面列出的 插值 规则。每个 <basic-shape> 函数的参数值形成一个列表。要在两个形状之间进行插值，这两个形状必须使用相同的参考框，并且两个 <basic-shape> 列表中的值的数量和类型必须匹配。

两个 <basic-shape> 函数的列表中的每个值都基于其计算值作为 <number>、<length>、<percentage>、<angle> 或 calc() 进行插值（如果可能）。即使值不是这些数据类型之一，但如果在两个插值基本形状函数之间相同，例如 nonzero，仍然可以进行插值。

• 两个形状都为 ellipse() 类型或 circle() 类型：如果它们的半径指定为 <length> 或 <percentage>（而不是 closest-side 或 farthest-side 等关键字），则在每个对应值之间应用插值。
• 两个形状都为 inset() 类型：在每个对应值之间应用插值。
• 两个形状都为 polygon() 类型：如果它们使用相同的 <fill-rule> 并且具有相同数量的逗号分隔的坐标对，则在每个对应值之间应用插值。
• 两个形状都为 path() 类型：如果两个形状中的路径字符串在 路径数据命令 的数量、类型和顺序上匹配，则将每个参数作为 <number> 进行插值。
• 两个形状都为 shape() 类型：如果它们具有相同的命令关键字并使用相同的 <by-to> 关键字，则在每个对应值之间应用插值。如果 shape() 用于 clip-path 属性，则如果这两个形状也具有相同的 <fill-rule>，则它们会进行插值。
  • 如果它们使用 <curve-command> 或 <smooth-command>，则控制点的数量必须匹配才能进行插值。
  • 如果它们使用具有不同 <arc-sweep> 方向的 <arc-command>，则插值结果为顺时针 (cw)。如果它们使用不同的 <arc-size> 关键字，则大小使用 large 值进行插值。
• 一个形状为 path() 类型，另一个形状为 shape() 类型：如果路径数据命令列表在数量和顺序上相同，则在每个对应值之间应用插值。插值后的形状为 shape() 函数，保持相同的路径数据命令列表。

在所有其他情况下，都不会发生插值，并且动画是离散的。

在此示例中，我们使用 @keyframes at-rule 在两个多边形之间对剪辑路径进行动画处理。请注意，这两个多边形都具有相同数量的顶点，这对于此类动画正常工作是必要的。

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(
      50% 0%,
      60% 40%,
      100% 50%,
      60% 60%,
      50% 100%,
      40% 60%,
      0% 50%,
      40% 40%
    );
  }

  to {
    clip-path: polygon(
      50% 30%,
      100% 0%,
      70% 50%,
      100% 100%,
      50% 70%,
      0% 100%,
      30% 50%,
      0% 0%
    );
  }
}

结果

• 使用此数据类型的属性：clip-path、offset-path、shape-outside、
• CSS 形状 模块
• CSS 形状概述
• 在 CSS 中编辑形状路径 - Firefox 开发者工具