Update zh-cn translation related to color and gradient

files/zh-cn/web/css/color/index.md

@@ -5,66 +5,81 @@ slug: Web/CSS/color
 
 {{CSSRef}}
 
-`color` CSS 属性设置[颜色值](/zh-CN/docs/Web/CSS/color_value)的前景色以及[文本装饰](/zh-CN/docs/Web/CSS/text-decoration)，并设置{{cssxref("currentcolor")}}值。`currentcolor`可以对其他颜色属性用作不直接的值，比如{{cssxref("border-color")}}。{{EmbedInteractiveExample("pages/css/color.html")}}对于在 HTML 中使用颜色的概述，参考[使用 CSS 对 HTML 元素实现颜色](/zh-CN/docs/)。
+CSS **`color`** 属性设置元素的文本以及[文本装饰](/zh-CN/docs/Web/CSS/text-decoration)的前景色[颜色值](/zh-CN/docs/Web/CSS/color_value)，并设置 [`currentcolor`](/zh-CN/docs/Web/CSS/color_value#currentcolor_关键字) 值。`currentcolor` 可以用作*其他*属性的间接值，且为其他颜色属性（如 {{cssxref("border-color")}}）的默认值。
+
+{{EmbedInteractiveExample("pages/css/color.html")}}
+
+对于在 HTML 中使用颜色的概述，请参考[使用 CSS 为 HTML 元素应用颜色](/zh-CN/docs/Web/CSS/CSS_colors/Applying_color)。
 
 ## 语法
 
 ```css
-/* 关键词 */
+/* 关键字值 */
 color: currentcolor;
 
-/* <named-color>值 */
+/* <named-color> 值 */
 color: red;
 color: orange;
 color: tan;
 color: rebeccapurple;
 
-/* <hex-color>值 */
+/* <hex-color> 值 */
 color: #090;
 color: #009900;
 color: #090a;
 color: #009900aa;
 
-/* <rgb()>值 */
+/* <rgb()> 值 */
 color: rgb(34, 12, 64, 0.6);
 color: rgba(34, 12, 64, 0.6);
 color: rgb(34 12 64 / 0.6);
 color: rgba(34 12 64 / 0.3);
 color: rgb(34 12 64 / 60%);
 color: rgba(34.6 12 64 / 30%);
 
-/* <hsl()>值 */
+/* <hsl()> 值 */
 color: hsl(30, 100%, 50%, 0.6);
 color: hsla(30, 100%, 50%, 0.6);
 color: hsl(30 100% 50% / 0.6);
 color: hsla(30 100% 50% / 0.6);
 color: hsl(30 100% 50% / 60%);
 color: hsla(30.2 100% 50% / 60%);
 
+/* <hwb()> 值 */
+color: hwb(90 10% 10%);
+color: hwb(90 10% 10% / 0.5);
+color: hwb(90deg 10% 10%);
+color: hwb(1.5708rad 60% 0%);
+color: hwb(0.25turn 0% 40% / 50%);
+
 /* 全局值 */
 color: inherit;
 color: initial;
+color: revert;
+color: revert-layer;
 color: unset;
 ```
 
-`color` 属性被指定为一个单个的 {{cssxref("&lt;color&gt;")}}值。
+`color` 属性被指定为 {{cssxref("&lt;color&gt;")}} 类型的单值。
 
-注意值必须是规则的 {{cssxref("color")}}。它不可以是{{cssxref("&lt;gradient&gt;")}}（实际上为{{cssxref("&lt;image&gt;")}}的一部分）。
+注意值必须是一致的 {{cssxref("color")}} 值。它不可以是 {{cssxref("&lt;gradient&gt;")}}（实际上为 {{cssxref("&lt;image&gt;")}} 类型之一）。
 
 ### 值
 
 - {{cssxref("&lt;color&gt;")}}
-  - : 设置元素的文本或装饰的颜色。
+  - : 设置元素的文本和装饰部分的颜色。
+- [`currentcolor`](/zh-CN/docs/Web/CSS/color_value#currentcolor_关键字)
+  - : 将颜色设置为元素的 `color` 属性值。但是，如果设置为 `color` 的值，`currentcolor` 将被视为 `inherit`。
 
-## Accessibility concerns
+## 无障碍考虑
 
-It is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
+有一点很重要，要确保文本颜色与文本所在背景之间的对比度足够高，以便低视力的人群能够阅读页面内容。
 
-Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/intro/wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and [bold](/zh-CN/docs/Web/CSS/font-weight) or larger, or 24px or larger.
+颜色的对比度是通过比较文本和背景颜色值的亮度确定的。要符合当前的 [Web 内容无障碍指南（WCAG）](https://www.w3.org/WAI/intro/wcag)，文本至少要有 4.5:1 的比例，大文本（比如标题）至少要有 3:1 的比例。具有[加粗](/zh-CN/docs/Web/CSS/font-weight)和至少 18.66px 大小，或者具有至少 24px 大小的文本称为大文本。
 
-- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
-- [MDN Understanding WCAG, Guideline 1.4 explanations](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+- [WebAIM：颜色对比度检查器](https://webaim.org/resources/contrastchecker/)
+- [MDN 理解 WCAG，指南 1.4 解释](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [理解成功标准 1.4.3 | W3C 理解 WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 
 ## 形式定义
 
@@ -123,5 +138,5 @@ p {
 ## 参见
 
 - 颜色 {{cssxref("&lt;color&gt;")}} 数据类型
-- 其他颜色相关属性：{{cssxref("background-color")}}、{{cssxref("border-color")}}、{{cssxref("outline-color")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-emphasis-color")}}、{{cssxref("text-shadow")}}、{{cssxref("caret-color")}}、{{cssxref("column-rule-color")}}和{{cssxref("color-adjust")}}
-- [使用 CSS 对 HTML 元素应用颜色](/zh-CN/docs/Web/HTML/Applying_color)
+- 其他颜色相关属性：{{cssxref("background-color")}}、{{cssxref("border-color")}}、{{cssxref("outline-color")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-emphasis-color")}}、{{cssxref("text-shadow")}}、{{cssxref("caret-color")}}、{{cssxref("column-rule-color")}} 和 {{cssxref("color-adjust")}}
+- [使用 CSS 为 HTML 元素应用颜色](/zh-CN/docs/Web/HTML/Applying_color)

files/zh-cn/web/css/color_value/color-contrast/index.md

@@ -0,0 +1,39 @@
+---
+title: color-contrast()
+slug: Web/CSS/color_value/color-contrast
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`color-contrast()`** 函数标记接收一个 {{cssxref("color_value","color")}} 值，并将其与其他的 {{cssxref("color_value","color")}} 值比较，从列表中选择最高对比度的颜色。
+
+## 语法
+
+```css
+color-contrast(wheat vs tan, sienna, #d2691e)
+color-contrast(#008080 vs olive, var(--myColor), #d2691e)
+```
+
+### 值
+
+函数标记：`color-contrast(color vs color-list)`
+
+- `color`
+
+  - : 任何有效的 {{CSSXref("<color>")}} 值。
+
+- `vs`
+
+  - : 字面保留字，作为语法的一部分。
+
+- `color-list`
+
+  - : 由逗号分隔的列表，至少两个值，以与第一个值进行比较。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}

files/zh-cn/web/css/color_value/color-mix/index.md

@@ -0,0 +1,186 @@
+---
+title: color-mix()
+slug: Web/CSS/color_value/color-mix
+---
+
+{{CSSRef}}
+
+**`color-mix()`** 函数标记接收两个 {{cssxref("<color>")}} 值，并返回在指定颜色空间、指定数量混合后的颜色。
+
+## 语法
+
+```css
+color-mix(in lch, plum, pink);
+color-mix(in lch, plum 40%, pink);
+color-mix(in srgb, #34c9eb 20%, white);
+color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
+```
+
+### 值
+
+函数标记：`color-mix(method, color1[ p1], color2[ p2])`
+
+- `method`
+
+  - : 指定插值颜色空间的 {{CSSXref("<color-interpolation-method>")}} 值。
+
+- `color1`、`color2`
+
+  - : 需要混合的 {{CSSXref("<color>")}} 值。
+
+- `p1`、`p2` {{optional_inline}}
+
+  - : `0%` 到 `100%` 之间的 {{CSSXref("<percentage>")}} 值，指定每个颜色混合的数量。这两个值会按照以下的方式规范化：
+
+    - 如果 `p1` 和 `p2` 都省略了，那么 `p1 = p2 = 50%`。
+    - 如果 `p1` 省略，那么 `p1 = 100% - p2`。
+    - 如果 `p2` 省略，那么 `p2 = 100% - p1`。
+    - 如果 `p1 = p2 = 0%`，那么函数无效。
+    - 如果 `p1 + p2 ≠ 100%`，那么 `p1' = p1 / (p1 + p2)`，`p2' = p2 / (p1 + p2)`，其中 `p1'` 和 `p2'` 是规范化后的结果。
+
+### 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 混合两个颜色
+
+在支持的浏览器中，这些项目会有更多蓝色、更少白色，因为混色了更高百分比的 `#34c9eb`。没有给出值时，百分比默认为 50%。
+
+#### HTML
+
+```html
+<ul>
+  <li>0%</li>
+  <li>25%</li>
+  <li>50%</li>
+  <li>75%</li>
+  <li>100%</li>
+  <li></li>
+</ul>
+```
+
+#### CSS
+
+```css hidden
+ul {
+  display: flex;
+  list-style-type: none;
+  font-size: 150%;
+  gap: 10px;
+  border: 2px solid;
+  padding: 10px;
+}
+
+li {
+  padding: 10px;
+  flex: 1;
+  box-sizing: border-box;
+  font-family: monospace;
+  outline: 1px solid #34c9eb;
+  text-align: center;
+}
+```
+
+```css
+li:nth-child(1) {
+  background-color: color-mix(in srgb, #34c9eb 0%, white);
+}
+
+li:nth-child(2) {
+  background-color: color-mix(in srgb, #34c9eb 25%, white);
+}
+
+li:nth-child(3) {
+  background-color: color-mix(in srgb, #34c9eb 50%, white);
+}
+
+li:nth-child(4) {
+  background-color: color-mix(in srgb, #34c9eb 75%, white);
+}
+
+li:nth-child(5) {
+  background-color: color-mix(in srgb, #34c9eb 100%, white);
+}
+
+li:nth-child(6) {
+  background-color: color-mix(in srgb, #34c9eb, white);
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample("混合两个颜色", "100%", 150)}}
+
+### 在 color-mix() 中使用色相插值
+
+使用 shorter 色相插值时，产生的色相角度是在色轮上在输入色相之间采用最短路线时的中间值。
+
+使用 longer 色相插值时，产生的色相角度是在色轮上走较长的路线时的中间值。
+
+更多信息请参考 {{cssxref("&lt;hue-interpolation-method&gt;")}}。
+
+```html
+<div class="color-one">颜色一</div>
+<div class="color-two">颜色二</div>
+<div class="shorter">shorter 混合</div>
+<div class="longer">longer 混合</div>
+```
+
+#### CSS
+
+```css hidden
+body {
+  display: flex;
+  flex-wrap: wrap;
+}
+div {
+  border: 1px solid;
+  font: bold 150% monospace;
+  height: 100px;
+  margin: 10px 5%;
+  width: 30%;
+}
+```
+
+```css
+.color-one {
+  background-color: hsl(10 100% 50%);
+}
+.color-two {
+  background-color: hsl(60 100% 50%);
+}
+.shorter {
+  background-color: color-mix(
+    in hsl shorter hue,
+    hsl(10 100% 50%),
+    hsl(60 100% 50%)
+  );
+}
+.longer {
+  background-color: color-mix(
+    in hsl longer hue,
+    hsl(10 100% 50%),
+    hsl(60 100% 50%)
+  );
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample("在 color-mix() 中使用色相插值", "100%", 250)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{CSSXref("&lt;color&gt;")}}
+- {{CSSXref("&lt;color-interpolation-method&gt;")}}
+- {{cssxref("&lt;hue&gt;")}}

files/zh-cn/web/css/color_value/device-cmyk/index.md

@@ -0,0 +1,46 @@
+---
+title: device-cmyk()
+slug: Web/CSS/color_value/device-cmyk
+---
+
+{{CSSRef}}
+
+**`device-cmyk()`** 函数标记用于以设备依赖的方式表达 CMYK 颜色，指定其青色、品红色、黄色和黑色成分。
+
+创建要输出到特定打印机的材料时，若特定墨水组合的输出的已知的，这种颜色方法非常有用。CSS 处理器可能会尝试近似颜色，但最终结果可能与打印结果不同。
+
+## 语法
+
+```css
+device-cmyk(0 81% 81% 30%);
+device-cmyk(0 81% 81% 30% / .5);
+device-cmyk(0 81% 81% 30% / .5, rgb(178 34 34));
+```
+
+### 值
+
+函数标记：`device-cmyk(C M Y K[ / A][, color])`
+
+- `C`、`M`、`Y`、`K`
+
+  - : {{CSSXref("number")}} 或 {{CSSXref("percentage")}} 值，提供 CMYK 颜色的青色、品红色、黄色和黑色成分。
+
+- `A` {{optional_inline}}
+
+  - : {{CSSXref("<alpha-value>")}} 值，其中 `1` 对应 `100%`（完全不透明）。
+
+- `color` {{optional_inline}}
+
+  - : 可选的后备 {{CSSXref("<color>")}} 值，当用户代理不知道如何将 CMYK 颜色转换为 RGB 颜色时使用。
+
+### 形式语法
+
+{{csssyntax}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}