diff --git a/files/zh-cn/web/css/basic-shape/index.md b/files/zh-cn/web/css/basic-shape/index.md index 38908bc712c7bd..ac3a97765f3fe8 100644 --- a/files/zh-cn/web/css/basic-shape/index.md +++ b/files/zh-cn/web/css/basic-shape/index.md @@ -1,121 +1,169 @@ --- title: slug: Web/CSS/basic-shape +l10n: + sourceCommit: f430d277573ba0b06b1ac33ae8017fd90f170bef --- {{CSSRef}} -**``** 是一种表现基础图形的 CSS 数据类型，作用于{{cssxref("clip-path")}} 与 {{cssxref("shape-outside")}} 属性中。 +**``** [CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types)表示一种用于 {{cssxref("clip-path")}}、{{cssxref("shape-outside")}} 和 {{cssxref("offset-path")}} 属性的形状。 {{EmbedInteractiveExample("pages/css/type-basic-shape.html")}} ## 语法 -**``**数据类型可以由下列函数得到。 +`` 数据类型用于创建基本形状，包括通过[容器 inset](#通过容器_inset_定义矩形的语法)、通过[坐标距离](#通过距离定义矩形的语法)，或通过[设定尺寸](#具有尺寸的矩形语法)、[圆形](#圆形语法)、[椭圆形](#椭圆形语法)、[多边形](#多边形语法)、[路径](#路径语法)以及[作者创建的形状](#形状语法)。这些基本形状是使用一个 `` CSS 函数来定义的，每个值都需要一个符合该形状函数特定语法的参数。 -当构建一个图形时，运用了 **``** 值的属性就会定义一个相关的盒模型。基础图形使用的坐标系统即设置相关的盒模型左上角顶点为原点，该坐标轴的 x 轴正方向为右、y 轴的正方向为下。所有以百分比定义的长度将通过相关盒模型与使用的维度重定义。 +### 公共参数 -### 图形函数 +一些基本形状函数的语法中公共的参数包括： -以下为当前支持的图形。所有\值都由函数表达式定义，并且遵循属性值定义语法（[value definition syntax](/zh-CN/docs/Web/CSS/Value_definition_syntax)）。 +- `round <'border-radius'>` -- {{cssxref("basic-shape/inset","inset()")}} + - : 为[通过容器 inset 定义的矩形](#通过容器_inset_定义矩形的语法)、[通过距离定义的矩形](#通过距离定义矩形的语法)以及[具有尺寸的矩形](#具有尺寸的矩形语法)定义圆角，使用与 CSS [`border-radius`](/zh-CN/docs/Web/CSS/border-radius) 缩写属性相同的语法。 - - : 定义了一个插进的长方形。 +- `` - ```css - inset( {1,4} [round ]? ) - ``` + - : 定义[圆形](#圆形语法)或[椭圆形](#椭圆形语法)的半径。有效值包括 {{cssxref("length")}}、{{cssxref("percentage")}}、`closest-side`（默认值）和 `farthest-side`。负值无效。 - 上式的前四个参数分别代表了插进的长方形与相关盒模型的上，右，下与左边界和顶点的偏移量。这些参数遵循边际速记语法（the syntax of the margin shorthand），所以给予一个、两个、或四个值都能设置四个偏移量。 + `closest-side` 关键字值使用从形状中心到参考框最近边的长度来创建半径长度。`farthest-side` 关键字值使用从形状中心到参考框最远边的长度。 - 可选参数\用于定义插进长方形顶点的圆弧角度，该参数同上遵循边际速记语法（the syntax of the margin shorthand），给予一个、两个、或四个值都能设置四个偏移量。 +- `` - 如果一对插进图形在通过堆叠产生的高于当前使用维度的维度中（例如，左右插进图像相叠 75%）将会定义一个包围不了任何区域的图形。这种情况会在元素中产生一个空白且平坦的区域。 + - : 定义[圆形](#圆形语法)或[椭圆形](#椭圆形语法)的中心 [``](/zh-CN/docs/Web/CSS/position_value)。如果省略，则默认为 `center`。 -- {{cssxref("basic-shape/circle","circle()")}} +- `` - - : 使用一个半径和一个位置定义一个圆形。 + - : 设置 {{SVGAttr("fill-rule")}} 用于确定由基本形状[多边形](#多边形语法)、[路径](#路径语法)和[形状](#形状语法)定义的形状内部应如何填充。可能的值为 `nonzero`（默认值）和 `evenodd`。 - ```css - circle( []? [at ]? ) - ``` + > [!NOTE] + > 在 {{cssxref("offset-path")}} 中不支持 ``，使用它会使属性无效。 - `` 参数代表了 _r，_ 即圆形的半径，不接受负数作为该参数的值。一个以百分比表示的值将以公式 `sqrt(width^2+height^2)/sqrt(2)`计算，其中 width 与 height 为相关盒模型的宽与高。 +### 通过容器 inset 定义矩形的语法 - {{cssxref("<position>")}} 参数定义了圆心的位置。省缺值为盒模型的中心。 +{{cssxref("basic-shape/inset","inset()")}} 函数创建一个内嵌矩形，其大小由容器四边向内偏移的距离定义，并且可以选择是否带有圆角。 -- {{cssxref("basic-shape/ellipse","ellipse()")}} +```plain +inset( {1,4} [ round <`border-radius`> ]? ) +``` + +当提供全部四个参数时，它们分别代表从参考框向内偏移的顶部、右侧、底部和左侧距离，这些距离定义了内嵌矩形的边缘位置。这些参数遵循 {{cssxref("margin")}} 缩写语法的规则，允许你使用一个、两个、三个或四个值来设置所有四个 inset。 - - : 使用两个半径和一个位置定义一个椭圆。 +如果某个尺寸的两个 inset 之和超过了该尺寸的 100%，则这两个值会按比例减小，使它们的和等于 100%。例如，值 `inset(90% 10% 60% 10%)` 中，顶部 inset 为 `90%`，底部 inset 为 `60%`。这些值会按比例减小为 `inset(60% 10% 40% 10%)`。像这样的形状，如果不包围任何区域并且没有 {{cssxref("shape-margin")}}，则不会影响换行。 - ```css - ellipse( [{2}]? [at ]? ) - ``` +### 通过距离定义矩形的语法 - `` 参数代表了 rx 与 ry，其中 rx 代表了 x 轴方向的半径，ry 代表了 y 轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照，宽作为 rx 的参照值，高作为 ry 的参照值。 +{{cssxref("basic-shape/rect","rect()")}} 函数使用距参考框顶部和左侧边缘的指定距离来定义一个矩形，同时可选择是否带有圆角。 + +```plain +rect( [ | auto ]{4} [ round <`border-radius`> ]? ) +``` - \参数定义了椭圆形圆心的位子。其省缺值为盒模型的中心。 +在使用 `rect()` 函数时，你无需定义矩形的宽度和高度。相反，你通过指定四个值来创建矩形，其尺寸由参考框的大小和这四个偏移值共同决定。每个值可以是 {{cssxref("length")}}、{{cssxref("percentage")}} 或关键字 `auto`。对于顶部和左侧的值，`auto` 关键字被解释为 `0%`；对于底部和右侧的值，`auto` 被解释为 `100%`。 -- {{cssxref("basic-shape/polygon","polygon()")}} +### 具有尺寸的矩形语法 - - : 使用一个 SVG {{SVGAttr("fill-rule")}} 和一组顶点定义一个多边形， +{{cssxref("basic-shape/xywh","xywh()")}} 函数定义了一个矩形，该矩形位于距参考框左边缘（`x`）和上边缘（`y`）的指定距离处，并按照指定的矩形宽度（`w`）和高度（`h`）进行尺寸设置，顺序依此排列，同时可选择是否带有圆角。 - ```css - polygon( [,]? [ ]# ) - ``` +```plain +xywh( {2} {2} [ round <`border-radius`> ]? ) +``` - `` 代表了填充规则（ [filling rule](/zh-CN/docs/Web/SVG/Attribute/fill-rule) ），即，如何填充该多边形。可选值为 nonzero 和 evenodd。该参数的省缺值为 nonzero。 +### 圆形语法 - 每一对在列表中的参数都代表了多边形顶点的坐标，_xi_ 与 _yi_，i 代表顶点的编号，即，第 i 个顶点。 +{{cssxref("basic-shape/circle","circle()")}} 函数使用一个半径和一个位置定义一个圆形。 -- {{cssxref("path","path()")}} +```plain +circle( ? [ at ]? ) +``` - - : 使用一个 SVG {{SVGAttr("fill-rule")}} 和 SVG [路径定义](/zh-CN/docs/Web/SVG/Attribute/d)来定义一个形状。 +### 椭圆形语法 - ```css - path( [,]? ) - ``` +{{cssxref("basic-shape/ellipse","ellipse()")}} 函数使用两个半径和一个位置定义一个椭圆形。 - 可选的 `` 表示 {{SVGAttr("fill-rule")}} 填充规则。可选 `nonzero`（非零环绕规则）和 `evenodd`（奇偶规则）。如果省略，则默认是 `nonzero`。 +```plain +ellipse( [ {2} ]? [ at ]? ) +``` - 参数 \ 是用引号包含的 [SVG Path](/zh-CN/docs/Web/SVG/Attribute/d) 字符串 +`` 参数依次代表椭圆的 x 轴半径 _rx_ 和 y 轴半径 _ry_。这些值可以指定为 {{cssxref("length")}} 或 {{cssxref("percentage")}}。此处的百分比值是根据参考框的使用宽度（对于 rx 值）和使用高度（对于 ry 值）来确定的。如果只提供了一个半径值，则 `ellipse()` 形状函数是无效的。如果没有提供任何值，则默认使用 `50% 50%`。 -上文未曾解释的参数如下： +### 多边形语法 -```css - = | - = | | closest-side | farthest-side +{{cssxref("basic-shape/polygon","polygon()")}} 函数使用 SVG 的 {{SVGAttr("fill-rule")}} 和一组坐标来定义一个多边形。 + +```plain +polygon( <`fill-rule`>?, [ ]# ) +``` + +该函数接受一个由逗号分隔的坐标对列表，每个坐标对由两个空格分隔的 `` 值组成，分别作为 _xi_ 和 _yi_ 对。这些值表示多边形在位置 _i_（即两条线相交的顶点）处的 x 轴和 y 轴坐标。 + +### 路径语法 + +{{cssxref("basic-shape/path","path()")}} 函数使用 SVG 的 {{SVGAttr("fill-rule")}} 和 SVG [路径定义](/zh-CN/docs/Web/SVG/Attribute/d)来定义一个形状。 + +```plain +path( <`fill-rule`>?, ]? ) +``` + +必需的 `` 是一个作为引用字符串的 [SVG 路径](/zh-CN/docs/Web/SVG/Attribute/d)。`path()` 函数不是有效的 {{cssxref("shape-outside")}} 属性值。 + +### 形状语法 + +{{cssxref("basic-shape/shape","shape()")}} 函数使用一个初始起点和一系列形状命令来定义一个形状。 + +```plain +shape( ? from , # ) ``` -为一个圆形或椭圆形定义一个半径。其省缺值为 `closest-side`。 +`from ` 参数表示第一个形状命令的起点，而 `` 则定义了一个或多个形状命令，这些命令类似于 [SVG 路径命令](/zh-CN/docs/Web/SVG/Attribute/d#path_commands)。`shape()` 函数不是有效的 {{cssxref("shape-outside")}} 属性值。 + +## 描述 + +在创建形状时，参考框由使用 `` 值的属性定义。形状的坐标系默认以元素的外边距框的左上角为原点，x 轴向右延伸，y 轴向下延伸。所有以百分比表示的长度都是根据参考框的尺寸来确定的。 + +默认的参考框是 [`margin-box`](/zh-CN/docs/Web/CSS/box-edge#margin-box)，如下图所示。该图展示了一个使用 `shape-outside: circle(50%)` 创建的圆形，在浏览器开发者工具中高亮可见的盒模型的不同部分。此处的形状是相对于外边距框来定义的。 + +![一张图片，展示了使用 Firefox 开发者工具的形状检查器检查的圆形。盒模型的不同部分已被高亮显示。](shapes-reference-box.png) -`closest-side` 即图形中心到盒模型最近一条边之间的距离。对于圆形，该值在任意维度都表示最近的一条边。对于椭圆形，该值为半径维度最近的一条边。 +### 基础形状的计算值 -`farthest-side` 取图形中心到盒模型最远一条边之间的距离作为值。对于圆形，该值在任意维度都是最远的一条边。对于椭圆形，该值为半径维度最远的一条边。 +在 `` 函数中的值按照指定方式计算，考虑以下附加因素： -## 基础图形的计算值 +- 对于任何省略值，将使用其默认值。 +- `circle()` 或 `ellipse()` 中的 {{cssxref("position_value", "<position>")}} 值计算为从参考框左上角开始的一对偏移量：第一个偏移量是水平方向的，第二个偏移量是垂直方向的。每个偏移量都被指定为 {{cssxref("length-percentage")}} 值。 +- `inset()` 中的 [``](/zh-CN/docs/Web/CSS/border-radius) 值被扩展为一个包含八个值的列表，每个值要么是 {{cssxref("length")}}，要么是 {{cssxref("percentage")}}。 +- {{cssxref("basic-shape/inset","inset()")}}、{{cssxref("basic-shape/rect","rect()")}} 和 {{cssxref("basic-shape/xywh","xywh()")}} 函数计算为等效的 `inset()` 函数。 -在 `` 函数中的值通过指定的方式计算，但是有下列情况会出现错误： +### 基本形状的插值 -- 遗漏值（omitted values）参与到了省缺值的计算中。 -- 在 `circle()` 或 `ellipse()` 函数中的{{cssxref("<position>")}}值被作为一对（水平的或垂直的）从左上原点的偏移值，每一次这样的计算将会给出绝对长度与百分比的结合。 -- 一个在 `inset()`中的 [``](/zh-CN/docs/Web/CSS/border-radius) 值，往往被当作一个扩展列表来计算，所有八个 {{cssxref("length")}}值或百分比代表的值都是如此。 +在两个 `` 函数之间进行动画处理时，遵循以下{{Glossary("interpolation", "插值")}}规则。每个 `` 函数的参数值构成一个列表。为了在两个形状之间进行插值，这两个形状必须使用相同的参考框，并且两个 `` 列表中的值的数量和类型必须匹配。 -## 基础图形的插值 +在两个 `` 函数的列表中，每个值都尽可能的基于其计算值进行插值，计算值是 {{cssxref("number")}}、{{cssxref("length")}}、{{cssxref("percentage")}}、{{cssxref("angle")}} 或 {{cssxref("calc", "calc()")}}。如果值不是这些数据类型之一，但在两个进行插值的基本形状函数中相同，例如 `nonzero`，则仍然可以进行插值。 -`` 值之间的动画变化将会遵循以下规则。图形函数的值会被放进一个插入的简易列表中。这些列表中的值将会尽可能地被当作 [``](/zh-CN/docs/Web/CSS/length)、[``](/zh-CN/docs/Web/CSS/percentage)、或 [`calc()`](/zh-CN/docs/Web/CSS/calc) 类型插入.。如果列表中的值不为上述三种类型中的一种，然而却是相同的（比如 `nonzero` 类型的值在多个列表的相同位置出现)，那么这些值将不会被作为插值。 +- **两个形状均为 `ellipse()` 类型或 `circle()` 类型**：如果它们的半径指定为 {{cssxref("length")}} 或 {{cssxref("percentage")}}（而不是 `closest-side` 或 `farthest-side` 等关键字），则对每个相应的值应用插值。 -- 一对的图形需要使用一样的盒模型。 -- 如果一对图形是同一种类型，例如， `ellipse()` 或 `circle()`，并且没有任何半径使用了 `closest-side` 或 `farthest-side` 关键值，那么这些值将会成为相应的图形函数的插值。 -- 如果一对图形都属于 `inset()`类，那么这些值将会成为相应的图形函数的插值。 -- 如果一对图形都属于 `polygon()`类，并且两者有同样数量的顶点，并且使用了相同的填充规则 ``，那么这些值将会成为相应的图形函数的插值。 -- 其余状况将不会出现插值。 +- **两个形状均为 `inset()` 类型**：对每个相应的值应用插值。 + +- **两个形状均为 `polygon()` 类型**：如果它们使用相同的 `` 并且具有相同数量的逗号分隔的坐标对，则对每个相应的值应用插值。 + +- **两个形状均为 `path()` 类型**：如果两个形状中的路径字符串匹配[路径数据命令](/zh-CN/docs/Web/SVG/Attribute/d#path_commands)的数量、类型和顺序，则将每个参数作为 {{cssxref("<number>")}} 应用插值。 + +- **两个形状均为 `shape()` 类型**：如果它们具有相同的命令关键字并且使用相同的 `` 关键字，则对每个相应的值应用插值。如果 `shape()` 用于 {{cssxref("clip-path")}} 属性，则当它们还具有相同的 `` 时，对这两个形状进行插值。 + + - 如果它们使用 `` 或 ``，则控制点的数量必须匹配才能进行插值。 + - 如果它们使用不同 `` 方向的 ``，则插值结果按顺时针方向（`cw`）进行。如果它们使用不同的 `` 关键字，则使用 `large` 值对大小进行插值。 + +- **一个形状为 `path()` 类型，另一个为 `shape()` 类型**：如果路径数据命令的列表在数量和顺序上相同，则对每个相应的值应用插值。插值后的形状是一个 `shape()` 函数，保持相同的路径数据命令列表。 + +在其他所有情况下，不进行插值，动画是离散的。 ## 示例 ### 动画多边形 +在这个示例中，我们使用了[@keyframes](/zh-CN/docs/Web/CSS/@keyframes) at 规则为两个多边形之间的裁剪路径创建动画效果。请注意，这两个多边形必须具有相同数量的顶点，这是此类动画能够正常工作的必要条件。 + #### HTML ```html @@ -174,7 +222,7 @@ div { #### 结果 -{{EmbedLiveSample('动画多边形','340', '340')}} +{{EmbedLiveSample('动画多边形', '340', '340')}} ## 规范 @@ -184,7 +232,9 @@ div { {{Compat}} -## See also +## 参见 -- Properties that use this data type: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [Edit Shape Paths in CSS — Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html) +- 使用此数据类型的属性：{{cssxref("clip-path")}}、{{cssxref("offset-path")}}、{{cssxref("shape-outside")}}。 +- [CSS 形状](/zh-CN/docs/Web/CSS/CSS_shapes)模块 +- [CSS 形状概览](/zh-CN/docs/Web/CSS/CSS_shapes/Overview_of_shapes) +- [在 CSS 中编辑形状路径——Firefox 开发者工具](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)