基本形状 | <basic-shape>

<basic-shape> CSS数据类型表示在所使用的形状clip-path或shape-outside特性。

语法

基本形状由基本形状函数定义。使用此语法创建形状时，参考框由每个使用<basic-shape>值的属性定义。形状的坐标系统的原点位于参考框的左上角，其中 x 轴向右运行，y 轴向下运行。从百分比表示的所有长度都从参考框的已用尺寸中解析出来。

形状功能

支持以下形状。所有<basic-shape>值都使用功能符号，并在此处使用值定义语法进行定义。

inset()

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

定义一个插入矩形。

当提供所有前四个参数时，它们代表从内向参考框的顶部，右侧，底部和左侧偏移量，它们定义了插入矩形边缘的位置。这些参数遵循边缘速记的语法，让您用一个，两个或四个值设置所有四个插入点。

可选<border-radius>参数（s）使用边界半径简化语法为插入矩形定义圆角。

任何一个维度中的一对插入加起来超过使用尺寸（例如每个75％的左右插图）定义了一个不包含任何区域的形状。对于这个规范，这会导致一个空的浮动区域。

polygon()

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

<fill-rule>表示用于确定多边形内部的填充规则。可能的值是nonzero和evenodd。省略时的默认值是nonzero。

列表中的每对参数表示 xi 和 yi - 多边形第 i 个顶点的 x 和 y 轴坐标。

circle()

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

<shape-radius>参数表示 r ，圆的半径。负值无效。此处的百分比值将从参考框的已用宽度和高度中解析为sqrt(width^2+height^2)/sqrt(2)。

该<position>参数定义了圆的中心。如果省略，这个默认为中心。

ellipse()

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

该<shape-radius>参数表示 rx 和 ry，椭圆的 x 轴和 y 轴的半径，在该顺序。两个半径的负值都是无效的。此处的百分比值将根据参考框的已用宽度（对于 rx 值）和已用高度（对于 ry 值）进行解析。

位置参数定义了椭圆的中心。如果省略，这个默认为中心。

上面未定义的参数定义如下：

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

定义圆或椭圆的半径。如果省略，则默认为closest-side。

closest-side使用从形状中心到参考框最近边的长度。对于圆形来说，这是任何维度中最接近的一面。对于椭圆，这是半径尺寸中最接近的一侧。

farthest-side使用从形状的中心到参考框的最远侧的长度。对于圆形来说，这是任何维度中最远的一面。对于椭圆，这是半径方向上最远的一侧。

基本形状的计算值

<basic-shape>函数中的值按指定计算，但有以下例外：

省略值包含在内并计算为其默认值。
一个<position>值circle()或者ellipse()被计算为一对距离左上角原点的偏移量（水平方向，然后是垂直方向），每个偏移量都是绝对长度和百分比的组合。
计算的<border-radius>值inset()是所有八个<length>或百分比值的扩展列表。

基本形状的插值

从一个形状插入到另一个时，应用下面的规则。形状函数中的值插入为简单列表。列表值在可能的情况下以长度，百分比或计算方式进行插值。如果列表值不是这些类型中的一个，而是相同的（例如，在两个列表中的相同列表位置找到非零值），则这些值将进行内插。

这两种形状必须使用相同的参考框。
如果两种形状都是相同类型，那种类型是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%);
  }
}

结果

规范

Specification	Status	Comment
CSS Shapes Module Level 1The definition of '<basic-shape>' in that specification.	Candidate Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	47 (47)	No support	(Yes)	(Yes)-webkit
inset()	?	No support	No support	No support	?
Animations	(Yes)	49 (49)	No support	(Yes)	(Yes)-webkit

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	47.0 (47) (behind a pref)	No support	No support	(Yes)
inset()	?	(Yes)	No support	No support	No support	?
Animations	?	?	49.0 (49)	No support	No support	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18