-
Notifications
You must be signed in to change notification settings - Fork 8.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update zh-cn translation related to color and gradient (#14819)
Co-authored-by: A1lo <[email protected]> Co-authored-by: Jason Ren <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
4 people
authored
Sep 6, 2023
1 parent
f45255e
commit 64a570a
Showing
18 changed files
with
2,019 additions
and
1,497 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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("<hue-interpolation-method>")}}。 | ||
|
|
||
| ```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("<color>")}} | ||
| - {{CSSXref("<color-interpolation-method>")}} | ||
| - {{cssxref("<hue>")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}} |
Oops, something went wrong.