<basic-shape> - CSS（层叠样式表） 编辑

<basic-shape>是一种表现基础图形的CSS数据类型，作用于clip-path 与 shape-outside 属性中。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

语法

<basic-shape>数据类型可以由下列函数得到。

当构建一个图形时，运用了<basic-shape>值的属性就会定义一个相关的盒模型。基础图形使用的坐标系统即设置相关的盒模型左上角顶点为原点，该坐标轴的x轴正方向为右、y轴的正方向为下。所有以百分比定义的长度将通过相关盒模型与使用的维度重定义。

图形函数

以下为当前支持的图形。所有<basic-shape>值都由函数表达式定义，并且遵循属性值定义语法（value definition syntax）。

inset()

inset( <shape-arg>{1,4} [round <border-radius>]? )

以上函数定义了一个插进的长方形。

上式的前四个参数分别代表了插进的长方形与相关盒模型的上，右，下与左边界和顶点的偏移量。这些参数遵循边际速记语法（the syntax of the margin shorthand），所以给予一个、两个、或四个值都能设置四个偏移量。

可选参数<border-radius>用于定义插进长方形顶点的圆弧角度，该参数同上遵循边际速记语法（the syntax of the margin shorthand），给予一个、两个、或四个值都能设置四个偏移量。

如果一对插进图形在通过堆叠产生的高于当前使用维度的维度中（例如，左右插进图像相叠75%）将会定义一个包围不了任何区域的图形。这种情况会在元素中产生一个空白且平坦的区域。

circle()

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

<shape-radius> 参数代表了 r， 即圆形的半径， 不接受负数作为该参数的值。一个以百分比表示的值将以公式 sqrt(width^2+height^2)/sqrt(2)计算，其中width与height为相关盒模型的宽与高。

<position> 参数定义了圆心的位置。省缺值为盒模型的中心。

ellipse()

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

<shape-radius> 参数代表了 r_x 与 r_y，其中 r_x 代表了x轴方向的半径， r_y代表了y轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照，宽作为 r_x 的参照值，高作为 r_y 的参照值。

<position>参数定义了椭圆形圆心的位子。其省缺值为盒模型的中心。

polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<fill-rule> 代表了填充规则（ filling rule ），即，如何填充该多边形。 可选值为 nonzero 和 evenodd。 该参数的省缺值为 nonzero。

每一对在列表中的参数都代表了多边形顶点的坐标， x_i 与 y_i ，i代表顶点的编号，即，第i个顶点。

path()

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

可选的 <fill-rule> 表示 filling rule 填充规则. 可选 nonzero （非零环绕规则）和 evenodd （奇偶规则） . 默认是（Default value when omitted） nonzero.

参数 <string> 是用引号包含的 SVG Path 字符串

上文未曾解释的参数如下：

<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

为一个圆形或椭圆形定义一个半径。其省缺值为 closest-side。

closest-side 即图形中心到盒模型最近一条边之间的距离。对于圆形，该值在任意维度都表示最近的一条边。对于椭圆形，该值为半径维度最近的一条边。

farthest-side 取图形中心到盒模型最远一条边之间的距离作为值。对于圆形，该值在任意维度都是最远的一条边。对于椭圆形，该值为半径维度最远的一条边。

基础图形的计算值

在 <basic-shape> 函数中的值通过指定的方式计算， 但是有下列情况会出现错误：

• 遗漏值（omitted values）参与到了省缺值的计算中。
•  在 circle() 或  ellipse() 函数中的<position>值被作为一对（水平的或垂直的）从左上原点的偏移值，每一次这样的计算将会给出绝对长度与百分比的结合。
• 一个在 inset()中的 <border-radius> 值，往往被当作一个扩展列表来计算，所有八个 length值或百分比代表的值都是如此。

基础图形的插值

 <basic-shape> 值之间的动画变化将会遵循以下规则。图形函数的值会被放进一个插入的简易列表中。这些列表中的值将会尽可能地被当作 <length>、<percentage>、 或 calc() 类型插入.。如果列表中的值不为上述三种类型中的一种，然而却是相同的（比如 nonzero 类型的值在多个列表的相同位置出现)，那么这些值将不会被作为插值。

• 一对的图形需要使用一样的盒模型。
• 如果一对图形是同一种类型，例如， ellipse() 或 circle()， 并且没有任何半径使用了 closest-side 或 farthest-side 关键值， 那么这些值将会成为相应的图形函数的插值。
• 如果一对图形都属于 inset()类，那么这些值将会成为相应的图形函数的插值。
• 如果一对图形都属于 polygon()类， 并且两者有同样数量的顶点，并且使用了相同的填充规则 <fill-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%);
  }
}

结果

规格

规格	状态	评论
CSS Shapes Module Level 1 <basic-shape>	Candidate Recommendation	初始化定义。

浏览器兼容性

BCD tables only load in the browser

该网页中的兼容性表格由结构化的数据产生。如果您有意帮助我们改进现有数据，请访问该网址 https://github.com/mdn/browser-compat-data ，并向我们发送数据获取请求（pull request）。

See also

• Properties that use this data type: clip-path, shape-outside
• Edit Shape Paths in CSS — Firefox Developer Tools