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

 

语法

<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> 参数代表了 rx 与 ry,其中 rx 代表了x轴方向的半径, ry代表了y轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照,宽作为 rx 的参照值,高作为 ry 的参照值。

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

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

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

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

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

<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: linear-gradient(red, blue);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: 5s poly infinite alternate ease-in-out;
  margin: 1em auto;
  display: block;
}

@keyframes poly {
  from {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  to {
    -webkit-clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
    clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
  }
}

结果

规格

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

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ?47 No Yes Yes -webkit-
inset() ? ? No No No ?
Animation Yes ?49 No Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes ?47 No Yes Yes
inset() ? Yes ? No No ? Yes
Animation ? ? ?49 No ? ?

See also

文档标签和贡献者

 此页面的贡献者: ScaredKitty
 最后编辑者: ScaredKitty,