From ff1a02eab709e205a97ad3c94f1cde101a3f22a3 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Tue, 31 May 2022 23:01:15 +0800 Subject: [PATCH 1/2] AutoCorrect files/zh-cn/web/css/{g,h,i,j}*/ --- files/zh-cn/web/css/gap/index.md | 2 +- .../css/general_sibling_combinator/index.html | 4 +- .../web/css/gradient/conic-gradient/index.md | 26 ++++----- files/zh-cn/web/css/gradient/index.html | 4 +- .../css/gradient/linear-gradient/index.html | 54 +++++++++---------- .../css/gradient/radial-gradient/index.html | 12 ++--- .../repeating-linear-gradient/index.html | 24 ++++----- .../repeating-radial-gradient/index.html | 14 ++--- files/zh-cn/web/css/grid-area/index.html | 6 +-- .../web/css/grid-auto-columns/index.html | 2 +- files/zh-cn/web/css/grid-auto-rows/index.html | 28 +++++----- files/zh-cn/web/css/grid-column/index.html | 20 +++---- files/zh-cn/web/css/grid-row/index.html | 4 +- .../web/css/grid-template-areas/index.html | 26 ++++----- .../web/css/grid-template-columns/index.html | 16 +++--- .../web/css/grid-template-rows/index.html | 16 +++--- files/zh-cn/web/css/grid-template/index.html | 6 +-- files/zh-cn/web/css/grid/index.html | 4 +- .../web/css/hanging-punctuation/index.html | 10 ++-- files/zh-cn/web/css/height/index.html | 2 +- files/zh-cn/web/css/hyphens/index.html | 2 +- files/zh-cn/web/css/id_selectors/index.html | 6 +-- .../web/css/image-orientation/index.html | 20 +++---- .../zh-cn/web/css/image-rendering/index.html | 14 ++--- files/zh-cn/web/css/image/index.html | 50 ++++++++--------- files/zh-cn/web/css/inherit/index.html | 4 +- files/zh-cn/web/css/inheritance/index.html | 8 +-- files/zh-cn/web/css/initial_value/index.html | 2 +- files/zh-cn/web/css/inline-size/index.html | 6 +-- .../css/inline_formatting_context/index.html | 4 +- files/zh-cn/web/css/integer/index.html | 10 ++-- files/zh-cn/web/css/isolation/index.html | 8 +-- .../zh-cn/web/css/justify-content/index.html | 8 +-- files/zh-cn/web/css/justify-items/index.html | 6 +-- files/zh-cn/web/css/justify-self/index.html | 10 ++-- 35 files changed, 219 insertions(+), 219 deletions(-) diff --git a/files/zh-cn/web/css/gap/index.md b/files/zh-cn/web/css/gap/index.md index 6732133f40227b..9e6d339ab775b8 100644 --- a/files/zh-cn/web/css/gap/index.md +++ b/files/zh-cn/web/css/gap/index.md @@ -186,5 +186,5 @@ gap: unset; ## 参见 -- 相关 CSS 属性: {{cssxref("row-gap")}}、{{cssxref("column-gap")}} +- 相关 CSS 属性：{{cssxref("row-gap")}}、{{cssxref("column-gap")}} - 网格布局指南：_[网格布局基本概念 - 网格间距](/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#网格间距)_ diff --git a/files/zh-cn/web/css/general_sibling_combinator/index.html b/files/zh-cn/web/css/general_sibling_combinator/index.html index 33c640aa3105d9..94beb8919f6bc1 100644 --- a/files/zh-cn/web/css/general_sibling_combinator/index.html +++ b/files/zh-cn/web/css/general_sibling_combinator/index.html @@ -22,14 +22,14 @@

示例

color: red; } -

上面的CSS作用于下面的HTML中:

+

上面的 CSS 作用于下面的 HTML 中：

<span>This is not red.</span>
 <p>Here is a paragraph.</p>
 <code>Here is some code.</code>
 <span>And here is a span.</span>
-

则会产生下面的效果:

+

则会产生下面的效果：

This is not red.

diff --git a/files/zh-cn/web/css/gradient/conic-gradient/index.md b/files/zh-cn/web/css/gradient/conic-gradient/index.md index ad4e6951f7fb1d..6e58d264fe2759 100644 --- a/files/zh-cn/web/css/gradient/conic-gradient/index.md +++ b/files/zh-cn/web/css/gradient/conic-gradient/index.md @@ -22,7 +22,7 @@ translation_of: Web/CSS/gradient/conic-gradient() ## 语法 ```css -/* 一个旋转45度的锥形渐变，从蓝色渐变到红色 */ +/* 一个旋转 45 度的锥形渐变，从蓝色渐变到红色 */ conic-gradient(from 45deg, blue, red); /* 一个蓝紫色框：从蓝色渐变到红色，但只有右下象限可见，因为锥形渐变的中心位于左上角 */ @@ -47,21 +47,21 @@ background: conic-gradient( - {{CSSxRef("<angle>")}} - : 在 `from` 关键字之前，以角度作为其值，定义顺时针方向的渐变旋转。 - `` - - : 使用与[background-position](/zh-CN/docs/Web/CSS/background-position) 属性相同的长度、顺序和关键字值，定义渐变的中心。 如果省略，默认值是 `center`，表示渐变是居中的。 + - : 使用与 [background-position](/zh-CN/docs/Web/CSS/background-position) 属性相同的长度、顺序和关键字值，定义渐变的中心。如果省略，默认值是 `center`，表示渐变是居中的。 - `` - : 一个颜色断点的 {{CSSxRef("<color>")}} 值，并且跟随着一个或两个可选的断点位置（一个沿着渐变圆周轴的{{CSSxRef("<angle>")}}）。 - `` - : 颜色中转点是一个 {{Glossary("interpolation")}} 提示，它定义了在相邻颜色之间渐变如何进行。长度定义了渐变色应在两个颜色断点之间的哪一点到达颜色过渡的中点。如果省略，颜色转换的中点是两个颜色断点之间的中点。 -> **备注：** 渲染颜色中间点的规则（[color stops in CSS gradients](#gradient_with_multiple_color_stops)）与[SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)一致。 +> **备注：** 渲染颜色中间点的规则（[color stops in CSS gradients](#gradient_with_multiple_color_stops)）与 [SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients) 一致。 ## 描述 和任意渐变一样，锥形渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#description)；就是说，它没有天然的或首选的尺寸，也没有首选的比例。它的具体大小将与它所应用的元素的大小相匹配，或者如果设置为元素大小以外的值，则与 `` 的大小相匹配。 -要创建重复的锥形渐变来填充360度旋转，应该使用 {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 函数。 +要创建重复的锥形渐变来填充 360 度旋转，应该使用 {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 函数。 -因为 `` 属于 `` 数据类型, 它们只能用在能使用 `` 的地方。因此，`conic-gradient()` 在 {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("<color>")}} 数据类型的属性上不起作用。 +因为 `` 属于 `` 数据类型，它们只能用在能使用 `` 的地方。因此，`conic-gradient()` 在 {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("<color>")}} 数据类型的属性上不起作用。 > **备注：** 为什么它被称为“锥形”渐变？如果色块的一侧比另一侧亮得多，则从上面看，它可能看起来像一个圆锥体。 @@ -71,22 +71,22 @@ background: conic-gradient( ![沿着锥形渐变的圆周和径向渐变的轴的颜色断点](screenshot_2018-11-29_21.09.19.png) -锥形渐变是通过指示旋转角度、渐变中心，然后指定颜色断点列表来指定的。 与线性渐变和径向渐变不同，线性渐变和径向渐变的颜色断点是通过指定 [length](/zh-CN/docs/Web/CSS/length) 来放置的，而锥形渐变的颜色断点是通过 [angle](/zh-CN/docs/Web/CSS/angle) 来指定的。单位包括度的 `deg`、梯度的 `grad`、弧度的 `rad`和圈的 `turn`。在一个圆中有 360 度，400 个梯度，2π 弧度，1 圈。支持锥形渐变的浏览器也接受百分比值，100% 等于 360 度，但这不在规范中。 +锥形渐变是通过指示旋转角度、渐变中心，然后指定颜色断点列表来指定的。与线性渐变和径向渐变不同，线性渐变和径向渐变的颜色断点是通过指定 [length](/zh-CN/docs/Web/CSS/length) 来放置的，而锥形渐变的颜色断点是通过 [angle](/zh-CN/docs/Web/CSS/angle) 来指定的。单位包括度的 `deg`、梯度的 `grad`、弧度的 `rad`和圈的 `turn`。在一个圆中有 360 度，400 个梯度，2π 弧度，1 圈。支持锥形渐变的浏览器也接受百分比值，100% 等于 360 度，但这不在规范中。 与径向渐变类似，锥形渐变语法用于将渐变中心定位在图像内部甚至外部的任何位置。位置的值类似于两个值的 background-position 语法。 -渐变的弧度是渐变的周长。渐变或弧度的 _start point_ 方向是北，或12:00pm方向。然后通过 _from_ 角度来旋转。渐变的颜色由倾斜的颜色断点、它们的起点、终点，以及介于两者之间的可选的倾斜的颜色断点决定。颜色之间的过渡可以通过相邻颜色的颜色断点之间的颜色提示来改变。 +渐变的弧度是渐变的周长。渐变或弧度的 _start point_ 方向是北，或 12:00pm 方向。然后通过 _from_ 角度来旋转。渐变的颜色由倾斜的颜色断点、它们的起点、终点，以及介于两者之间的可选的倾斜的颜色断点决定。颜色之间的过渡可以通过相邻颜色的颜色断点之间的颜色提示来改变。 #### 自定义渐变 -通过在渐变弧上添加更多角度的颜色断点，可以在多种颜色之间创建高度定制的过渡。颜色断点的位置可以通过使用{{CSSxRef("<angle>")}}来明确地定义。如果不指定颜色断点的位置，它将位于其前面的颜色断点和后面的颜色断点之间。如果没有为第一个或最后一个颜色断点指定角度，则其值分别为0度和360度。以下两种渐变是等效的： +通过在渐变弧上添加更多角度的颜色断点，可以在多种颜色之间创建高度定制的过渡。颜色断点的位置可以通过使用{{CSSxRef("<angle>")}}来明确地定义。如果不指定颜色断点的位置，它将位于其前面的颜色断点和后面的颜色断点之间。如果没有为第一个或最后一个颜色断点指定角度，则其值分别为 0 度和 360 度。以下两种渐变是等效的： ```css conic-gradient(red, orange, yellow, green, blue); conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg); ``` -默认情况下，颜色从一个颜色断点处的颜色平滑过渡到下一个颜色断点处的颜色，颜色之间的中点是颜色过渡之间的中点。通过添加颜色提示，可以将此颜色过渡中点移动到两个颜色断点之间的任何点，指示颜色过渡的中间位置。以下是从起点到10%标记的纯红色，在80%的转弯中从红色过渡到蓝色，最后10%为纯蓝色。然而，红色到蓝色渐变变化的中点位于20%标记处，而不是在没有80度或20%颜色提示的情况下发生的50%标记处。 +默认情况下，颜色从一个颜色断点处的颜色平滑过渡到下一个颜色断点处的颜色，颜色之间的中点是颜色过渡之间的中点。通过添加颜色提示，可以将此颜色过渡中点移动到两个颜色断点之间的任何点，指示颜色过渡的中间位置。以下是从起点到 10% 标记的纯红色，在 80% 的转弯中从红色过渡到蓝色，最后 10% 为纯蓝色。然而，红色到蓝色渐变变化的中点位于 20% 标记处，而不是在没有 80 度或 20% 颜色提示的情况下发生的 50% 标记处。 ```css conic-gradient(red 40grad, 80grad, blue 360grad); @@ -99,13 +99,13 @@ conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn); ``` -颜色断点应按升序排列。值较低的后续颜色断点将覆盖上一个颜色断点的值，从而创建硬过渡。以下内容在30%标记处从红色变为黄色，然后在35%的渐变范围内从黄色变为蓝色： +颜色断点应按升序排列。值较低的后续颜色断点将覆盖上一个颜色断点的值，从而创建硬过渡。以下内容在 30% 标记处从红色变为黄色，然后在 35% 的渐变范围内从黄色变为蓝色： ```css conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); ``` -使用锥形渐变还可以创建其他效果，棋盘格就是其中之一。通过创建具有左上角和右下角白色象限以及左下角和右上角黑色象限的象限，然后重复16次渐变（四次横切，四次向下），就可以制作棋盘。 +使用锥形渐变还可以创建其他效果，棋盘格就是其中之一。通过创建具有左上角和右下角白色象限以及左下角和右上角黑色象限的象限，然后重复 16 次渐变（四次横切，四次向下），就可以制作棋盘。 ```css conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); @@ -221,7 +221,7 @@ div { ### 更多锥形渐变的例子 -更多示例请参见 [使用CSS渐变](/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients)。 +更多示例请参见 [使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients)。 ## 规范 @@ -233,7 +233,7 @@ div { ## 参见 -- [使用CSS渐变](/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients) - 其他渐变函数：{{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} - {{cssxref("<image>")}} - {{cssxref("image/image","image()")}} diff --git a/files/zh-cn/web/css/gradient/index.html b/files/zh-cn/web/css/gradient/index.html index 12780822722426..0337daaf793011 100644 --- a/files/zh-cn/web/css/gradient/index.html +++ b/files/zh-cn/web/css/gradient/index.html @@ -5,7 +5,7 @@ ---
{{CSSRef}}
-
<gradient> 是一种{{cssxref("<image>")}}CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。
+
<gradient> 是一种{{cssxref("<image>")}}CSS 数据类型的子类型，用于表现两种或多种颜色的过渡转变。
<gradient> 没有内在尺寸；即，不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元素的大小。
@@ -92,7 +92,7 @@

重复渐变

插值

-

与其他的颜色插值一样，颜色渐变也通过Alpha预乘(alpha-permultiplied)计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。（在使用transparent keyword时，敬请注意一些没有使用这种计算方式的旧浏览器。）

+

与其他的颜色插值一样，颜色渐变也通过 Alpha 预乘 (alpha-permultiplied) 计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。（在使用transparent keyword时，敬请注意一些没有使用这种计算方式的旧浏览器。）

规格

diff --git a/files/zh-cn/web/css/gradient/linear-gradient/index.html b/files/zh-cn/web/css/gradient/linear-gradient/index.html index 14c652a9716a1f..ebafb118f77162 100644 --- a/files/zh-cn/web/css/gradient/linear-gradient/index.html +++ b/files/zh-cn/web/css/gradient/linear-gradient/index.html @@ -25,12 +25,12 @@ /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); -/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ +/* 从下到上，从蓝色开始渐变、到高度 40% 位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}  
-

如同其他gradient函数一般，linear-gradient() 函数没有内在尺寸；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

+

如同其他 gradient 函数一般，linear-gradient() 函数没有内在尺寸；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

提示：利用{{cssxref("repeating-linear-gradient")}}函数可以实现线形重复渐变效果。
@@ -48,7 +48,7 @@

线形渐变的构成

关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质，有时候被叫做不可思议的顶点效应：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。

-

不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，Web开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。

+

不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，Web 开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。

当颜色中间点的位置被隐式定义，它被放置在位于它之前的点和位于它之后的点之间的中间位置处。利用{{cssxref("<length>")}}或者{{cssxref("<percentage>")}}数据类型可以显示定义一个位置。

@@ -56,23 +56,23 @@

线形渐变的构成

linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);看看 -

默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置。下面的示例是从起始点到10%的位置标记红色，从90%到结束标记蓝色。在10%到90%之间，颜色从红色过渡到蓝色，然而过渡的中点是在30%的标记上，而不是在没有30%中转点的情况下会默认为50%。

+

默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置。下面的示例是从起始点到 10% 的位置标记红色，从 90% 到结束标记蓝色。在 10% 到 90% 之间，颜色从红色过渡到蓝色，然而过渡的中点是在 30% 的标记上，而不是在没有 30% 中转点的情况下会默认为 50%。

linear-gradient(red 10%, 30%, blue 90%);

如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。

-

颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在40%的位置，然后过渡从黄色到蓝色终止于65%的位置处。

+

颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在 40% 的位置，然后过渡从黄色到蓝色终止于 65% 的位置处。

linear-gradient(red 40%, yellow 30%, blue 65%);
-

允许颜色多个颜色终止位置。通过在CSS声明中包含两个位置，可以将一个颜色声明为两个相邻的颜色终止。以下三个梯度是相等的:

+

允许颜色多个颜色终止位置。通过在 CSS 声明中包含两个位置，可以将一个颜色声明为两个相邻的颜色终止。以下三个梯度是相等的：

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
 linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
 linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
-

默认情况下，如果不带0%终止的颜色，则在该点声明的第一个颜色。类似地，最后一种颜色将持续到100%标记，或者如果在最后一个没有声明长度，则在100%标记处。

+

默认情况下，如果不带 0% 终止的颜色，则在该点声明的第一个颜色。类似地，最后一种颜色将持续到 100% 标记，或者如果在最后一个没有声明长度，则在 100% 标记处。

语法

@@ -80,12 +80,12 @@

值

<side-or-corner>
-
描述渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。
- to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
+
描述渐变线的起始点位置。它包含 to 和两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。关键词的先后顺序无影响，且都是可选的。
+ to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
<angle>
用角度值指定渐变的方向（或角度）。角度顺时针增加。 
<linear-color-stop>
-
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
+
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS 渐变的颜色渲染采取了与 SVG 相同的规则。
@@ -116,28 +116,28 @@

正式语法

语法历史

-

linear-gradient的语法由2008年实施的first Apple proposal发展而来。

+

linear-gradient的语法由 2008 年实施的first Apple proposal发展而来。

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
-

在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的CSS值。W3C并未收到相关草案。

+

在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的 CSS 值。W3C 并未收到相关草案。

-

一个替代语法在2009年由Mozilla提出并实现。这个语法需要两个CSS函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为：

+

一个替代语法在 2009 年由 Mozilla 提出并实现。这个语法需要两个 CSS 函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为：

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-

新的语法不需要to()、from()和color-stop()函数，所以这些函数被丢弃。而top/bottom与left/right的顺序也被标记为不重要，所以Mozilla移除了必需首先定义top/bottom的限制。

+

新的语法不需要to()、from()和color-stop()函数，所以这些函数被丢弃。而top/bottom与left/right的顺序也被标记为不重要，所以Mozilla 移除了必需首先定义top/bottom的限制。

新的语法仍然有一个缺点：它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后，它被增加到CSS Images Values and Content Replacement Level 3 draft in 2011-02-17。

  • 原生支持{{ cssxref("<angle>") }}允许任何方向的渐变
    • -
  • 定义magic corner算法，允许使用简便的方式定义端点的颜色，从而简化了开发者的工作
    • +
  • 定义 magic corner 算法，允许使用简便的方式定义端点的颜色，从而简化了开发者的工作
-

在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被Webkit和Trident（IE）实现。

+

在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被 Webkit 和 Trident（IE）实现。

linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
@@ -149,13 +149,13 @@

语法历史

以上应当是最终语法。

-

在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终Apple的提案显示，带前缀的语法都使用极坐标定义{{ cssxref("<angle>") }}参数，导致了0deg指向东方。为了与CSS的其他部分保持一致，标准将0deg指向北方。为了防止使用前缀版本属性的站点不至于崩溃，它们保持原始的角度定义（0deg指向东方）。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下，Gecko给所有语法都加上前缀，不带前缀且没有to关键词的语法会被丢弃。

+

在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终 Apple 的提案显示，带前缀的语法都使用极坐标定义{{ cssxref("<angle>") }}参数，导致了0deg指向东方。为了与CSS的其他部分保持一致，标准将0deg指向北方。为了防止使用前缀版本属性的站点不至于崩溃，它们保持原始的角度定义（0deg指向东方）。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下，Gecko 给所有语法都加上前缀，不带前缀且没有 to 关键词的语法会被丢弃。

范例

-

例 45度渐变

+

例 45 度渐变

-

可以为渐变轴某个位置指定某个颜色，这些位置可被称为“颜色中间点（color-stops）”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内，每个颜色都表现为一条垂直于渐变轴的直线。在下图中，渐变轴从左上角出发并且呈45度。渐变轴上定义了红色和蓝色两个颜色中间点。

+

可以为渐变轴某个位置指定某个颜色，这些位置可被称为“颜色中间点（color-stops）”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内，每个颜色都表现为一条垂直于渐变轴的直线。在下图中，渐变轴从左上角出发并且呈 45 度。渐变轴上定义了红色和蓝色两个颜色中间点。

<div style="width: 200px; height: 200px;"></div>
@@ -163,9 +163,9 @@

例 45度渐变

background: linear-gradient(45deg, red, blue); } -

{{EmbedLiveSample("45度渐变",120,120)}}

+

{{EmbedLiveSample("45 度渐变",120,120)}}

-

从60％的梯度线开始的渐变

+

从 60％的梯度线开始的渐变

有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。

@@ -177,11 +177,11 @@

从60％的梯度线开始的渐变

Result:

-

{{EmbedLiveSample("从60％的梯度线开始的渐变")}}

+

{{EmbedLiveSample("从 60％的梯度线开始的渐变")}}

具有多个颜色停止的渐变

-

如果第一个颜色中间点没有 <length> 或 <percentage>属性,那么它默认为0%。如果最后一个颜色中间点没有 <length> 或者 <percentage>属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

+

如果第一个颜色中间点没有 <length> 或 <percentage>属性，那么它默认为 0%。如果最后一个颜色中间点没有 <length> 或者 <percentage>属性，则默认为 100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后，如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小，那它的位置会按照离它最近的一个颜色中间点来计算。

@@ -197,7 +197,7 @@

Result:

包含多个颜色中间点的渐变

-

如果第一个颜色中间点没有定义长度或百分比，它将包含缺省值0。如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值100%。如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。

+

如果第一个颜色中间点没有定义长度或百分比，它将包含缺省值 0。如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值 100%。如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。

颜色中间点必须被按顺序定义。第一个和最后一个被分配为默认值之后，如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。

@@ -222,7 +222,7 @@

Result:

{{EmbedLiveSample("使用透明度")}}

-

如果所有点和长度都使用固定单位（而不是相对于background-size的值指定的百分比或关键字），则渐变背景不受 {{Cssxref("background-size")}} 的影响。

+

如果所有点和长度都使用固定单位（而不是相对于 background-size 的值指定的百分比或关键字），则渐变背景不受 {{Cssxref("background-size")}} 的影响。

跨浏览器实施渐变

@@ -237,10 +237,10 @@

跨浏览器实施渐变

} -

-moz-前缀的规则用于兼容Fx 3.6 to Fx 15的火狐浏览器。 -webkit-前缀的规则用于兼容在Android 4.3以前版本、iOS 6.1以前版本、Safari 6。当使用带前缀的规则时，不要加“to”关键字。

+

-moz-前缀的规则用于兼容 Fx 3.6 to Fx 15 的火狐浏览器。 -webkit-前缀的规则用于兼容在 Android 4.3 以前版本、iOS 6.1 以前版本、Safari 6。当使用带前缀的规则时，不要加“to”关键字。

-

Notes：如果将<body>标签的background-image属性设置为线性渐变linear-gradient，除非您还设置文档根标签（例如<html>标签）的min-height属性，否则渐变不会填充浏览器屏幕到100％。

+

Notes：如果将<body>标签的 background-image 属性设置为线性渐变linear-gradient，除非您还设置文档根标签（例如<html>标签）的min-height属性，否则渐变不会填充浏览器屏幕到 100％。

规范

diff --git a/files/zh-cn/web/css/gradient/radial-gradient/index.html b/files/zh-cn/web/css/gradient/radial-gradient/index.html index 3a9e63508bebf9..0ac1ae7b539b1c 100644 --- a/files/zh-cn/web/css/gradient/radial-gradient/index.html +++ b/files/zh-cn/web/css/gradient/radial-gradient/index.html @@ -17,23 +17,23 @@ ---

{{CSSRef}}

-

radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。

+

radial-gradient() CSS 函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个 CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。

{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}

与其它渐变相同，径向渐变是一个不固定尺寸的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。

-

如要创建重复的径向渐变来填充容器，请使用CSS的{{ Cssxref("repeating-radial-gradient") }} 方法。

+

如要创建重复的径向渐变来填充容器，请使用 CSS 的{{ Cssxref("repeating-radial-gradient") }} 方法。

因为 <gradient> 属于 <image> 类型，所以它可以用于任何适用于 <image> 的地方。正是因为这样，radial-gradient() 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("<color>")}} 数据类型。

radial gradient 的组成

-

径向渐变(Radial gradients)由其中心点、边缘形状轮廓、两个或多个色值结束点（color stops）定义而成。  

+

径向渐变 (Radial gradients) 由其中心点、边缘形状轮廓、两个或多个色值结束点（color stops）定义而成。  

为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。

-

色彩结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。

+

色彩结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表 100％）。每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。

语法

@@ -51,7 +51,7 @@

值

<size>
渐变的尺寸大小。包含的值见下表。
<color-stop>
-
表示某个确定位置的固定色值，包含一个{{cssxref("<color>")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
+
表示某个确定位置的固定色值，包含一个{{cssxref("<color>")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值）。百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
<extent-keyword>
关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
@@ -71,7 +71,7 @@

值

farthest-side - 与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。 + 与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。 farthest-corner diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html index b9e09acb59d9d9..864476548a1aac 100644 --- a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html +++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html @@ -17,18 +17,18 @@ ---
{{CSSRef}}
-

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的{{cssxref("<image>")}}， 这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象, 这是一个特殊的{{cssxref("<image>")}}类型。

+

CSS 函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的{{cssxref("<image>")}}， 这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器。这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象，这是一个特殊的{{cssxref("<image>")}}类型。

-
/* 一个倾斜45度的重复线性渐变,
+
/* 一个倾斜 45 度的重复线性渐变，
    从蓝色开始渐变到红色 */
 repeating-linear-gradient(45deg, blue, red);
 
-/* 一个从右下角到左上角的重复线性渐变,
+/* 一个从右下角到左上角的重复线性渐变，
    从蓝色开始渐变到红色 */
 repeating-linear-gradient(to left top, blue, red);
 
-/* 一个由下至上的重复线性渐变,
-   从蓝色开始，40%后变绿，
+/* 一个由下至上的重复线性渐变，
+   从蓝色开始，40% 后变绿，
    最后渐变到红色 */
 repeating-linear-gradient(0deg, blue, green 40%, red);
 

@@ -37,7 +37,7 @@
 
 
每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

 
-
与其他渐变一样，线形重复渐变没有提供 固定的尺寸；即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

+
与其他渐变一样，线形重复渐变没有提供 固定的尺寸；即，它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

 
 

 
提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。

@@ -49,16 +49,16 @@ 
值

 
 

  
<side-or-corner>

- 
描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。

+ 
描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置 left or right，第二个指出水平位置 top or bottom。关键词的先后顺序无影响，且都是可选的。

  


- to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。

+ to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
{{cssxref("<angle>")}}
用角度值指定渐变的方向（或角度）。角度顺时针增加。 
<color-stop>
-
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
+
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS 渐变的颜色渲染采取了与 SVG 相同的规则。
-

提示：渲染颜色中间点的规则CSS渐变中的色标 与SVG渐变一致.

+

提示：渲染颜色中间点的规则CSS 渐变中的色标 与SVG 渐变一致。

@@ -166,6 +166,6 @@

浏览器兼容性

了解更多

    -
  • 使用CSS渐变
    • -
  • 其他渐变方法: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}
    • +
  • 使用 CSS 渐变
    • +
  • 其他渐变方法：{{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}
diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html index 2a2dcf8524d46d..cf0393f050087a 100644 --- a/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html +++ b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html @@ -17,16 +17,16 @@ ---
{{CSSRef}}
-

CSS函数repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是  {{cssxref("<gradient>")}} 数据类型的对象， 是一种特殊的{{cssxref("<image>")}}类型。

+

CSS 函数repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是  {{cssxref("<gradient>")}} 数据类型的对象，是一种特殊的{{cssxref("<image>")}}类型。

-
/* 一个从容器中心点开始的重复渐变,
+
/* 一个从容器中心点开始的重复渐变，
    从红色开始，渐变到蓝色，再渐变到绿色 */
 repeating-radial-gradient(circle at center, red 0, blue, green 30px);
 

 
 
每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

 
-
与其他渐变一样，线形重复渐变没有提供固定的尺寸； 即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

+
与其他渐变一样，线形重复渐变没有提供固定的尺寸；即，它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

 
 

 
提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}} 以及使用{{cssxref("<color>")}} 数据类型的地方。

@@ -72,11 +72,11 @@ 
值

  
 
  

- 
提示: 早期的草案中还包含其他关键字(cover and contain) ，分别相当于标准关键字 farthest-corner 和 closest-side,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

+ 
提示： 早期的草案中还包含其他关键字 (cover and contain) ，分别相当于标准关键字 farthest-corner 和 closest-side,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

  

  
  
<color-stop>

- 
表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。

+ 
表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。

 
 
 
形式语法

@@ -123,7 +123,7 @@ 
黑白相间的渐变

 
 
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

 
-
Farthest-corner渐变

+
Farthest-corner 渐变

 
 
 
div {
@@ -178,5 +178,5 @@ 
参阅：

 
 
    
  
  • 使用渐变
    • 
- 
  • 其他渐变方法: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}
    • 
+ 
  • 其他渐变方法：{{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}
    • 
 

diff --git a/files/zh-cn/web/css/grid-area/index.html b/files/zh-cn/web/css/grid-area/index.html
index 9d7549993bb954..33baa48ebf8d35 100644
--- a/files/zh-cn/web/css/grid-area/index.html
+++ b/files/zh-cn/web/css/grid-area/index.html
@@ -34,7 +34,7 @@
 grid-area: unset;
 

 
-
如果指定了4个 <grid-line> 的值，grid-row-start 会被设为第一个值，grid-column-start 为第二个值， grid-row-end 为第三个值，grid-column-end 为第四个值。

+
如果指定了 4 个 <grid-line> 的值，grid-row-start 会被设为第一个值，grid-column-start 为第二个值， grid-row-end 为第三个值，grid-column-end 为第四个值。

 
 
当 grid-column-end 被忽略时，若 grid-column-start 为一 {{cssxref("<custom-ident>")}}（自定义关键字数据类型）， grid-column-end 则为该 <custom-ident>；否则为 auto。

 
@@ -77,7 +77,7 @@ 
值

  
该关键字表明该属性未指定该如何纺织网格项目。网格项目会被以默认跨度（span）1自动放置。

  
<custom-ident> 自定义关键字数据类型

  
如果存在以 '<custom-ident>-start'/'<custom-ident>-end' 命名的自定义基线，它会将第一个这样的基线贡献给网格单元以布置。
- 
注意: 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 grid-row: foo; 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 foo-start/foo-end 命名的其他基线）。

+ 
注意： 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 grid-row: foo; 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 foo-start/foo-end 命名的其他基线）。

 
  
否则，它就会被当作整数 1 与 <custom-ident> 一起指定。

  

@@ -89,7 +89,7 @@ 
值

  
{{cssxref("<custom-ident>")}}，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。

  
  

- 
如果忽略 <integer> ，它就默认设为 1。它的值也不能为0。

+ 
如果忽略 <integer> ，它就默认设为 1。它的值也不能为 0。

  

 
 
diff --git a/files/zh-cn/web/css/grid-auto-columns/index.html b/files/zh-cn/web/css/grid-auto-columns/index.html
index cd3a925b778c4a..5726aea2185f3f 100644
--- a/files/zh-cn/web/css/grid-auto-columns/index.html
+++ b/files/zh-cn/web/css/grid-auto-columns/index.html
@@ -75,7 +75,7 @@ 
属性值

  
minmax(min, max)

  
定义一个尺寸范围，即大于或等于 min 值，并且小于或等于 max 值。如果 max 值小于 min 值，那么 max 值会被忽略并且最终表现为 min 值。最大值可以设置为网格轨道系数值<flex> ，但最小值则不行。

  
fit-content(argument)

- 
相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算(即 minmax(auto, max-content))，除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。

+ 
相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算 (即 minmax(auto, max-content))，除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。

  
auto

  
如果该网格轨道为最大时，该属性等同于 <max-content> ，为最小时，则等同于 <min-content> 。

  

diff --git a/files/zh-cn/web/css/grid-auto-rows/index.html b/files/zh-cn/web/css/grid-auto-rows/index.html
index 536e625a8a7d8a..1ce7d1d3d9e72b 100644
--- a/files/zh-cn/web/css/grid-auto-rows/index.html
+++ b/files/zh-cn/web/css/grid-auto-rows/index.html
@@ -5,17 +5,17 @@
   - CSS
   - CSS Grid
   - CSS Property
-  - CSS属性
-  - CSS网格
+  - CSS 属性
+  - CSS 网格
   - Reference
   - 参考
 translation_of: Web/CSS/grid-auto-rows
 ---
-
CSS属性 grid-auto-rows 用于指定隐式创建的行轨道大小。

+
CSS 属性 grid-auto-rows 用于指定隐式创建的行轨道大小。

 
 
{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}

 
-
+
 
 
如果定位到某行中的网格元素没有使用 {{cssxref("grid-template-rows")}}来指定大小，则会隐式创建{{glossary("grid", "grid")}} 轨道来保存它。这可能在显示定位到超出范围的行，或者由自动放置算法创建额外的行时发生。

 
@@ -64,7 +64,7 @@ 
取值

  
<length>

  
一个非负的长度。

  
<percentage>

- 
相对于网格窗口块尺寸的非负 {{cssxref("percentage", "<percentage>")}} 值。如果网格容器的块尺寸是不确定的, 则百分比值将被视为 auto。

+ 
相对于网格窗口块尺寸的非负 {{cssxref("percentage", "<percentage>")}} 值。如果网格容器的块尺寸是不确定的，则百分比值将被视为 auto。

  
<flex>

  
非负的、以 fr 为单位的维度指定轨道的弹性因子。每个 <flex>-尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。
  
当使用在 minmax() 符号外时，意味着最小值为 auto (例： minmax(auto, <flex>)).

@@ -74,7 +74,7 @@ 
取值

  
min-content

  
关键词，指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。

  
minmax(min, max)

- 
函数符号，定义一个不小于min且不大于max的尺寸范围。如果max比min小，则max会被忽略，函数会被录作min处理。作为最大值，<flex> 值设置了轨道的弹性因子。作为最小值，会被当作0处理（或者最小内容——当网格容器指定了尺寸为最小内容）。

+ 
函数符号，定义一个不小于min且不大于max的尺寸范围。如果max比min小，则max会被忽略，函数会被录作min处理。作为最大值，<flex> 值设置了轨道的弹性因子。作为最小值，会被当作 0 处理（或者最小内容——当网格容器指定了尺寸为最小内容）。

  
auto

  
关键字，当用来指定最大值时与最大内容一致，当用来指定最小值时，它表示轨道中所有网格元素最小尺寸中的最大值（由{{cssxref("min-width")}}/{{cssxref("min-height")}}指定）。

  

@@ -88,7 +88,7 @@ 
形式语法

 
 
示例

 
-
HTML内容

+
HTML 内容

 
 
<div id="grid">
   <div id="item1"></div>
@@ -96,7 +96,7 @@ 
HTML内容

   <div id="item3"></div>
 </div>

 
-
CSS内容

+
CSS 内容

 
 
#grid {
   width: 200px;
@@ -143,7 +143,7 @@ 
浏览器兼容性

 
相关链接

 
 
@@ -151,8 +151,8 @@ 
相关链接

 

 
-
否则，将其视为与<custom-ident>一起指定了整数1。

+
否则，将其视为与<custom-ident>一起指定了整数 1。

 
 


  <integer> && <custom-ident>?

 
 


- 将第n条网格线贡献到网格项目的位置。如果给定一个负整数，则从显式网格的末端开始，反向计数。

+ 将第 n 条网格线贡献到网格项目的位置。如果给定一个负整数，则从显式网格的末端开始，反向计数。

 
 
如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则假定所有隐式网格线都具有该名称，以查找该位置。

 
 
{{cssxref("integer")}}的值为0无效。

 
 
span && [ <integer> || <custom-ident> ]

- 将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘n行。

+ 将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘 n 行。

  如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则为计算此跨度，假定与搜索方向相对应的显式网格侧的所有隐式网格线均具有该名称。

 
-
如果省略<integer>，则默认为1。负整数或0无效。

+
如果省略<integer>，则默认为1。负整数或 0 无效。

 
 
Formal syntax

 
@@ -99,9 +99,9 @@ 
CSS Content

 
 
{{EmbedLiveSample("Example", "100%", "100px")}}

 
-
IE问题

+
IE 问题

 
-
IE11不支持自动放置网格项目。 除非用-ms-{{cssxref("grid-column")}}和-ms-{{cssxref("grid-row")}}显式注释，否则所有项目都以网格的第一行/列结尾。 可以使用一些JavaScript来启用自动注释：源存储库。

+
IE11 不支持自动放置网格项目。除非用-ms-{{cssxref("grid-column")}}和-ms-{{cssxref("grid-row")}}显式注释，否则所有项目都以网格的第一行/列结尾。可以使用一些 JavaScript 来启用自动注释：源存储库。

 
 
规范

 
diff --git a/files/zh-cn/web/css/grid-row/index.html b/files/zh-cn/web/css/grid-row/index.html
index 0cdadb68968167..3fa7eeab8ba6c4 100644
--- a/files/zh-cn/web/css/grid-row/index.html
+++ b/files/zh-cn/web/css/grid-row/index.html
@@ -51,7 +51,7 @@ 
值

  
表示对网格的布置行为不做干涉，即自动布置，自动的 span 或者默认 span 值为 1。

  
<custom-ident>

  
如果存在自定义的基线名（'<custom-ident>-start'/'<custom-ident>-end'），它就将第一个这样的基线贡献给网格单元。
- 
注意: 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 grid-row: foo; 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 foo-start/foo-end 命名的其他基线）。

+ 
注意： 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 grid-row: foo; 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 foo-start/foo-end 命名的其他基线）。

 
  
否则，它就会被当作整数 1 与 <custom-ident> 一起指定。

  

@@ -61,7 +61,7 @@ 
值

  
span && [ <integer> || <custom-ident> ]

  
为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是 <custom-ident>，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。

  

- 
如果忽略 <integer> ，它就默认设为 1。它的值也不能为0。

+ 
如果忽略 <integer> ，它就默认设为 1。它的值也不能为 0。

  

 
 
diff --git a/files/zh-cn/web/css/grid-template-areas/index.html b/files/zh-cn/web/css/grid-template-areas/index.html
index 89b09a064f0dd9..bf88e63fa8be7c 100644
--- a/files/zh-cn/web/css/grid-template-areas/index.html
+++ b/files/zh-cn/web/css/grid-template-areas/index.html
@@ -3,12 +3,12 @@
 slug: Web/CSS/grid-template-areas
 tags:
   - CSS
-  - CSS属性
-  - CSS布局
-  - CSS网格
+  - CSS 属性
+  - CSS 布局
+  - CSS 网格
 translation_of: Web/CSS/grid-template-areas
 ---
-
grid-template-areas CSS 属性是网格区域 {{glossary("grid areas")}} 在CSS中的特定命名。

+
grid-template-areas CSS 属性是网格区域 {{glossary("grid areas")}} 在 CSS 中的特定命名。

 
 
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}

 
@@ -18,7 +18,7 @@
 
Those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, and their shorthands {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.

 
 
-
网格区块(grid areas)和网格项(grid item)沒有关联，但是它们可以和一些网格定位属性(grid-placement properties)关联起来，比如{{cssxref("grid-row-start")}}， {{cssxref("grid-row-end")}}， {{cssxref("grid-column-start")}}和{{cssxref("grid-column-end")}}；也可以和一些速记(shorthands)属性关联起来，比如{{cssxref("grid-row")}}，{{cssxref("grid-column")}} 和 {{cssxref("grid-area")}}。

+
网格区块 (grid areas) 和网格项 (grid item) 沒有关联，但是它们可以和一些网格定位属性 (grid-placement properties) 关联起来，比如{{cssxref("grid-row-start")}}， {{cssxref("grid-row-end")}}， {{cssxref("grid-column-start")}}和{{cssxref("grid-column-end")}}；也可以和一些速记 (shorthands) 属性关联起来，比如{{cssxref("grid-row")}}，{{cssxref("grid-column")}} 和 {{cssxref("grid-area")}}。

 
 
Syntax[语法]

 
@@ -40,9 +40,9 @@ 
 Values[可选值]

 
 

  
none

- 
网格容器没有定义任何的网格区块(grid areas)。

+ 
网格容器没有定义任何的网格区块 (grid areas)。

  
{{cssxref("<string>")}}+

- 
每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元(cell)会生成一列。多个同名的，跨越相邻行或列的单元称为网格区块(grid area)。非矩形的网格区块是无效的。

+ 
每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元 (cell) 会生成一列。多个同名的，跨越相邻行或列的单元称为网格区块 (grid area)。非矩形的网格区块是无效的。

 

 
 
形式化语法

@@ -63,7 +63,7 @@ 
HTML

 
CSS

 
 
#page {
-  display: grid; /* 1.设置display为grid */
+  display: grid; /* 1.设置 display 为 grid */
   width: 100%;
   height: 250px;
   grid-template-areas: "head head"
@@ -74,7 +74,7 @@ 
CSS

 }
 
 #page > header {
-  grid-area: head; /* 4. 指定当前元素所在的区域位置, 从grid-template-areas选取值 */
+  grid-area: head; /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
   background-color: #8ca0ff;
 }
 
@@ -125,13 +125,13 @@ 
浏览器兼容性

 
 
{{Compat("css.properties.grid-template-areas")}}

 
-
[1] 从Chrome 29.0 开始支持，在 chrome://flags 中打开"开启实验性网络平台特性"(experimental Web Platform features)。从 Chrome {{CompatChrome("57.0")}} 开始默认开启。

+
[1] 从 Chrome 29.0 开始支持，在 chrome://flags 中打开"开启实验性网络平台特性"(experimental Web Platform features)。从 Chrome {{CompatChrome("57.0")}} 开始默认开启。

 
-
[2] 从Gecko 40.0 {{geckoRelease("40.0")}} 开始支持, 在设置中打开layout.css.grid.enabled，默认是 false。从Gecko 52.0 {{geckoRelease("52.0")}}开始默认开启。

+
[2] 从 Gecko 40.0 {{geckoRelease("40.0")}} 开始支持，在设置中打开layout.css.grid.enabled，默认是 false。从 Gecko 52.0 {{geckoRelease("52.0")}}开始默认开启。

 
-
[3] EdgeHTML 16已支持。Internet Explorer 和 Edge 实现了一个旧版本的规范，旧的规范中没有定义这个属性。

+
[3] EdgeHTML 16 已支持。Internet Explorer 和 Edge 实现了一个旧版本的规范，旧的规范中没有定义这个属性。

 
-
[4] 从 Opera 28.0开始支持，在 chrome://flags中打开"开启实验性网络平台特性"(experimental Web Platform features)。从Opera {{CompatOpera(44)}}开始默认开启。

+
[4] 从 Opera 28.0 开始支持，在 chrome://flags中打开"开启实验性网络平台特性"(experimental Web Platform features)。从 Opera {{CompatOpera(44)}}开始默认开启。

 
 
See also

 
diff --git a/files/zh-cn/web/css/grid-template-columns/index.html b/files/zh-cn/web/css/grid-template-columns/index.html
index ae140954ea0209..cad866d27725ed 100644
--- a/files/zh-cn/web/css/grid-template-columns/index.html
+++ b/files/zh-cn/web/css/grid-template-columns/index.html
@@ -51,23 +51,23 @@ 
值

  
非负值且相对于网格容器的 {{cssxref("percentage", "<百分比>")}}。 如果网格容器的尺寸大小依赖网格轨道的大小（比如 inline-grid ），则百分比值将被视为auto。

  
为了遵守网格的百分比，网格轨道本身定义的大小，将自动被调整为相对网格容器大小，并且是以最小量将网格轨道调整到最终的大小。

  
{{cssxref("<flex>")}}

- 
非负值，用单位 fr 来定义网格轨道大小的弹性系数。 每个定义了 <flex> 的网格轨道会按比例分配剩余的可用空间。当外层用一个 minmax() 表示时，它将是一个自动最小值(即 minmax(auto, <flex>) ) .

+ 
非负值，用单位 fr 来定义网格轨道大小的弹性系数。 每个定义了 <flex> 的网格轨道会按比例分配剩余的可用空间。当外层用一个 minmax() 表示时，它将是一个自动最小值 (即 minmax(auto, <flex>) ) .

  
max-content

  
是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。

  
min-content

  
是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。

  
{{cssxref("minmax", "minmax(min, max)")}}

- 
是一个来定义大小范围的属性，大于等于min值，并且小于等于max值。如果max值小于min值，则该值会被视为min值。最大值可以设置为网格轨道系数值<flex> ，但最小值则不行。

+ 
是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。如果 max 值小于 min 值，则该值会被视为 min 值。最大值可以设置为网格轨道系数值<flex> ，但最小值则不行。

  

- 
Note:  该规范在将来可能会允许设置最小值为 flex ，也会调整网格轨道算法(track sizing algorithm) 计算出正确的大小。

+ 
Note:  该规范在将来可能会允许设置最小值为 flex ，也会调整网格轨道算法 (track sizing algorithm) 计算出正确的大小。

  

  
auto

  
如果该网格轨道为最大时，该属性等同于 <max-content> ，为最小时，则等同于 <min-content> 。

  

- 
Note: 网格轨道大小为 auto (且只有为 auto ) 时，才可以被属性{{cssxref("align-content")}} 和 {{cssxref("justify-content")}} 拉伸 。

+ 
Note: 网格轨道大小为 auto (且只有为 auto ) 时，才可以被属性{{cssxref("align-content")}} 和 {{cssxref("justify-content")}} 拉伸。

  

  
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}

- 
相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算(即 minmax(auto, max-content))，除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。

+ 
相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算 (即 minmax(auto, max-content))，除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。

  
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}

  
表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式。

 
@@ -135,9 +135,9 @@ 
浏览器兼容性

 
参见