1. Web
  2. CSS
  3. <basic-shape>

<basic-shape>

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

* 此特性的某些部分可能存在不同级别的支持。

<basic-shape> CSS 数据类型表示在 clip-path、shape-outside 和 offset-path 属性中使用的形状。

试一试

clip-path: inset(22% 12% 15px 35px);

clip-path: circle(6rem at 12rem 8rem);

clip-path: ellipse(115px 55px at 50% 40%);

clip-path: polygon(
  50% 2.4%,
  34.5% 33.8%,
  0% 38.8%,
  25% 63.1%,
  19.1% 97.6%,
  50% 81.3%,
  80.9% 97.6%,
  75% 63.1%,
  100% 38.8%,
  65.5% 33.8%
);

clip-path: path("M 50,245 A 160,160 0,0,1 360,120 z");

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

语法

<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。

备注：offset-path 不支持 <fill-rule>，使用它会使该属性无效。

矩形语法：<basic-shape-rect>

<basic-shape-rect> 类型是 <basic-shape> 类型的子集，表示仅限于创建矩形的基本形状函数，包括 inset()、rect() 和 xywh()。

polygon()、path() 和 shape() 函数也可用于创建矩形，但它们不限于仅创建四边直角形状。

通过容器内边距创建矩形的语法

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 的形状，不会影响文本环绕。

通过距离创建矩形的语法

rect() 函数使用距参考盒上边缘和左边缘的指定距离来定义一个矩形，并可选地设置圆角。

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

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

带尺寸的矩形语法

xywh() 函数定义一个矩形，其位置由距参考盒左边缘（x）和上边缘（y）的指定距离确定，其大小由指定的矩形宽度（w）和高度（h）确定（按此顺序），并可选地设置圆角。

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

圆形语法

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

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

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

椭圆语法

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

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

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

多边形语法

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

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

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

路径语法

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

path( <'fill-rule'>? , <string> )

必需的 <string> 是一个用引号括起来的 SVG 路径字符串。path() 函数不是一个有效的 shape-outside 属性值。

形状语法

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

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

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

描述

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

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

An image showing a circle inspected with the Firefox DevTools Shape Inspector. The different parts of the box model are highlighted.

基本形状的计算值

<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> 关键字，则会在每个对应的值之间应用插值。如果在 clip-path 属性中使用 shape()，并且两个形状还具有相同的 <fill-rule>，则它们会进行插值。

    • 如果它们使用 <curve-command> 或 <smooth-command>，则控制点的数量必须匹配才能进行插值。

    • 如果它们使用具有不同 <arc-sweep> 方向的 <arc-command>，则插值结果将按顺时针（cw）方向进行。如果它们使用不同的 <arc-size> 关键字，则尺寸将使用 large 值进行插值。

  • 一个形状是 path() 类型，另一个是 shape() 类型：如果路径数据命令列表在数量和顺序上都相同，则会在每个对应的值之间应用插值。插值后的形状是一个 shape() 函数，并保持相同的路径数据命令列表。

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

示例

多边形动画

在此示例中，我们使用 @keyframes 规则在两个多边形之间为剪切路径设置动画。请注意，两个多边形具有相同数量的顶点，这是此类动画正常工作所必需的。

HTML

html
<div></div>

CSS

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%
    );
  }
}

结果

规范

规范
CSS Shapes Module Level 1
# basic-shape-functions

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面的最后修改时间是 ，由 MDN 贡献者们修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.