<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 初始化定义。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 37Edge ? Firefox Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
inset()Chrome Full support 37Edge ? Firefox Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
circle()Chrome Full support 37Edge ? Firefox Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
polygon()Chrome Full support 37Edge ? Firefox Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
path()Chrome Partial support 46
Notes
Partial support 46
Notes
Notes Only supported on the offset-path property.
Edge ? Firefox Partial support 63
Notes Disabled
Partial support 63
Notes Disabled
Notes Only supported on the clip-path and offset-path properties.
Disabled From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Partial support Partial
Notes
Partial support Partial
Notes
Notes Only supported on the offset-path property.
Safari No support NoWebView Android Partial support 46
Notes
Partial support 46
Notes
Notes Only supported on the offset-path property.
Chrome Android Partial support 46
Notes
Partial support 46
Notes
Notes Only supported on the offset-path property.
Edge Mobile ? Firefox Android Partial support 63
Notes Disabled
Partial support 63
Notes Disabled
Notes Only supported on the clip-path and offset-path properties.
Disabled From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Partial support Partial
Notes
Partial support Partial
Notes
Notes Only supported on the offset-path property.
Safari iOS No support NoSamsung Internet Android Partial support Partial
Notes
Partial support Partial
Notes
Notes Only supported on the offset-path property.
AnimationChrome Full support 37Edge ? Firefox Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 61
Disabled
Full support 61
Disabled
Disabled From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

文档标签和贡献者

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