1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: <basic-shape>
slug: Web/CSS/basic-shape
translation_of: Web/CSS/basic-shape
---
<div>{{CSSRef}}</div>
<div><strong><code><basic-shape></code></strong>是一种表现基础图形的CSS数据类型，作用于{{cssxref("clip-path")}} 与 {{cssxref("shape-outside")}} 属性中。</div>
<p>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</p>
<div class="hidden">
<p>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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>
<h2 id="语法"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>语法</strong></span></font></h2>
<p><strong><code><basic-shape></code></strong>数据类型可以由下列函数得到。</p>
<p>当构建一个图形时，运用了<strong><code><basic-shape></code></strong>值的属性就会定义一个相关的盒模型。基础图形使用的坐标系统即设置相关的盒模型左上角顶点为原点，该坐标轴的x轴正方向为右、y轴的正方向为下。所有以百分比定义的长度将通过相关盒模型与使用的维度重定义。</p>
<h3 id="图形函数">图形函数</h3>
<p>以下为当前支持的图形。所有<basic-shape>值都由函数表达式定义，并且遵循属性值定义语法（<a href="/en-US/docs/Web/CSS/Value_definition_syntax">value definition syntax</a>）。</p>
<dl>
<dt><code>inset()</code></dt>
<dd>
<pre class="syntaxbox"><code>inset( <shape-arg>{1,4} [round <border-radius>]? )</code></pre>
<p>以上函数定义了一个插进的长方形。</p>
<p>上式的前四个参数分别代表了插进的长方形与相关盒模型的上，右，下与左边界和顶点的偏移量。这些参数遵循边际速记语法（the syntax of the margin shorthand），所以给予一个、两个、或四个值都能设置四个偏移量。</p>
<p>可选参数<border-radius>用于定义插进长方形顶点的圆弧角度，该参数同上遵循边际速记语法（the syntax of the margin shorthand），给予一个、两个、或四个值都能设置四个偏移量。</p>
<p>如果一对插进图形在通过堆叠产生的高于当前使用维度的维度中（例如，左右插进图像相叠75%）将会定义一个包围不了任何区域的图形。这种情况会在元素中产生一个空白且平坦的区域。</p>
</dd>
<dt><code>circle()</code></dt>
<dd>
<pre class="syntaxbox"><code><code><code>circle( [<shape-radius>]? [at <position>]? )</code></code></code></pre>
<p><code><shape-radius></code> 参数代表了 <em>r，</em> 即圆形的半径， 不接受负数作为该参数的值。一个以百分比表示的值将以公式 <code>sqrt(width^2+height^2)/sqrt(2)</code>计算，其中width与height为相关盒模型的宽与高。</p>
<p>{{cssxref("<position>")}} 参数定义了圆心的位置。省缺值为盒模型的中心。</p>
</dd>
<dt><code>ellipse()</code></dt>
<dd>
<pre class="syntaxbox"><code><code><code>ellipse( [<shape-radius>{2}]? [at <position>]? )</code></code></code></pre>
<p><code><shape-radius></code> 参数代表了 r<sub>x</sub> 与 r<sub>y</sub>，其中 r<sub>x</sub> 代表了x轴方向的半径， r<sub>y</sub>代表了y轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照，宽作为 r<sub>x</sub> 的参照值，高作为 r<sub>y</sub> 的参照值。</p>
<p><position>参数定义了椭圆形圆心的位子。其省缺值为盒模型的中心。</p>
</dd>
<dt><code>polygon()</code></dt>
<dd>
<pre class="syntaxbox"><code>polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</code></pre>
<p><code><fill-rule></code> 代表了填充规则（ <a href="/en-US/docs/Web/SVG/Attribute/fill-rule">filling rule</a> ），即，如何填充该多边形。 可选值为 nonzero 和 evenodd。 该参数的省缺值为 nonzero。</p>
<p>每一对在列表中的参数都代表了多边形顶点的坐标， <em>x<sub>i</sub></em> 与 <em>y<sub>i</sub></em> ，i代表顶点的编号，即，第i个顶点。</p>
</dd>
<dt><code>path()</code>{{Experimental_Inline}}</dt>
<dd>
<pre><code>path( [<fill-rule>,]? <string>)</code></pre>
<p>可选的 <code><fill-rule></code> 表示 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule">filling rule</a> 填充规则. 可选 <code>nonzero</code> （非零环绕规则）和 <code>evenodd</code> （奇偶规则） . 默认是（Default value when omitted） <code>nonzero</code>.</p>
<p>参数 <string> 是用引号包含的 <a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute/d">SVG Path</a> 字符串</p>
</dd>
<dd></dd>
</dl>
<p>上文未曾解释的参数如下：</p>
<pre class="syntaxbox"><code><shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side</code></pre>
<p>为一个圆形或椭圆形定义一个半径。其省缺值为 <code>closest-side。</code></p>
<p><code>closest-side</code> 即图形中心到盒模型最近一条边之间的距离。对于圆形，该值在任意维度都表示最近的一条边。对于椭圆形，该值为半径维度最近的一条边。</p>
<p><code>farthest-side</code> 取图形中心到盒模型最远一条边之间的距离作为值。对于圆形，该值在任意维度都是最远的一条边。对于椭圆形，该值为半径维度最远的一条边。</p>
<h2 id="基础图形的计算值"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>基础图形的计算值</strong></span></font></h2>
<p>在 <code><basic-shape></code> 函数中的值通过指定的方式计算， 但是有下列情况会出现错误：</p>
<ul>
<li>遗漏值（omitted values）参与到了省缺值的计算中。</li>
<li> 在 <code>circle()</code> 或 <code>ellipse()</code> 函数中的{{cssxref("<position>")}}值被作为一对（水平的或垂直的）从左上原点的偏移值，每一次这样的计算将会给出绝对长度与百分比的结合。</li>
<li>一个在 <code>inset()</code>中的 <a href="/en-US/docs/Web/CSS/border-radius"><code><border-radius></code></a> 值，往往被当作一个扩展列表来计算，所有八个 {{cssxref("length")}}值或百分比代表的值都是如此。</li>
</ul>
<h2 id="基础图形的插值"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>基础图形的插值</strong></span></font></h2>
<p> <code><basic-shape></code> 值之间的动画变化将会遵循以下规则。图形函数的值会被放进一个插入的简易列表中。这些列表中的值将会尽可能地被当作 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length" title="The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."><code><length></code></a>、<code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/percentage" title="The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size."><percentage></a></code>、 或 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" title="The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is allowed."><code>calc()</code></a> 类型插入.。如果列表中的值不为上述三种类型中的一种，然而却是相同的（比如 <code>nonzero</code> 类型的值在多个列表的相同位置出现)，那么这些值将不会被作为插值。</p>
<ul>
<li>一对的图形需要使用一样的盒模型。</li>
<li>如果一对图形是同一种类型，例如， <code>ellipse()</code> 或 <code>circle()</code>， 并且没有任何半径使用了 <code>closest-side</code> 或 <code>farthest-side</code> 关键值， 那么这些值将会成为相应的图形函数的插值。</li>
<li>如果一对图形都属于 <code>inset()</code>类，那么这些值将会成为相应的图形函数的插值。</li>
<li>如果一对图形都属于 <code>polygon()</code>类， 并且两者有同样数量的顶点，并且使用了相同的填充规则 <code><fill-rule></code>，那么这些值将会成为相应的图形函数的插值。</li>
<li>其余状况将不会出现插值。</li>
</ul>
<h2 id="示例"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>示例</strong></span></font></h2>
<h3 id="动画多边形">动画多边形</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div></div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css"><code>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%);
}
}</code></pre>
<h4 id="结果">结果</h4>
<p>{{EmbedLiveSample('动画多边形','340', '340')}}</p>
<h2 id="规格"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>规格</strong></span></font></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规格</th>
<th scope="col">状态</th>
<th scope="col">评论</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}</td>
<td>{{ Spec2('CSS Shapes') }}</td>
<td>初始化定义。</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>浏览器兼容性</strong></span></font></h2>
<p>{{Compat("css.types.basic-shape")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>Properties that use this data type: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li>
</ul>
|
