Skip to content

Commit

Permalink
修正并补充翻译
Browse files Browse the repository at this point in the history
  • Loading branch information
SolidBlock-cn committed Aug 2, 2023
1 parent 585d19a commit 0701d87
Show file tree
Hide file tree
Showing 7 changed files with 219 additions and 147 deletions.
316 changes: 194 additions & 122 deletions files/zh-cn/web/css/css_images/using_css_gradients/index.md

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions files/zh-cn/web/css/gradient/conic-gradient/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Web/CSS/gradient/conic-gradient

{{CSSRef}}

[CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) **`conic-gradient()`** 创建了一个由渐变组成的图像,渐变的颜色变换围绕一个中心点旋转(而不是从中心辐射)。锥形渐变的例子包括饼图和色轮 {{glossary("color wheel", "color wheels")}}. `conic-gradient()` 函数的结果是 {{CSSxRef("<gradient>")}} 数据类型的对象,是一种特殊的 {{CSSxRef("<image>")}} 数据类型。
[CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) **`conic-gradient()`** 创建一个由渐变组成的图像,渐变的颜色围绕一个中心点旋转(而不是从中心辐射)进行过渡。锥形渐变的例子包括饼图和色轮 {{glossary("color wheel", "color wheels")}}`conic-gradient()` 函数的结果是 {{CSSxRef("<gradient>")}} 数据类型的对象,这是一种特殊的 {{CSSxRef("<image>")}} 数据类型。

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

Expand Down Expand Up @@ -43,15 +43,15 @@ background: conic-gradient(
- `<color-hint>`
- : {{Glossary("interpolation")}} 提示,它定义了在相邻颜色之间渐变如何进行。长度定义了渐变色应在两个颜色断点之间的哪一点到达颜色过渡的中点。如果省略,颜色转换的中点是两个颜色断点之间的中点。

> **备注:** [CSS 渐变中的颜色断点](#gradient_with_multiple_color_stops)的渲染与 [SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)遵循相同的规则
> **备注:** [CSS 渐变中的颜色断点](#gradient_with_multiple_color_stops)的渲染与 [SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)中的颜色断点遵循相同的规则
## 描述

和任意渐变一样,锥形渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#description);就是说,它没有天然的或首选的尺寸,也没有首选的比例。它的具体大小将与它所应用的元素的大小相匹配,或者如果设置为元素大小以外的值,则与 `<image>` 的大小相匹配
与其他渐变一样,锥形渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#description),也就是说没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小

要创建重复的锥形渐变来填充 360 度旋转,应该使用 {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 函数。

因为 `<gradient>` 属于 `<image>` 数据类型,它们只能用在能使用 `<image>` 的地方。因此,`conic-gradient()` 在 {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("&lt;color&gt;")}} 数据类型的属性上不起作用。
由于 `<gradient>` 属于 `<image>` 数据类型,因此只能用在能使用 `<image>` 的地方。因此,`conic-gradient()` 在 {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("&lt;color&gt;")}} 数据类型的属性上不起作用。

> **备注:** 为什么它被称为“锥形”渐变?如果色块的一侧比另一侧亮得多,则从上面看,它可能看起来像一个圆锥体。
Expand All @@ -61,15 +61,15 @@ 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 度,但这不在规范中。
锥形渐变是通过指示旋转角度、渐变中心,然后指定颜色断点列表来指定的。与线性渐变和径向渐变不同,线性渐变和径向渐变的颜色断点是通过[长度](/zh-CN/docs/Web/CSS/length)指定的,而锥形渐变的颜色断点是通过[角度](/zh-CN/docs/Web/CSS/angle)指定的。单位包括角度 `deg`、梯度 `grad`、弧度 `rad` 和整圈的 `turn`。在一个圆中有 360 度,400 个梯度,2π 弧度,1 圈。支持锥形渐变的浏览器也接受百分比值,100% 等于 360 度,但这不在规范中。

与径向渐变类似,锥形渐变语法用于将渐变中心定位在图像内部甚至外部的任何位置。位置的值类似于两个值的 background-position 语法。

渐变的弧度是渐变的周长。渐变或弧度的 _start point_ 方向是北,或 12:00pm 方向。然后通过 _from_ 角度来旋转。渐变的颜色由倾斜的颜色断点、它们的起点、终点,以及介于两者之间的可选的倾斜的颜色断点决定。颜色之间的过渡可以通过相邻颜色的颜色断点之间的颜色提示来改变。

#### 自定义渐变

通过在渐变弧上添加更多角度的颜色断点,可以在多种颜色之间创建高度定制的过渡。颜色断点的位置可以通过使用{{CSSxRef("&lt;angle&gt;")}}来明确地定义。如果不指定颜色断点的位置,它将位于其前面的颜色断点和后面的颜色断点之间。如果没有为第一个或最后一个颜色断点指定角度,则其值分别为 0 度和 360 度。以下两种渐变是等效的:
通过在渐变弧上添加更多角度的颜色断点,可以在多种颜色之间创建高度定制的过渡。颜色断点的位置可以通过使用 {{CSSxRef("&lt;angle&gt;")}} 来明确地定义。如果不指定颜色断点的位置,它将位于其前面的颜色断点和后面的颜色断点之间。如果没有为第一个或最后一个颜色断点指定角度,则其值分别为 0 度和 360 度。以下两种渐变是等效的:

```css
conic-gradient(red, orange, yellow, green, blue);
Expand Down
6 changes: 3 additions & 3 deletions files/zh-cn/web/css/gradient/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ slug: Web/CSS/gradient

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

CSS 渐变 [没有内在尺寸](/zh-CN/docs/CSS/image#no_intrinsic);即,不具备固有或首选的尺寸,也不具备首选的比率。其实际的大小取决于其填充元素的大小
CSS 渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#description),也就是说没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小

## 语法

`<gradient>` 数据类型是以下面列出的函数类型中的一个定义的
`<gradient>` 数据类型是由下面列出的函数类型中的一个定义的

### 线性渐变

Expand All @@ -25,7 +25,7 @@ CSS 渐变 [没有内在尺寸](/zh-CN/docs/CSS/image#no_intrinsic);即,不

### 重复的渐变

重复的渐变会尽可能重复渐变以填满指定的区域。锥形渐变是使用 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} 和 {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} 函数生成的。
重复的渐变会尽可能重复渐变以填满指定的区域。重复渐变是使用 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} 和 {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} 函数生成的。

### 锥形渐变

Expand Down
8 changes: 4 additions & 4 deletions files/zh-cn/web/css/gradient/linear-gradient/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ original_slug: Web/CSS/gradient/linear-gradient()

{{CSSRef}}

**`linear-gradient()`** [CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) 用于创建一个表示两种或多种颜色沿一条直线进行线性过渡的像,其结果属于 {{cssxref("&lt;gradient&gt;")}} 数据类型,这是一种特别的 {{cssxref("&lt;image&gt;")}} 数据类型。
**`linear-gradient()`** [CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) 创建一个由两种或多种颜色沿一条直线进行线性过渡的图像,其结果是 {{cssxref("&lt;gradient&gt;")}} 数据类型的对象,这是一种特殊的 {{cssxref("&lt;image&gt;")}} 数据类型。

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

Expand Down Expand Up @@ -41,15 +41,15 @@ linear-gradient(45deg, red 0 50%, blue 50% 100%);
- `<color-hint>`
- : 颜色中转点是一个插值提示,它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略,颜色转换的中点是两个颜色停止之间的中点。

> **备注:** [CSS 渐变中的颜色点](#Gradient_with_multiple_color_stops) 的渲染与 [SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients) 在一致的规则
> **备注:** [CSS 渐变中的颜色点](#Gradient_with_multiple_color_stops) 的渲染与 [SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)中的颜色点遵循相同的规则
## 描述

和其他渐变一样,线性渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#no_intrinsic);即,它不具备固有的或首选的尺寸,也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配
和其他渐变一样,线性渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#description),也就是说没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小

要创建一个能够填满窗口的渐变,请使用 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} 函数。

由于 `<gradient>` 属于 `<image>` 数据类型,因此只能在使用 [`<image>`](/zh-CN/docs/Web/CSS/image) 的地方使用。因此,`linear-gradient()` 不会用于 {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("&lt;color&gt;")}} 数据类型的属性
由于 `<gradient>` 属于 `<image>` 数据类型,因此只能用在能使用 [`<image>`](/zh-CN/docs/Web/CSS/image) 的地方。因此,`linear-gradient()` {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("&lt;color&gt;")}} 数据类型的属性上不起作用

### 线性渐变的构成

Expand Down
8 changes: 4 additions & 4 deletions files/zh-cn/web/css/gradient/radial-gradient/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Web/CSS/gradient/radial-gradient

{{CSSRef}}

**`radial-gradient()`** [CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions)创建一个图像,该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成,其的形状可以是圆形或椭圆形。函数的结果是 {{cssxref("&lt;gradient&gt;")}} 数据类型的对象,这是一种特别的 {{cssxref("&lt;image&gt;")}}。
**`radial-gradient()`** [CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions)创建一个图像,该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成,其形状可以是圆形或椭圆形。函数的结果是 {{cssxref("&lt;gradient&gt;")}} 数据类型的对象,这是一种特殊的 {{cssxref("&lt;image&gt;")}}。

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

Expand Down Expand Up @@ -48,13 +48,13 @@ radial-gradient(circle at center, red 0, blue, green 100%)

## 描述

与其他渐变相同,径向渐变是一个[不固定尺寸](/zh-CN/docs/Web/CSS/image#no_intrinsic)的图像,即它没有首选的大小,也没有首选的比例。具体大小将由它所应用的元素的大小决定
与其他渐变一样,径向渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#description),也就是说没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小

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

因为 `<gradient>` 属于 `<image>` 类型,所以它可以用于任何适用于 `<image>` 的地方。正是因为这样`radial-gradient()` 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("&lt;color&gt;")}} 数据类型
由于 `<gradient>` 属于 `<image>` 数据类型,因此只能用在能使用 `<image>` 的地方。因此`radial-gradient()` {{Cssxref("background-color")}} 及其他使用 {{cssxref("&lt;color&gt;")}} 数据类型的属性上不起作用

## 径向渐变的组成
## 径向渐变的合成

![解释径向的图:虚拟辐射线从中点开始水平。椭圆渐变,以及最终的形状,与声明它的框具有相同的纵横比](radial_gradient.png)

Expand Down
10 changes: 5 additions & 5 deletions files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ original_slug: Web/CSS/gradient/repeating-linear-gradient()

{{CSSRef}}

[CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) **`repeating-linear-gradient()`** 创建一个由重复线性渐变组成的{{cssxref("&lt;image&gt;")}},这是一个类似 {{cssxref("linear-gradient")}} 的函数,并且采用相同的参数,但是它会在所有方向上重复渐变以覆盖其整个容器。这个函数的结果是一个 {{cssxref("&lt;gradient&gt;")}} 数据类型的对象,这是一个特殊的 {{cssxref("&lt;image&gt;")}} 类型。
[CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) **`repeating-linear-gradient()`** 创建一个由重复线性渐变组成的 {{cssxref("&lt;image&gt;")}},类似于 {{cssxref("linear-gradient")}},并且采用相同的参数,但是它会在所有方向上重复渐变以覆盖其整个容器。这个函数的结果是 {{cssxref("&lt;gradient&gt;")}} 数据类型的对象,这是一种特殊的 {{cssxref("&lt;image&gt;")}} 类型。

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

每次重复时,颜色点位置的偏移量都是基准渐变长度(最后一个颜色点和第一个之间的距离)的倍数。因此,最后颜色点的颜色应该与第一个颜色点的颜色保持一致;如果不一致的话,会导致非常突兀的渐变效果。这可以通过将第一个颜色值重复添加到最后一个颜色值中来修改。

与其他渐变一样,线形重复渐变[没有固定的尺寸](/zh-CN/docs/CSS/image#no_intrinsic);即,它没有原始尺寸或首选尺寸,也没有首选的比列。它将自适应于对应元素的尺寸
与其他渐变一样,线形重复渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#description),也就是说没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小

因为 `<gradient>` 属于 `<image>` 数据类型,所以只能在可以使用 `<image>` 的地方使用它们。因此 `repeating-linear-gradient()` 不适用于{{Cssxref("background-color")}} 以及使用 {{cssxref("&lt;color&gt;")}} 数据类型的地方
由于 `<gradient>` 属于 `<image>` 数据类型,因此只能用在可以使用 `<image>` 的地方。因此`repeating-linear-gradient()` {{Cssxref("background-color")}} 以及其他使用 {{cssxref("&lt;color&gt;")}} 数据类型上不起作用

## 语法

Expand Down Expand Up @@ -48,7 +48,7 @@ repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
- `<color-hint>`
- : color-hint 是插值提示,定义了两个相邻的颜色点之间的渐变如何进行。长度定义了两个颜色点之间的渐变颜色应该在哪里到达颜色过渡过程的中点。如果省略,那么颜色过渡的中点就是两个颜色点之间的中点。

> **备注:** [CSS 渐变中的颜色眯点](#Gradient_with_multiple_color_stops) 的渲染与 [SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)中的颜色点遵循相同的规则。
> **备注:** [CSS 渐变中的颜色点](#Gradient_with_multiple_color_stops) 的渲染与 [SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)中的颜色点遵循相同的规则。
### 形式语法

Expand Down Expand Up @@ -107,7 +107,7 @@ body {

{{EmbedLiveSample('十个重复水平线', 120, 120)}}

因为最后一个颜色点是 10%,且渐变是竖直的,因为重复渐变的每个渐变都是高度的 10%,正好满足 10% 个水平线。
因为最后一个颜色点是 10%,且渐变是竖直的,因为重复渐变的每个渐变都是高度的 10%,正好满足 10 个水平线。

> **备注:** 更多示例请参见[使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ original_slug: Web/CSS/gradient/repeating-radial-gradient()

{{CSSRef}}

[CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) **`repeating-radial-gradient()`** 创建一个从原点辐射的重复渐变组成的 {{cssxref("&lt;image&gt;")}}。它类似于 {{cssxref("radial-gradient")}} 并且采用相同的参数,但是它会在所有方向上无限重复颜色,以覆盖其整个容器,类似于 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}。函数的结果是 {{cssxref("&lt;gradient&gt;")}} 数据类型的对象,这是一种特殊的 {{cssxref("&lt;image&gt;")}} 类型。
[CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) **`repeating-radial-gradient()`** 创建一个从原点辐射的重复渐变组成的 {{cssxref("&lt;image&gt;")}},类似于 {{cssxref("radial-gradient")}} 并且采用相同的参数,但是它会在所有方向上无限重复颜色,以覆盖其整个容器,类似于 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}。函数的结果是 {{cssxref("&lt;gradient&gt;")}} 数据类型的对象,这是一种特殊的 {{cssxref("&lt;image&gt;")}} 类型。

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

每次重复时,颜色点的位置的偏移量都是基准渐变长度(最后一个颜色点和第一个之间的距离)的倍数。因此,最后颜色点的颜色应该与第一个颜色的颜色保持一致;如果不一致的话,会导致非常突兀的渐变效果,可以将第一个颜色点重复添加到最后一个中来解决。

与其他渐变一样,线形重复渐变[没有固定的尺寸](/zh-CN/docs/CSS/image#no_intrinsic);即,它没有原始尺寸或首选尺寸,也没有首选的比列。它将自适应于对应元素的尺寸
与其他渐变一样,径向重复渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#description),也就是说没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小

因为 `<gradient>` 属于 `<image>` 数据类型,所以只能在可以使用 `<image>` 的地方使用它们。因此`repeating-linear-gradient()` 不适用于 {{Cssxref("background-color")}} 以及其他使用 {{cssxref("&lt;color&gt;")}} 数据类型的属性中
由于 `<gradient>` 属于 `<image>` 数据类型,因此只能用在可以使用 `<image>` 的地方。因此`repeating-radial-gradient()` {{Cssxref("background-color")}} 以及其他使用 {{cssxref("&lt;color&gt;")}} 数据类型上不起作用

## 语法

Expand Down

0 comments on commit 0701d87

Please sign in to comment.