Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AutoCorrect files/zh-cn/web/css/{g,h,i,j}*/ #5949

Merged
merged 2 commits into from
Jun 1, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion files/zh-cn/web/css/gap/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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#网格间距)_
4 changes: 2 additions & 2 deletions files/zh-cn/web/css/general_sibling_combinator/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ <h2 id="Examples" name="Examples">示例</h2>
color: red;
}</pre>

<p>上面的CSS作用于下面的HTML中:</p>
<p>上面的 CSS 作用于下面的 HTML 中:</p>

<pre class="brush: html">&lt;span&gt;This is not red.&lt;/span&gt;
&lt;p&gt;Here is a paragraph.&lt;/p&gt;
&lt;code&gt;Here is some code.&lt;/code&gt;
&lt;span&gt;And here is a span.&lt;/span&gt;</pre>

<p>则会产生下面的效果:</p>
<p>则会产生下面的效果</p>

<p>This is not red.</p>

Expand Down
26 changes: 13 additions & 13 deletions files/zh-cn/web/css/gradient/conic-gradient/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ translation_of: Web/CSS/gradient/conic-gradient()
## 语法

```css
/* 一个旋转45度的锥形渐变,从蓝色渐变到红色 */
/* 一个旋转 45 度的锥形渐变,从蓝色渐变到红色 */
conic-gradient(from 45deg, blue, red);

/* 一个蓝紫色框:从蓝色渐变到红色,但只有右下象限可见,因为锥形渐变的中心位于左上角 */
Expand All @@ -47,21 +47,21 @@ background: conic-gradient(
- {{CSSxRef("&lt;angle&gt;")}}
- : 在 `from` 关键字之前,以角度作为其值,定义顺时针方向的渐变旋转。
- `<position>`
- : 使用与[background-position](/zh-CN/docs/Web/CSS/background-position) 属性相同的长度、顺序和关键字值,定义渐变的中心。 如果省略,默认值是 `center`,表示渐变是居中的。
- : 使用与 [background-position](/zh-CN/docs/Web/CSS/background-position) 属性相同的长度、顺序和关键字值,定义渐变的中心。如果省略,默认值是 `center`,表示渐变是居中的。
- `<angular-color-stop>`
- : 一个颜色断点的 {{CSSxRef("&lt;color&gt;")}} 值,并且跟随着一个或两个可选的断点位置(一个沿着渐变圆周轴的{{CSSxRef("&lt;angle&gt;")}})。
- `<color-hint>`
- : 颜色中转点是一个 {{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);就是说,它没有天然的或首选的尺寸,也没有首选的比例。它的具体大小将与它所应用的元素的大小相匹配,或者如果设置为元素大小以外的值,则与 `<image>` 的大小相匹配。

要创建重复的锥形渐变来填充360度旋转,应该使用 {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 函数。
要创建重复的锥形渐变来填充 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 @@ -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("&lt;angle&gt;")}}来明确地定义。如果不指定颜色断点的位置,它将位于其前面的颜色断点和后面的颜色断点之间。如果没有为第一个或最后一个颜色断点指定角度,则其值分别为0度和360度。以下两种渐变是等效的:
通过在渐变弧上添加更多角度的颜色断点,可以在多种颜色之间创建高度定制的过渡。颜色断点的位置可以通过使用{{CSSxRef("&lt;angle&gt;")}}来明确地定义。如果不指定颜色断点的位置,它将位于其前面的颜色断点和后面的颜色断点之间。如果没有为第一个或最后一个颜色断点指定角度,则其值分别为 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);
Expand All @@ -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);
Expand Down Expand Up @@ -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)。

## 规范

Expand All @@ -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("&lt;image&gt;")}}
- {{cssxref("image/image","image()")}}
Expand Down
4 changes: 2 additions & 2 deletions files/zh-cn/web/css/gradient/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
---
<div>{{CSSRef}}</div>

<div><strong><code>&lt;gradient&gt;</code></strong> 是一种{{cssxref("&lt;image&gt;")}}CSS数据类型的子类型,用于表现两种或多种颜色的过渡转变。</div>
<div><strong><code>&lt;gradient&gt;</code></strong> 是一种{{cssxref("&lt;image&gt;")}}CSS 数据类型的子类型,用于表现两种或多种颜色的过渡转变。</div>

<div><strong><code>&lt;gradient&gt;</code></strong> <a href="/en-US/docs/CSS/image#no_intrinsic">没有内在尺寸</a>;即,不具备固有或首选的尺寸,也不具备首选的比率。其实际的大小取决于其填充元素的大小。</div>

Expand Down Expand Up @@ -92,7 +92,7 @@ <h4 id="重复渐变">重复渐变</h4>

<h2 id="插值">插值</h2>

<p>与其他的颜色插值一样,颜色渐变也通过Alpha预乘(alpha-permultiplied)计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。(在使用<a href="/en-US/docs/Web/CSS/color_value#transparent_keyword">transparent keyword</a>时,敬请注意一些没有使用这种计算方式的旧浏览器。)</p>
<p>与其他的颜色插值一样,颜色渐变也通过 Alpha 预乘 (alpha-permultiplied) 计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。(在使用<a href="/en-US/docs/Web/CSS/color_value#transparent_keyword">transparent keyword</a>时,敬请注意一些没有使用这种计算方式的旧浏览器。)</p>

<h2 id="规格"><strong>规格</strong></h2>

Expand Down
Loading