diff --git a/files/zh-cn/web/css/color/index.md b/files/zh-cn/web/css/color/index.md index 0c88cd8c6d1466..f8cfae7ba03ddc 100644 --- a/files/zh-cn/web/css/color/index.md +++ b/files/zh-cn/web/css/color/index.md @@ -5,27 +5,31 @@ 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; -/* 值 */ +/* 值 */ color: red; color: orange; color: tan; color: rebeccapurple; -/* 值 */ +/* 值 */ color: #090; color: #009900; color: #090a; color: #009900aa; -/* 值 */ +/* 值 */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); @@ -33,7 +37,7 @@ color: rgba(34 12 64 / 0.3); color: rgb(34 12 64 / 60%); color: rgba(34.6 12 64 / 30%); -/* 值 */ +/* 值 */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); @@ -41,30 +45,41 @@ color: hsla(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); +/* 值 */ +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("<color>")}}值。 +`color` 属性被指定为 {{cssxref("<color>")}} 类型的单值。 -注意值必须是规则的 {{cssxref("color")}}。它不可以是{{cssxref("<gradient>")}}（实际上为{{cssxref("<image>")}}的一部分）。 +注意值必须是一致的 {{cssxref("color")}} 值。它不可以是 {{cssxref("<gradient>")}}（实际上为 {{cssxref("<image>")}} 类型之一）。 ### 值 - {{cssxref("<color>")}} - - : 设置元素的文本或装饰的颜色。 + - : 设置元素的文本和装饰部分的颜色。 +- [`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("<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) +- 其他颜色相关属性：{{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) diff --git a/files/zh-cn/web/css/color_value/color-contrast/index.md b/files/zh-cn/web/css/color_value/color-contrast/index.md new file mode 100644 index 00000000000000..3ab2bed2f5699b --- /dev/null +++ b/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}} diff --git a/files/zh-cn/web/css/color_value/color-mix/index.md b/files/zh-cn/web/css/color_value/color-mix/index.md new file mode 100644 index 00000000000000..a808e363ff4122 --- /dev/null +++ b/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 +
    +
  • 0%
    • +
  • 25%
    • +
  • 50%
    • +
  • 75%
    • +
  • 100%
    • +
  • +
+``` + +#### 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 +
颜色一
+
颜色二
+
shorter 混合
+
longer 混合
+``` + +#### 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>")}} diff --git a/files/zh-cn/web/css/color_value/device-cmyk/index.md b/files/zh-cn/web/css/color_value/device-cmyk/index.md new file mode 100644 index 00000000000000..c88fb17bdd9664 --- /dev/null +++ b/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}} diff --git a/files/zh-cn/web/css/color_value/hsl/index.md b/files/zh-cn/web/css/color_value/hsl/index.md new file mode 100644 index 00000000000000..a55f52a9c5915b --- /dev/null +++ b/files/zh-cn/web/css/color_value/hsl/index.md @@ -0,0 +1,156 @@ +--- +title: hsl() +slug: Web/CSS/color_value/hsl +--- + +{{CSSRef}} + +**`hsl()`** 函数标记根据其*色相*、*饱和度*和*明度*来表达 {{glossary("RGB", "sRGB")}} 颜色。可选的 _alpha_ 成分代表了颜色的透明度。 + +> **备注：** 旧版的 `hsla()` 语法是 `hsl()` 的别称，接收相同的参数，行为也是相同的。 + +{{EmbedInteractiveExample("pages/css/function-hsl.html")}} + +使用 `hsl()` 来定义*互补色*可以用一个公式来完成，因为它们位于{{glossary("color wheel","色环")}}中同一直径上。如果一个颜色的色相度是 `θ`，那么其互补色的色相角就是 `180deg - θ`。 + +## 语法 + +```css +hsl(120deg 75% 25%) +hsl(120deg 75% 25% / 0.6) +``` + +此函数也接受旧版的语法，即所有的值都是用逗号分隔的。 + +### 值 + +函数标记：`hsl(H S L[ / A])` + +- `H` + - : {{CSSXref("<number>")}}、{{CSSXref("<angle>")}} 或者关键字 `none`，代表色相角。关于此类型的更多细节可以参见 {{CSSXref("<hue>")}} 文档。 +- `S` + - : {{CSSXref("<percentage>")}} 或者关键字 `none`，代表饱和度。在这里，`100%` 是完全饱和，而 `0%` 是完全不饱和（灰色）。 +- `L` + - : {{CSSXref("<percentage>")}} 或者关键字 `none`，代表明度。在这里，`100%` 是白色，`0%` 是黑色，`50%` 是“正常”。 +- `A` {{optional_inline}} + - : {{CSSXref("<alpha-value>")}} 或者关键字 `none`，其中数字 `1` 代表 `100%`（完全不透明）。 + +> **备注：** 参见[缺失颜色成分](/zh-CN/docs/Web/CSS/color_value#缺失颜色成分) 以了解 `none` 的效果。 + +### 形式语法 + +{{csssyntax}} + +## 示例 + +### 使用 hsl() 和 conic-gradient() + +`hsl()` 函数和 [`conic-gradient()`](/zh-CN/docs/Web/CSS/gradient/conic-gradient) 可以很好地配合使用，因为这两个都处理角度。 + +```html hidden +
+``` + +#### CSS + +```css +div { + width: 100px; + height: 100px; + background: conic-gradient( + hsl(360 100% 50%), + hsl(315 100% 50%), + hsl(270 100% 50%), + hsl(225 100% 50%), + hsl(180 100% 50%), + hsl(135 100% 50%), + hsl(90 100% 50%), + hsl(45 100% 50%), + hsl(0 100% 50%) + ); + clip-path: circle(closest-side); +} +``` + +#### 结果 + +{{EmbedLiveSample("使用 hsl() 和 conic-gradient()", "100%", 140)}} + +### 旧版语法：逗号分隔值 + +由于历史原因，`hsl()` 函数接受所有值用逗号分隔的形式。 + +#### HTML + +```html +
+
+``` + +#### CSS + +```css +div { + width: 100px; + height: 50px; + margin: 1rem; +} + +div.space-separated { + background-color: hsl(0 100% 50% / 50%); +} + +div.comma-separated { + background-color: hsl(0, 100%, 50%, 50%); +} +``` + +#### 结果 + +{{EmbedLiveSample("旧版语法：逗号分隔值", "100%", 150)}} + +### 旧版语法：hsla() + +旧版的 `hsla()` 语法是 `hsl()` 的别称。 + +#### HTML + +```html +
+
+``` + +#### CSS + +```css +div { + width: 100px; + height: 50px; + margin: 1rem; +} + +div.hsl { + background-color: hsl(0 100% 50% / 50%); +} + +div.hsla { + background-color: hsla(0, 100%, 50%, 50%); +} +``` + +#### 结果 + +{{EmbedLiveSample("旧版语法：hsla()", "100%", 150)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{CSSXref("<color>")}}：代表颜色的数据类型 +- [HSL 颜色拾取器](https://hslpicker.com/) diff --git a/files/zh-cn/web/css/color_value/index.md b/files/zh-cn/web/css/color_value/index.md index 0be7ab92204238..f6114db6b393c1 100644 --- a/files/zh-cn/web/css/color_value/index.md +++ b/files/zh-cn/web/css/color_value/index.md @@ -5,321 +5,196 @@ slug: Web/CSS/color_value {{CSSRef}} -[CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types) `` 表示一种[标准 RGB 色彩空间（sRGB color space）](http://en.wikipedia.org/wiki/SRGB)的颜色。一个颜色可以包括一个[alpha 通道](https://en.wikipedia.org/wiki/Alpha_compositing)透明度值，来表明颜色如何与它的背景色[混合（composite）](http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending)。 +[CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types) **``** 表示一个颜色。颜色可以包括一个 [alpha 通道](https://zh.wikipedia.org/wiki/Alpha合成)_透明度值_，来表明颜色如何与背景色[混合（composite）](http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending)。 -一个``可以以如下方式定义： +> **备注：** 尽管 CSS 颜色值（``）被精确定义，但在不同的输出设备上仍然有可能表现不一致（甚至区别很大）。这是因为大多数设备不是经校准的，而且有些浏览器不支持输出设备的[色彩配置（color profile）](https://zh.wikipedia.org/wiki/ICC色彩特性文件)。 -- 使用一个关键字（比如`blue`或`transparent`） -- 使用[RGB 立体坐标（RGB cubic-coordinate）](http://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation)系统（以“#”加十六进制或者 `rgb()` 和 `rgba()` 函数表达式的形式） -- 使用[HSL 圆柱坐标（HSL cylindrical-coordinate）](http://en.wikipedia.org/wiki/HSL_and_HSV)系统（以 `hsl()` 和 `hsla()` 函数表达式的形式） +## 语法 -> **备注：** 本文章详细描述了``数据类型。如要了解更多关于在 HTML 中使用颜色的信息，请参阅[使用 CSS 为 HTML 元素应用颜色](/zh-CN/docs/Web/HTML/Applying_color)。 +```css +/* 命名颜色 */ +rebeccapurple +aliceblue -## 语法 +/* RGB 十六进制 */ +#f09 +#ff0099 + +/* RGB（红、绿、蓝） */ +rgb(255 0 153) +rgb(255 0 153 / 80%) + +/* HSL（色相、饱和度、明度） */ +hsl(150 30% 60%) +hsl(150 30% 60% / 0.8) + +/* HWB（色相、白度、黑度）*/ +hwb(12 50% 0%) +hwb(194 0% 0% / 0.5) -``可以以以下方式指定。 +/* LAB（亮度、A 轴、B 轴） */ +lab(50% 40 59.5) +lab(50% 40 59.5 / 0.5) -> **备注：** 尽管 CSS 颜色值被精确定义，但在不同的输出设备上仍然有可能显示不一。它们大多数是不可被校准的，而且有些浏览器不支持输出设备的[色彩配置（color profile）](http://en.wikipedia.org/wiki/ICC_profile)。 +/* LCH（亮度、色度、色相） */ +lch(52.2% 72.2 50) +lch(52.2% 72.2 50 / 0.5) -### 颜色关键字 +/* Oklab（亮度、A 轴、B 轴） */ +oklab(59% 0.1 0.1) +oklab(59% 0.1 0.1 / 0.5) -颜色关键字（color keywords）是不区分大小写的标识符，它表示一个具体的颜色，例如 `red`、`blue`、`brown`或者`lightseagreen` 。尽管名称或多或少描述了分别的颜色，但必定是人工的，其后没有严格的标准。 +/* Oklch（亮度、色度、色相） */ +oklch(60% 0.15 50) +oklch(60% 0.15 50 / 0.5) +``` -在使用关键字时有几个需要留意的注意事项： +一个 `` 值可以以如下方式定义： -- 除了通常的 16 个 HTML 基本颜色，其他的不能被用于 HTML。HTML 将通过一个特定的计算程序转换这些未知的值，这将导致成为完全不同的颜色。这些关键字应只被用于 SVG 和 CSS。 -- 未知的关键字会让 CSS 属性无效。无效的属性将被忽略，该颜色将没有作用。这是一个和 HTML 相比不同的行为。 -- 未使用关键字定义的颜色在 CSS 中有任意的透明度，它们是单实色。 -- 一些关键字表示同样的颜色： +- 通过关键字：{{CSSXref("<named-color>")}}（例如 `blue` 和 `pink`）、{{CSSXref("<system-color>")}} 和 [`currentcolor`](#currentcolor_关键字). +- 通过十六进制标记：{{CSSXref("<hex-color>")}}（例如 `#ff0000`）。 +- 通过使用函数标记的颜色空间的参数： + - [sRGB](https://zh.wikipedia.org/wiki/SRGB色彩空间) 颜色空间：{{CSSXref("color_value/hsl", "hsl()")}}、{{CSSXref("color_value/hwb", "hwb()")}}、{{CSSXref("color_value/rgb", "rgb()")}}； + - [CIELAB](https://zh.wikipedia.org/wiki/CIELAB色彩空间) 颜色空间：{{CSSXref("color_value/lab", "lab()")}}、{{CSSXref("color_value/lch", "lch()")}}； + - [Oklab](https://bottosson.github.io/posts/oklab/) 颜色空间：{{CSSXref("color_value/oklab", "oklab()")}}、{{CSSXref("color_value/oklch", "oklch()")}}； + - 其他颜色空间：{{CSSXref("color_value/color", "color()")}}。 +- 通过混合两个颜色：{{CSSXref("color_value/color-mix", "color-mix()")}}。 - - `darkgray` / `darkgrey` - - `darkslategray` / `darkslategrey` - - `dimgray` / `dimgrey` - - `lightgray` / `lightgrey` - - `lightslategray` / `lightslategrey` - - `gray` / `grey` - - `slategray` / `slategrey` +### currentcolor 关键字 -- 虽然关键字的名称取自常见的 X11 颜色名，然而由于生产商为具体的硬件所做的定制，颜色可能与 X11 系统上相应的颜色有所偏差。 +`currentcolor` 关键字表示元素的 {{Cssxref("color")}} 属性的值。这可以在默认情况下不接收 `color` 值的属性上使用 `color` 值。 -> **备注：** 可接受的关键字列表在 CSS 的演变过程中发生了改变： -> -> - CSS 标准 1 只接受 16 个基本颜色，称为*VGA 颜色*，因为它们来源于 [VGA](http://en.wikipedia.org/wiki/VGA) 显卡所显示的颜色集合而被称为 _VGA colors_（视频图形阵列色彩）。 -> - CSS 标准 2 增加了 `orange` 关键字。 -> - 从一开始，浏览器接受其他的颜色，由于一些早期浏览器是 X11 应用程序，这些颜色大多数是 X11 命名的颜色列表，虽然有一点不同。SVG 1.0 是首个正式定义这些关键字的标准；CSS 色彩标准 3 也正式定义了这些关键字。它们经常被称作*扩张的颜色关键字*， *X11 颜色*或 _SVG 颜色_。 -> - CSS 颜色标准 4 添加可`rebeccapurple`关键字来[纪念 web 先锋 Eric Meyer](https://codepen.io/trezy/post/honoring-a-great-man)。 +如果 `currentcolor` 用于 `color` 属性的值，那么会给元素继承 `color` 属性的值。 -### `transparent` 关键字 +```html +
+ 这个文本的颜色是蓝色。 +
+ 这个块的边框也是蓝色。 +
+``` -`transparent` 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有阿尔法通道为最小值的黑色，是 `rgba(0,0,0,0)` 的简写。 +{{EmbedLiveSample("currentcolor_关键字", "100%", 80)}} -> **备注：** 为避免未预料的行为，比如{{cssxref("gradient")}}中，the current CSS spec states that `transparent` should be calculated in the [alpha-premultiplied color space](https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax). 但是，注意旧的浏览器可能将其作为 alpha 值为 0 的黑色。 +### 缺失颜色成分 -> **备注：** `transparent` 关键字在 CSS Level 2 (Revision 1) 中不是一个真实的颜色。它是一个特殊的关键字，可以代替一个普通的 `` 值用于两个 CSS 属性中： {{ Cssxref("background") }} 和 {{ Cssxref("border") }}。本质上使用它可以覆盖一个继承的单色。随着经由[阿尔法通道（alpha channels）](http://en.wikipedia.org/wiki/Alpha_compositing)透明度的支持，`transparent` 在 CSS Colors Level 3 中被重新定义为一个真实的颜色，允许在任何一个需要 `` 值的地方使用，像 {{ Cssxref("color") }} 属性。 +每个 CSS 颜色函数的成分，除了使用旧版的逗号分隔语法的，都可以指定关键字 `none` 表示一个缺失的成分。 -### `currentColor` 关键字 +清晰地指定缺失的成分可用于[颜色插值](#带有缺失成分时的插值)，可用于需要插值一些颜色成分但不插值其他颜色成分时。对于所有其他的目的，缺失的成分会相当于相应单位的零值：`0`、`0%` 或 `0deg`。例如，下面的颜色在不插值时是等价的： -`currentColor` 关键字代表原始的 {{ Cssxref("color") }} 属性的计算值。它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。 +```css +/* 这两个是等价的 */ +color: oklab(50% none -0.25); +color: oklab(50% 0 -0.25); -它也能用于那些继承了元素的 {{ Cssxref("color") }} 属性计算值的属性，相当于在这些元素上使用 `inherit` 关键字，如果这些元素有该关键字的话。 +/* 这两个是等价的 */ +background-color: hsl(none 100% 50%); +background-color: hsl(0deg 100% 50%); +``` -#### currentcolor 示例 +## 插值 -该行的颜色（一个填充颜色的 div）应用它继承自父级的 {{ Cssxref("color") }} 属性。 +颜色插值会发生在[渐变](/zh-CN/docs/Web/CSS/gradient)、[过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)和[动画](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)中。 -##### HTML +当对 `` 值进行插值时，它们首先会转换成指定的颜色空间，然后颜色成分的[计算值](/zh-CN/docs/Web/CSS/computed_value)会进行线性插值，插值速度由过渡和动画中的[缓动函数](/zh-CN/docs/Web/CSS/easing-function)决定。插值颜色空间默认为 Oklab，但是可以在一些与颜色相关的函数标记中通过 {{CSSXref("<color-interpolation-method>")}} 覆盖。 -```html -
- The color of this text is blue. -
- This block is surrounded by a blue border. -
+### 带有缺失成分时的插值 + +#### 在同一空间内插值颜色 + +对完全在插值颜色空间中的颜色进行插值时，一个颜色中缺失的成分将替换为另一种颜色中同一成分的现有值。例如，以下两个表达式是等效的： + +```css +color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30)) +color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30)) ``` -##### 结果 - -{{EmbedLiveSample('currentcolor 示例')}} - -### RGB 颜色 - -颜色可以使用红 - 绿 - 蓝（red-green-blue (RGB)）模式的两种方式被定义： - -#### 语法 - -RGB 颜色可以通过以`#`为前缀的十六进制字符和函数（`rgb()`、`rgba()`）标记表示。 - -> **备注：** 在 CSS 颜色标准 4 中，rgba() 是 rgb() 的别称。在实行第 4 级标准的浏览器中，它们接受相同的参数，作用效果也相同。 - -- 十六进制符号：`#RRGGBB[AA]` - - : `R`（红）、`G`（绿）、`B` （蓝）和`A` （alpha）是十六进制字符（0–9、A–F）。`A`是可选的。比如，`#ff0000`等价于`#ff0000ff`。 -- 十六进制符号：`#RGB[A]` - - : `R`（红）、`G`（绿）、`B` （蓝）和`A` （alpha）是十六进制字符（0–9、A–F）。`A`是可选的。三位数符号（`#RGB`）是六位数形式（`#RRGGBB`）的减缩版。比如，`#f09`和`#ff0099`表示同一颜色。类似地，四位数符号（`#RGBA`）是八位数形式（`#RRGGBBAA`）的减缩版。比如，`#0f38`和`#00ff3388`表示相同颜色。 -- 函数符： `rgb[a](R, G, B[, A])` - - : `R`（红）、`G`（绿）、`B` （蓝）可以是{{cssxref("<number>")}}（数字），或者{{cssxref("<percentage>")}}（百分比），255 相当于 100%。`A`（alpha）可以是`0`到`1`之间的数字，或者百分比，数字`1`相当于`100%`（完全不透明）。 -- 函数符：`rgb[a](R G B[ / A])` - - : CSS 颜色级别 4 支持用空格分开的值。 - -### HSL 颜色 - -颜色也可以使用 `hsl()` 函数符被定义为色相 - 饱和度 - 亮度（Hue-saturation-lightness）模式。HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。（通过保持相同的色相并改变亮度/暗度和饱和度）。 - -Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue). - -#### 语法 - -HSL colors are expressed through the functional `hsl()` and `hsla()` notations. - -> **备注：** As of CSS Colors Level 4, `hsla()` is an alias for `hsl()`. In browsers that implement the Level 4 standard, they accept the same parameters and behave the same way. - -- Functional notation: `hsl[a](H, S, L[, A])` - - : `H` (hue) is an {{cssxref("<angle>")}} of the color circle given in `deg`s, `rad`s, `grad`s, or `turn`s in [CSS Color Module Level 4](https://drafts.csswg.org/css-color/#the-hsl-notation). When written as a unitless {{cssxref("<number>")}}, it is interpreted as degrees, as specified in [CSS Color Module Level 3](https://drafts.csswg.org/css-color-3/#hsl-color). By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an ``, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc. - `S` (saturation) and `L` (lightness) are percentages. `100%` **saturation** is completely saturated, while `0%` is completely unsaturated (gray). `100%` **lightness** is white, `0%` lightness is black, and `50%` lightness is “normal.” - `A` (alpha) can be a {{cssxref("<number>")}} between `0` and `1`, or a {{cssxref("<percentage>")}}, where the number `1` corresponds to `100%` (full opacity). -- Functional notation: `hsl[a](H S L[ / A])` - - : CSS Colors Level 4 adds support for space-separated values in the functional notation. - -### 系统颜色 - -In _forced colors mode_ (detectable with the [forced-colors](/zh-CN/docs/Web/CSS/@media/forced-colors) media query), most colors are restricted into a user- and browser-defined palette. These system colors are exposed by the following keywords, which can be used to ensure that the rest of the page integrates well with the restricted palette. These values may also be used in other contexts, but are not widely supported by browsers. - -The keywords in the following list are defined by the CSS Color Module Level 4 specification. - -> **备注：** Note that these keywords are _case insensitive_, but are listed here with mixed case for readability. - -- ActiveText - - : Text of active links -- ButtonFace - - : Background of push buttons -- ButtonText - - : Text of push buttons -- Canvas - - : Background of application content or documents -- CanvasText - - : Text in application content or documents -- Field - - : Background of input fields -- FieldText - - : Text in input fields -- GrayText - - : Text that is disabled -- Highlight - - : Background of items that are selected in a control -- HighlightText - - : Text of items that are selected in a control -- LinkText - - : Text of non-active, non-visited links -- VisitedText - - : Text of visited links - -#### Deprecated system color keywords - -The following keywords were defined in earlier versions of the CSS Color Module. They are now deprecated. {{deprecated_inline}} for use on public web pages. - -- ActiveBorder - - : Active window border. -- ActiveCaption - - : Active window caption. Should be used with `CaptionText` as foreground color. -- AppWorkspace - - : Background color of multiple document interface. -- Background - - : Desktop background. -- ButtonHighlight - - : The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border. -- ButtonShadow - - : The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border. -- CaptionText - - : Text in caption, size box, and scrollbar arrow box. Should be used with the `ActiveCaption` background color. -- InactiveBorder - - : Inactive window border. -- InactiveCaption - - : Inactive window caption. Should be used with the `InactiveCaptionText` foreground color. -- InactiveCaptionText - - : Color of text in an inactive caption. Should be used with the `InactiveCaption` background color. -- InfoBackground - - : Background color for tooltip controls. Should be used with the `InfoText` foreground color. -- InfoText - - : Text color for tooltip controls. Should be used with the `InfoBackground` background color. -- Menu - - : Menu background. Should be used with the `MenuText` or `-moz-MenuBarText` foreground color. -- MenuText - - : Text in menus. Should be used with the `Menu` background color. -- Scrollbar - - : Background color of scroll bars. -- ThreeDDarkShadow - - : The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. -- ThreeDFace - - : The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the `ButtonText` foreground color. -- ThreeDHighlight - - : The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. -- ThreeDLightShadow - - : The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. -- ThreeDShadow - - : The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. -- Window - - : Window background. Should be used with the `WindowText` foreground color. -- WindowFrame - - : Window frame. -- WindowText - - : Text in windows. Should be used with the `Window` background color. - -### Mozilla System Color Extensions - -- \-moz-ButtonDefault - - : The border color that goes around buttons that represent the default action for a dialog box. -- \-moz-ButtonHoverFace - - : The background color of a button that the mouse pointer is over (which would be `ThreeDFace` or `ButtonFace` when the mouse pointer is not over it). Should be used with the `-moz-ButtonHoverText` foreground color. -- \-moz-ButtonHoverText - - : The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the `-moz-ButtonHoverFace background` color. -- \-moz-CellHighlight - - : Background color for selected item in a tree widget. Should be used with the `-moz-CellHighlightText` foreground color. See also `-moz-html-CellHighlight`. -- \-moz-CellHighlightText - - : Text color for a selected item in a tree. Should be used with the `-moz-CellHighlight background` color. See also `-moz-html-CellHighlightText`. -- \-moz-Combobox - - : Background color for combo-boxes. Should be used with the `-moz-ComboboxText` foreground color. In versions prior to 1.9.2, use `-moz-Field` instead. -- \-moz-ComboboxText - - : Text color for combo-boxes. Should be used with the `-moz-Combobox` background color. In versions prior to 1.9.2, use `-moz-FieldText` instead. -- \-moz-Dialog - - : Background color for dialog boxes. Should be used with the `-moz-DialogText` foreground color. -- \-moz-DialogText - - : Text color for dialog boxes. Should be used with the `-moz-Dialog` background color. -- \-moz-dragtargetzone - - : TBD -- \-moz-EvenTreeRow - - : Background color for even-numbered rows in a tree. Should be used with the `-moz-FieldText` foreground color. In Gecko versions prior to 1.9, use `-moz-Field`. See also `-moz-OddTreeRow`. -- \-moz-html-CellHighlight - - : Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the `-moz-html-CellHighlightText` foreground color. Prior to Gecko 1.9, use `-moz-CellHighlight`. -- \-moz-html-CellHighlightText - - : Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the `-moz-html-CellHighlight` background color. Prior to Gecko 1.9, use `-moz-CellHighlightText`. -- \-moz-mac-accentdarkestshadow - - : TBD -- \-moz-mac-accentdarkshadow - - : TBD -- \-moz-mac-accentface - - : TBD -- \-moz-mac-accentlightesthighlight - - : TBD -- \-moz-mac-accentlightshadow - - : TBD -- \-moz-mac-accentregularhighlight - - : TBD -- \-moz-mac-accentregularshadow - - : TBD -- \-moz-mac-chrome-active - - : TBD -- \-moz-mac-chrome-inactive - - : TBD -- \-moz-mac-focusring - - : TBD -- \-moz-mac-menuselect - - : TBD -- \-moz-mac-menushadow - - : TBD -- \-moz-mac-menutextselect - - : TBD -- \-moz-MenuHover - - : Background color for hovered menu items. Often similar to `Highlight`. Should be used with the `-moz-MenuHoverText` or `-moz-MenuBarHoverText` foreground color. -- \-moz-MenuHoverText - - : Text color for hovered menu items. Often similar to `HighlightText`. Should be used with the `-moz-MenuHover` background color. -- \-moz-MenuBarText - - : Text color in menu bars. Often similar to `MenuText`. Should be used on top of `Menu` background. -- \-moz-MenuBarHoverText - - : Color for hovered text in menu bars. Often similar to `-moz-MenuHoverText`. Should be used on top of `-moz-MenuHover` background. -- \-moz-nativehyperlinktext - - : Default platform hyperlink color. -- \-moz-OddTreeRow - - : Background color for odd-numbered rows in a tree. Should be used with the `-moz-FieldText` foreground color. In Gecko versions prior to 1.9, use `-moz-Field`. See also `-moz-EvenTreeRow`. -- \-moz-win-communicationstext - - : Should be used for text in objects with `{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;`. -- \-moz-win-mediatext - - : Should be used for text in objects with `{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox`. -- \-moz-win-accentcolor - - : Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc. -- \-moz-win-accentcolortext - - : Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc. - -### Mozilla Color Preference Extensions - -- \-moz-activehyperlinktext - - : User's preference for text color of active links. Should be used with the default document background color. -- \-moz-default-background-color - - : User's preference for the document background color. -- \-moz-default-color - - : User's preference for the text color. -- \-moz-hyperlinktext - - : User's preference for the text color of unvisited links. Should be used with the default document background color. -- \-moz-visitedhyperlinktext - - : User's preference for the text color of visited links. Should be used with the default document background color. +> **备注：** 如果两个颜色都缺失这个成分，那么这个成分在插值后也是缺失的。 -## 插值 +#### 在不同空间内插值：相似成分 + +如果任何要插值的颜色不在插值颜色空间中，则其缺失的成分将根据同一类的**相似成分**转换为转换后的颜色，如下表所述： + +| 类别 | 相似成分 | +| ---- | -------- | +| 红色 | `R`, `X` | +| 绿色 | `G`, `Y` | +| 蓝色 | `B`, `Z` | +| 明度 | `L` | +| 色度 | `C`, `S` | +| 色相 | `H` | +| a | `a` | +| b | `b` | + +例如： + +- `color(xyz 0.2 0.1 0.6)` 中的 `X`（`0.2`）相似于 `rgb(50% 70% 30%)` 中的 `R`（`50%`）。 +- `hsl(0deg 100% 80%)` 中的 `H`（`0deg`）相似于 `oklch(80% 0.1 140)` 中的 `H`（`140`）。 + +使用 Oklch 作为插值颜色空间并以下面两种颜色为例： + +```css +lch(80% 30 none) +color(display-p3 0.7 0.5 none) +``` + +预处理过程为： + +1. 将两种颜色中缺失的成分替换为零值： + + ```css + lch(80% 30 0) + color(display-p3 0.7 0.5 0) + ``` + +2. 将两种颜色转换为插值颜色空间： -在动画和[渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)中， `` 值会在每个红绿蓝成分中插值。每一个成分都会插值为浮点实数。注意颜色的插值发生在 [alpha-premultiplied sRGBA color space](https://www.gimp.org/docs/plug-in/appendix-alpha.html) 中，以避免出现未预料的灰色。在动画中，插值速度由[时间函数](/zh-CN/docs/)决定。 + ```css + oklch(83.915% 0.0902 0.28) + oklch(63.612% 0.1522 78.748) + ``` -## Accessibility considerations +3. 如果转换后颜色的任何成分与相应原始颜色中的缺失成分相似，则将其重置为缺失的成分： -Some people have difficulty distinguishing colors. The [WCAG 2.0](https://www.w3.org/TR/WCAG/#visual-audio-contrast) recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See [Color and color contrast](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast) for more information. + ```css + oklch(83.915% 0.0902 none) + oklch(63.612% 0.1522 78.748) + ``` + +4. 将任何缺失的成分替换为另一转换后颜色中的相同成分： + + ```css + oklch(83.915% 0.0902 78.748) + oklch(63.612% 0.1522 78.748) + ``` + +## 无障碍考虑 + +一些人分辨颜色可能会存在困难。[WCAG 2.2](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Use_of_color) 强烈建议不要将颜色作为传递特定消息、活动或结果的唯一方式。参见[颜色和颜色对比度](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)以了解更多信息。 + +## 形式语法 + +{{csssyntax}} ## 示例 ### 颜色值检测器 -在这个示例中，我们提供一个`
`和文本输入框。输入一个有效的颜色，则`
`会显示这个颜色，可以让你检测颜色值。 +在这个例子中，我们提供了一个 `
` 和一个文本输入框。往文本框内输入有效的颜色会使 `
` 接受这个颜色，从而可能测试我们的颜色值。 #### HTML ```html
- + ``` -#### CSS - -```css +```css hidden div { - width: 100%; height: 200px; + width: 200px; } ``` @@ -328,306 +203,217 @@ const inputElem = document.querySelector("input"); const divElem = document.querySelector("div"); function validTextColor(stringToTest) { - if (stringToTest === "") { - return false; - } - if (stringToTest === "inherit") { - return false; - } - if (stringToTest === "transparent") { + if (stringToTest === "inherit" || stringToTest === "transparent") { return false; } - const image = document.createElement("img"); - image.style.color = "rgb(0, 0, 0)"; - image.style.color = stringToTest; - if (image.style.color !== "rgb(0, 0, 0)") { - return true; - } - image.style.color = "rgb(255, 255, 255)"; - image.style.color = stringToTest; - return image.style.color !== "rgb(255, 255, 255)"; + const div = document.createElement("div"); + div.style.color = stringToTest; + return !!div.style.color; } -inputElem.addEventListener("change", () => { +inputElem.addEventListener("input", () => { if (validTextColor(inputElem.value)) { divElem.style.backgroundColor = inputElem.value; divElem.textContent = ""; } else { - divElem.style.backgroundColor = "white"; - divElem.textContent = "Invalid color value"; + divElem.removeAttribute("style"); + divElem.textContent = "无效的颜色值"; } }); ``` #### 结果 -{{EmbedLiveSample('颜色值检测器','100%', 300)}} +{{EmbedLiveSample("颜色值检测器", "100%", 300)}} -### RGB 的多种语法 +### 完全饱和的 sRGB 颜色 -这个例子显示了一个颜色可以以多种 RGB 颜色语法表示。 +此示例显示 sRGB 颜色空间中完全饱和的 sRGB 颜色。 + +#### HTML + +```html +
+
+
+
+
+
+
+
+
+
+
+
+``` + +#### CSS + +```css hidden +body { + display: flex; + flex-wrap: wrap; +} +div { + height: 80px; + margin: 10px; + width: 80px; +} +``` ```css -/* 这些语法都表示同一个颜色：a fully opaque hot pink */ +div:nth-child(1) { + background-color: hsl(0 100% 50%); +} +div:nth-child(2) { + background-color: hsl(30 100% 50%); +} +div:nth-child(3) { + background-color: hsl(60 100% 50%); +} +div:nth-child(4) { + background-color: hsl(90 100% 50%); +} +div:nth-child(5) { + background-color: hsl(120 100% 50%); +} +div:nth-child(6) { + background-color: hsl(150 100% 50%); +} +div:nth-child(7) { + background-color: hsl(180 100% 50%); +} +div:nth-child(8) { + background-color: hsl(210 100% 50%); +} +div:nth-child(9) { + background-color: hsl(240 100% 50%); +} +div:nth-child(10) { + background-color: hsl(270 100% 50%); +} +div:nth-child(11) { + background-color: hsl(300 100% 50%); +} +div:nth-child(12) { + background-color: hsl(330 100% 50%); +} +``` -/* 十六进制语法 */ -#f09 -#F09 -#ff0099 -#FF0099 - -/* 函数语法 */ -rgb(255,0,153) -rgb(255, 0, 153) -rgb(255, 0, 153.0) -rgb(100%,0%,60%) -rgb(100%, 0%, 60%) -rgb(100%, 0, 60%) /* 错误：不要混用数字和百分比 */ -rgb(255 0 153) +#### 结果 -/* 带有 alpha 值的十六进制语法 */ -#f09f -#F09F -#ff0099ff -#FF0099FF +{{EmbedLiveSample("完全饱和的 srgb 颜色", "100%", 200)}} -/* 带有 alpha 值的函数语法 */ -rgb(255, 0, 153, 1) -rgb(255, 0, 153, 100%) +### 不同深浅的红色 -/* 空格语法 */ -rgb(255 0 153 / 1) -rgb(255 0 153 / 100%) +此示例显示 sRGB 颜色空间中不同深浅的红色。 -/* 带有浮点值的函数语法 */ -rgb(255, 0, 153.6, 1) -rgb(1e2, .5e1, .5e0, +.25e2%) +#### HTML + +```html +
+
+
+
+
+
``` -### RGB 的多种透明度 +#### CSS + +```css hidden +body { + display: flex; + flex-wrap: wrap; +} +div { + box-sizing: border-box; + height: 80px; + margin: 10px; + width: 80px; +} +``` ```css -/* 十六进制语法 */ -#3a30 /* 完全透明的绿色 */ -#3A3F /* 完全不透明的绿色 */ -#33aa3300 /* 完全透明的绿色 */ -#33AA3380 /* 50% 不透明的绿色 */ - -/* 函数语法 */ -rgba(51, 170, 51, .1) /* 10% 不透明的绿色 */ -rgba(51, 170, 51, .4) /* 40% 不透明的绿色 */ -rgba(51, 170, 51, .7) /* 70% 不透明的绿色 */ -rgba(51, 170, 51, 1) /* 完全不透明的绿色 */ - -/* 空格语法 */ -rgba(51 170 51 / 0.4) /* 40% 不透明的绿色 */ -rgba(51 170 51 / 40%) /* 40% 不透明的绿色 */ - -/* 带有浮点值的函数语法 */ -rgba(255, 0, 153.6, 1) -rgba(1e2, .5e1, .5e0, +.25e2%) +div:nth-child(1) { + background-color: hsl(0 100% 0%); +} +div:nth-child(2) { + background-color: hsl(0 100% 20%); +} +div:nth-child(3) { + background-color: hsl(0 100% 40%); +} +div:nth-child(4) { + background-color: hsl(0 100% 60%); +} +div:nth-child(5) { + background-color: hsl(0 100% 80%); +} +div:nth-child(6) { + background-color: hsl(0 100% 100%); + border: solid; +} ``` -### HSL 的多种语法 +#### 结果 + +{{EmbedLiveSample("不同深浅的红色", "100%", 150)}} -```css -/* 以下示例都表示同一颜色：a lavender */ -hsl(270,60%,70%) -hsl(270, 60%, 70%) -hsl(270 60% 70%) -hsl(270deg, 60%, 70%) -hsl(4.71239rad, 60%, 70%) -hsl(.75turn, 60%, 70%) - -/* 以下示例都表示同一颜色：a lavender that is 15% opaque. */ -hsl(270, 60%, 50%, .15) -hsl(270, 60%, 50%, 15%) -hsl(270 60% 50% / .15) -hsl(270 60% 50% / 15%) +### 不同饱和度的红色 + +此示例显示 sRGB 颜色空间中不同饱和度的红色。 + +#### HTML + +```html +
+
+
+
+
+
``` -### 完全饱和颜色 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
符号描述展示
hsl(0, 100%, 50%)红色
hsl(30, 100%, 50%)橙色
hsl(60, 100%, 50%)黄色
hsl(90, 100%, 50%)黄绿色
hsl(120, 100%, 50%)绿色
hsl(150, 100%, 50%)蓝绿色（青绿色）
hsl(180, 100%, 50%)青色
hsl(210, 100%, 50%)天蓝色
hsl(240, 100%, 50%)蓝色
hsl(270, 100%, 50%)紫色
hsl(300, 100%, 50%)品红色（洋红色）
hsl(330, 100%, 50%)粉红色
hsl(360, 100%, 50%)红色
- -### 不同明暗度的绿色 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
符号描述展示
hsl(120, 100%, 0%)黑色
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%)白色
- -### 饱和的和不饱和的绿色 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
符号描述展示
hsl(120, 100%, 50%)绿色
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%)灰色
- -### HSL 不同的透明度 +#### CSS + +```css hidden +body { + display: flex; + flex-wrap: wrap; +} +div { + height: 80px; + margin: 10px; + width: 80px; +} +``` ```css -hsla(240, 100%, 50%, .05) /* 5% opaque blue */ -hsla(240, 100%, 50%, .4) /* 40% opaque blue */ -hsla(240, 100%, 50%, .7) /* 70% opaque blue */ -hsla(240, 100%, 50%, 1) /* full opaque blue */ +div:nth-child(1) { + background-color: hsl(0 0% 50%); +} +div:nth-child(2) { + background-color: hsl(0 20% 50%); +} +div:nth-child(3) { + background-color: hsl(0 40% 50%); +} +div:nth-child(4) { + background-color: hsl(0 60% 50%); +} +div:nth-child(5) { + background-color: hsl(0 80% 50%); +} +div:nth-child(6) { + background-color: hsl(0 100% 50%); +} +``` -/* Whitespace syntax */ -hsla(240 100% 50% / .05) /* 5% opaque blue */ +#### 结果 -/* Percentage value for alpha */ -hsla(240 100% 50% / 5%) /* 5% opaque blue */ -``` +{{EmbedLiveSample("不同饱和度的红色", "100%", 150)}} ## 规范 @@ -639,6 +425,8 @@ hsla(240 100% 50% / 5%) /* 5% opaque blue */ ## 参见 -- The {{ Cssxref("opacity") }} property, allowing to define the transparency of color at the element level. -- The {{ Cssxref("color") }}, {{ Cssxref("background-color") }}, {{ Cssxref("border-color") }}, {{ Cssxref("outline-color") }}, {{ Cssxref("text-shadow") }}, {{ Cssxref("box-shadow") }} properties. -- [CSS Reference](/zh-CN/docs/Web/CSS/Reference) index +- {{CSSXref("opacity")}}：在元素级别上设备透明度的属性 +- {{CSSXref("<hue>")}}：表示一个颜色的色相角度的数据类型 +- {{CSSXref("color")}}、{{CSSXref("background-color")}}、{{CSSXref("border-color")}}、{{CSSXref("box-shadow")}}、{{CSSXref("outline-color")}}、{{CSSXref("text-shadow")}}：使用 `` 的常见属性 +- [使用 CSS 给元素应用颜色](/zh-CN/docs/Web/CSS/CSS_colors/Applying_color) +- MDN 博客中的文章 [CSS 颜色中的新功能、渐变和色调（级别 4）](/en-US/blog/css-color-module-level-4/)（2023 年） diff --git a/files/zh-cn/web/css/color_value/rgb/index.md b/files/zh-cn/web/css/color_value/rgb/index.md new file mode 100644 index 00000000000000..7ca7f3e41a097b --- /dev/null +++ b/files/zh-cn/web/css/color_value/rgb/index.md @@ -0,0 +1,116 @@ +--- +title: rgb() +slug: Web/CSS/color_value/rgb +--- + +{{CSSRef}} + +**`rgb()`** 函数标记根据颜色的红色、绿色和蓝色成分来表达颜色。可选的 alpha 成分代表了颜色的透明度。 + +> **备注：** 旧版的 `rgba()` 语法是 `rgb()` 的别称，接收相同的参数，行为也是相同的。 + +{{EmbedInteractiveExample("pages/css/function-rgb.html")}} + +## 语法 + +```css +rgb(255 255 255) +rgb(255 255 255 / .5) +``` + +此函数也接受旧版的语法，即所有的值都是用逗号分隔的。 + +### 值 + +函数标记：`rgb(R G B[ / A])` + +- `R`、`G`、`B` + - : 每个都是从 `0` 到 `255` 之间的 {{CSSXref("<number>")}} 值，或从 `0%` 到 `100%` 之间的 {{CSSXref("<percentage>")}} 值，或者为关键字 `none`，分别代表红色、绿色和蓝色的通道。 +- `A` {{optional_inline}} + - : {{CSSXref("<alpha-value>")}} 值或者关键字 `none`，数字 `1` 对应 `100%`（完全不透明）。 + +> **备注：** 参见[缺失颜色成分](/zh-CN/docs/Web/CSS/color_value#缺失颜色成分)以了解 `none` 的效果。 + +### 形式语法 + +{{csssyntax}} + +## 示例 + +### 旧版语法：逗号分隔值 + +由于历史原因，`rgb()` 函数接受所有值用逗号分隔的形式。 + +#### HTML + +```html +
+
+``` + +#### CSS + +```css +div { + width: 100px; + height: 50px; + margin: 1rem; +} + +div.space-separated { + background-color: rgb(255 0 0 / 0.5); +} + +div.comma-separated { + background-color: rgb(255, 0, 0, 0.5); +} +``` + +#### 结果 + +{{EmbedLiveSample('旧版语法：逗号分隔值', '100%', '150px')}} + +### 旧版语法：rgba() + +旧版的 `rgba()` 语法是 `rgb()` 的别称。 + +#### HTML + +```html +
+
+``` + +#### CSS + +```css +div { + width: 100px; + height: 50px; + margin: 1rem; +} + +div.rgb { + background-color: rgb(255 0 0 / 0.5); +} + +div.rgba { + background-color: rgba(255 0 0 / 0.5); +} +``` + +#### 结果 + +{{EmbedLiveSample('旧版语法：rgba()', '100%', '150px')}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{CSSXref("<color>")}} 数据类型，以了解所有颜色标记的列表 diff --git a/files/zh-cn/web/css/css_images/using_css_gradients/index.md b/files/zh-cn/web/css/css_images/using_css_gradients/index.md index 60def239be6eb5..a6477e6d782e52 100644 --- a/files/zh-cn/web/css/css_images/using_css_gradients/index.md +++ b/files/zh-cn/web/css/css_images/using_css_gradients/index.md @@ -5,11 +5,11 @@ slug: Web/CSS/CSS_images/Using_CSS_gradients {{CSSRef}} -**CSS 渐变** {{cssxref("<image>")}} 类型的一种特殊类型 {{cssxref("<gradient>")}} 表示，由两种或多种颜色之间的渐进过渡组成。你可以选择三种类型的渐变：线性 (由 {{cssxref("linear-gradient")}} 函数创建)，径向 (由 {{cssxref("radial-gradient")}} 函数创建) 和圆锥 (由 {{cssxref("conic-gradient")}} 函数创建)。你还可以使用 {{cssxref("repeating-linear-gradient")}} 和 {{cssxref("repeating-radial-gradient")}} 函数创建重复渐变。 +**CSS 渐变**由 {{cssxref("<gradient>")}} 数据类型表示，它是 {{cssxref("<image>")}} 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。你可以选择三种类型的渐变：_线性_（由 {{cssxref("gradient/linear-gradient", "linear-gradient()")}} 函数创建）、_径向_（由 {{cssxref("gradient/radial-gradient", "radial-gradient()")}} 函数创建）和*锥形*（由 {{cssxref("gradient/conic-gradient", "conic-gradient()")}} 函数创建）。你还可以使用 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} 和 {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 函数创建重复渐变。 -渐变可以在任何使用 `` 的地方使用，例如在背景中。由于渐变是动态生成的，因此它们可以消除对传统用于实现类似效果的栅格图像文件的需求。此外，由于渐变是由浏览器生成的，因此在放大时它们看起来比栅格图像更好，并且可以动态调整大小。 +渐变可以在任何使用 `` 的地方使用，例如在背景中。由于渐变是动态生成的，因此可以消除对传统用于实现类似效果的栅格图像文件的需求。此外，由于渐变是由浏览器生成的，因此在放大时看起来比栅格图像更好，并且可以动态调整大小。 -我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变，圆锥渐变和重复渐变。 +我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变、锥形渐变和重复渐变。 ## 使用线性渐变 @@ -17,7 +17,7 @@ slug: Web/CSS/CSS_images/Using_CSS_gradients ### 基础线性渐变 -要创建最基本的渐变类型，你只需指定两种颜色即可。这些被称为色标。至少指定两个色标，也可以指定任意数量。 +要创建最基本的渐变类型，你只需指定两种颜色即可。这些被称为色标（color stop）。至少指定两个色标，也可以指定任意数量。 ```html hidden
@@ -109,7 +109,7 @@ div { 在使用角度的时候，`0deg` 代表渐变方向为从下到上，`90deg` 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。而负角度意味着逆时针方向。 -![linear_redangles.png](/files/3811/linear_red_angles.png) +![四个显示角度和相关渐变的盒子。0deg 从顶部到底部，90deg 从右到左，180deg 从底部到顶部，-90deg 从左到右](linear_red_angles.png) ## 声明颜色和创建效果 @@ -138,9 +138,9 @@ div { {{ EmbedLiveSample('使用多种颜色', 120, 120) }} -### 颜色终止位置 +### 色标位置 -你不需要让你设置的颜色在默认位置终止。你可以通过给每个颜色设置 0，1% 或者 2% 或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， `0%` 表示起始点，而 100% 表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在 0% 处停止，而最后一种颜色是 100%，至于其他颜色则是在它邻近的两种颜色的中间停止。 +你不需要将你的色标设置在默认的位置。你可以为径向和线性渐变设置 0、1 或 2 个百分比值或者绝对长度值来调整它们的位置。如果你将位置设置为百分数，`0%` 表示起始点，而 `100%` 表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么将会自动计算，第一个色标在 `0%` 处，最后一个色标在 `100%`，其他的色标则位于其相邻的两个色标中间。 ```html hidden
@@ -161,9 +161,9 @@ div { {{ EmbedLiveSample('颜色终止位置', 120, 120) }} -### 创建实线 +### 创建硬线 -要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在 50% 标记处共享一个颜色停止点，即渐变的一半： +要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在 `50%` 标记处共享一个颜色停止点，即渐变的一半： ```html hidden
@@ -215,7 +215,7 @@ div { ### 创建色带和条纹 -要在渐变中包含一个实心的非过渡颜色区域，请包含颜色起止点的两个位置。颜色起止点可以有两个位置，这相当于两个连续颜色在不同位置具有相同的颜色起止点。颜色将在第一个颜色起止点时达到完全饱和，保持该饱和度到第二个颜色起止点，并通过相邻颜色起止点的第一个位置过渡到相邻颜色起止点的颜色。 +要在渐变中包含一个实心、非过渡的颜色区域，请包含色标的两个位置。色标可以有两个位置，这相当于两个连续颜色在不同位置具有相同的色标。颜色将在第一个色标时达到完全饱和，保持该饱和度到第二个色标，并通过相邻色标的第一个位置过渡到相邻色标的颜色。 ```html hidden
@@ -273,15 +273,15 @@ div { {{ EmbedLiveSample('创建色带和条纹', 120, 120) }} -In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on. +在上面的第一个例子中，黄绿色从 0% 的位置中开始（这是推断出来的），然后到 20% 的位置，在之后的渐变宽度的 10% 内，开始由黄绿色转换为红色，在 30% 的位置到达纯红色，然后一直保持为红色，直到渐变中的 45% 的位置，然后淡化到青色，这持续了渐变的 15% 的过程，然后然后继续。 -In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect. +在第二个例子中，每个颜色的第二个色标都是相邻颜色的第一个色标，创建一个条纹效果。 -In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration. +在这两个例子中，渐变都写了两次：第一个是 CSS Images Level 3 方法，可为每个色标重复颜色，第二个是 CSS Images Level 4 多个色标方法，在一个线性的色标声明中包含两个色标长度。 -### Controlling the progression of a gradient +### 控制渐变的进程 -By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to hilight the difference the color hint can make: +默认情况下，渐变在两个相邻的色标之间都是均匀推进的，两个色标之间的中点是颜色值的中点。你可以控制两个色标之间的{{Glossary("interpolation","插值")}}，或者过程，方法是添加一个颜色提示位置。在这个例子中，颜色在渐变过程的 20% 而不是 50% 的位置到达黄绿色和青色之间的中点。第二个例子没有提示，因此可以通过对比看出颜色提示的效果。 ```html hidden
@@ -300,18 +300,18 @@ div { ```css .colorhint-gradient { - background: linear-gradient(to top, black, 20%, cyan); + background: linear-gradient(to top, lime, 20%, cyan); } .regular-progression { - background: linear-gradient(to top, black, cyan); + background: linear-gradient(to top, lime, cyan); } ``` -{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }} +{{ EmbedLiveSample('控制渐变的进程', 120, 120) }} -### Overlaying gradients +### 叠加渐变 -Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top. +渐变支持透明度，所以你可以将多个背景叠加起来以实现一些非常好看的效果。背景是从顶部到底部堆叠的，指定的第一个就是顶部。 ```html hidden
@@ -331,11 +331,11 @@ div { } ``` -{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }} +{{ EmbedLiveSample('叠加渐变', 300, 150) }} -### Stacked gradients +### 堆叠渐变 -You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible. +你可以将渐变与其他的渐变堆叠起来。只要顶部的渐变不是完全不透明的，那么下面的渐变就会依然可见。 ```html hidden
@@ -359,15 +359,15 @@ div { } ``` -{{ EmbedLiveSample('Stacked_gradients', 200, 200) }} +{{ EmbedLiveSample('堆叠渐变', 200, 200) }} -## Using radial gradients +## 使用径向渐变 -Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical. +径向渐变类似于线性渐变，除了是从一个中心点向外辐射的。你可以指定中心点的位置。你还可以使其为圆形或者是椭圆形。 -### A basic radial gradient +### 基本的径向渐变 -As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box: +和线性渐变一样，创建径向渐变所需要的就是两个颜色。默认情况下，渐变的中心点是 50% 50% 的位置，且渐变是椭圆的以匹配盒的比例。 ```html hidden
@@ -386,11 +386,11 @@ div { } ``` -{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }} +{{ EmbedLiveSample('基本的径向渐变', 120, 120) }} -### Positioning radial color stops +### 设置径向色标的位置 -Again like linear gradients, you can position each radial color stop with a percentage or absolute length. +和线性渐变一样，你可以用百分比或者绝对长度指定每个径向色标的位置。 ```html hidden
@@ -409,11 +409,11 @@ div { } ``` -{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }} +{{ EmbedLiveSample('设置径向色标的位置', 120, 120) }} -### Positioning the center of the gradient +### 设置渐变的中心 -You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top. +你可以使用关键字、百分比或者绝对长度、长度和百分比值的重复（如果存在，否则就是从左侧位置和顶部位置开始的）以指定渐变的中心。 ```html hidden
@@ -432,15 +432,15 @@ div { } ``` -{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }} +{{ EmbedLiveSample('设置渐变的中心', 120, 120) }} -### Sizing radial gradients +### 设置径向渐变的大小 -Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default. +和线性渐变不同，你可以指定径向渐变的大小。可能的值包括 `closest-corner`、`closest-side`、`farthest-corner` 和 `farthest-side`，其中 `farthest-corner` 是默认值。圆的大小为长度，椭圆则是长度和百分比。 -#### Example: closest-side for ellipses +#### 示例：椭圆渐变的 closet-side 值 -This example uses the `closest-side` size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box. +这个例子使用了 `closest-side` 大小值，意思就是大小是通过开始点（中心）和包围盒的最近一侧的距离设置的。 ```html hidden
@@ -465,11 +465,11 @@ div { } ``` -{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }} +{{ EmbedLiveSample('示例：椭圆渐变的 closet-side 值', 240, 100) }} -#### Example: farthest-corner for ellipses +#### 示例：椭圆渐变的 farthest-corner 值 -This example is similar to the previous one, except that its size is specified as `farthest-corner`, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point. +这个例子和前一个类似，但是其大小是以 `farthest-corner` 指定的，这会将渐变的大小设置为从开始点到包围盒的距离开始点的最远角的距离设置的。 ```html hidden
@@ -494,11 +494,11 @@ div { } ``` -{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }} +{{ EmbedLiveSample('示例：椭圆渐变的 farthest-corner 值', 240, 100) }} -#### Example: closest-side for circles +#### 示例：圆形渐变的 closet-side 值 -This example uses `closest-side`, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width. +这个例子使用了 `closest-side`，使得圆的半径是渐变中心到最近一侧的距离。在这个例子中，半径是中心到底部的距离，因为渐变位于左侧 25%、底部 25% 的位置，而 div 元素的高度小于宽度。 ```html hidden
@@ -523,11 +523,63 @@ div { } ``` -{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }} +{{ EmbedLiveSample('示例：圆形渐变的 closet-side 值', 240, 120) }} -### Stacked radial gradients +#### 示例：椭圆形渐变长度或百分比 -Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom. +对于椭圆，你可以使用长度或者百分比来设置其大小，第一个值代表了水平半径，第二个值是竖直半径，你可以使用百分比以表示相对于盒在那个维度上的的大小的值。在下面这个例子中，我使用了百分比以表示水平半径。 + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-ellipse-size { + background: radial-gradient( + ellipse 50% 50px, + red, + yellow 10%, + #1e90ff 50%, + beige + ); +} +``` + +{{ EmbedLiveSample('示例：椭圆长度或百分比', 240, 120) }} + +#### 示例：圆形渐变的长度 + +对于圆，尺寸可以用 [\](/zh-CN/docs/Web/CSS/length) 提供，这就是圆的尺寸。 + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-circle-size { + background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige); +} +``` + +{{ EmbedLiveSample('示例：圆的长度', 240, 120) }} + +### 堆叠径向渐变 + +就像线性渐变一样，你也可以堆叠径向渐变。指定的第一个位于顶部，最后一个位于底部。 ```html hidden
@@ -562,17 +614,94 @@ div { } ``` -{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }} +{{ EmbedLiveSample('堆叠径向渐变', 200, 200) }} + +## 使用锥形渐变 + +**`conic-gradient()`** [CSS](/zh-CN/docs/Web/CSS) 函数创建包含颜色围绕中心点旋转（而不是从中心点辐射）产生的渐变的图像。锥形渐变的例子包括了饼图和{{glossary("color wheel", "色轮")}}，但是也可以用于创建棋盘格和其他有趣的效果。 + +锥形渐变的语法和径向渐变的语法类似，但是色标是围绕渐变弧（圆的圆周）进行的，而不是从渐变中心出现的渐变线上，并且色标是百分比或度数：绝对长度无效。 + +在径向渐变中，颜色从椭圆中心的位置在各个方向上向外过渡。在锥形渐变中，颜色围绕圆的中心在圆周上旋转过渡，从顶部开始，顺时针进行。类似于径向渐变，你可以设置渐变的中心。类似于线性渐变，你可以改变渐变的角度。 + +### 基本的锥形渐变 + +和线性和径向的渐变类似，创建锥形渐变所需要的就是两个颜色。默认情况下，渐变的中心位于 50% 50% 的位置，渐变的开始点是朝上的。 + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.simple-conic { + background: conic-gradient(red, blue); +} +``` + +{{ EmbedLiveSample('基本的锥形渐变', 120, 120) }} + +### 设置锥形渐变的位置 + +和锥形渐变类似，你可以使用关键词、百分比或者绝对长度，以及关键字“at”来设置锥形渐变的中心位置。 + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.conic-gradient { + background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); +} +``` + +{{ EmbedLiveSample('设置锥形渐变的位置', 120, 120) }} + +### 改变角度 + +默认情况下，你指定的不同色标是围绕着圆均等分布的。你可以在开始时使用“from”关键字以及一个角度或者长度以指定锥形渐变的起始点，然后你可以在后面包括角度或者长度以指定不同的位置。 + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.conic-gradient { + background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green); +} +``` + +{{ EmbedLiveSample('改变角度', 120, 120) }} -## Using repeating gradients +## 使用重复渐变 -The {{cssxref("linear-gradient")}} and {{cssxref("radial-gradient")}} properties don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}} and {{cssxref("repeating-radial-gradient")}} properties are available to offer this functionality. +{{cssxref("gradient/linear-gradient", "linear-gradient()")}}、{{cssxref("gradient/radial-gradient", "radial-gradient()")}} 和 {{cssxref("gradient/conic-gradient", "conic-gradient()")}} 函数不支持自动重复的色标。但是，{{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}、{{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} 和 {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 函数可以用于提供此功能。 -The size of the gradient line that repeats is the length between the first color stop value and the last color stop length value. If the last color stop has just a color and no color stop length, the value defaults to 0, meaning the linear gradient will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. +重复渐变线或弧的大小，是第一个色标和最后一个色标之间的长度。如果第一个色标只有颜色没有色标长度，那么值默认为 0。如果最后一个色标只有颜色没有色标长度，那么值默认为 100%。如果都没有指定，那么渐变线是 100%，意味着线性和锥形的渐变都不会重复，径向渐变只会在渐变的半径小于中心点和最远角之间的距离时重复。如果第一个色标声明了，其值大于 0，渐变也会重复，因为线或弧的大小就是第一个色标和最后一个色标之间的距离，小于 100% 或 360 度。 -### Repeating linear gradients +### 重复的线性渐变 -This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long. +这个例子使用了 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} 以创建一个沿着直线重复推进的渐变。随渐变进行，颜色会重复循环。在这个例子中，渐变线的长度为 10px。 ```html hidden
@@ -597,13 +726,13 @@ div { } ``` -{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }} +{{ EmbedLiveSample('重复的线性渐变', 120, 120) }} -### Multiple repeating linear gradients +### 多个线性渐变 -Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different [background-sizes](/zh-CN/docs/Web/CSS/background-size), optionally with different [background-position](/zh-CN/docs/Web/CSS/background-position) property values, for each gradient image. We are using transparency. +和常规的线性和径向渐变类似，你可以包含多个渐变，一个在另一个的顶部。这只有在渐变部分透明时有效，以允许的后续的渐变穿透透明区域显示，或者你为每个渐变图像指定不同的 [background-size](/zh-CN/docs/Web/CSS/background-size)，还可以有不同的 [background-position](/zh-CN/docs/Web/CSS/background-position) 属性值。我们使用透明。 -In this case the gradient lines are 300px, 230px, and 300px long. +在这个例子中，渐变线的长度为 300px、230px 和 300px。 ```html hidden
@@ -643,11 +772,11 @@ div { } ``` -{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }} +{{ EmbedLiveSample('多个线性渐变', 600, 400) }} -### Plaid gradient +### 格纹渐变 -To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax: +要创建格纹，我们使用了几个重叠的带有透明的渐变。在第一个背景声明中，我们分别列举出了每个色标。第二个背景属性声明使用了色标的多个位置的语法： ```html hidden
@@ -732,11 +861,11 @@ div { } ``` -{{ EmbedLiveSample('Plaid_gradient', 200, 200) }} +{{ EmbedLiveSample('格纹渐变', 200, 200) }} -### Repeating radial gradients +### 重复的径向渐变 -This example uses {{cssxref("repeating-radial-gradient")}} to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats. +这个例子使用了 {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} 以创建从中心点重复向外辐射的渐变。颜色会随渐变重复而循环。 ```html hidden
@@ -760,9 +889,9 @@ div { } ``` -{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }} +{{ EmbedLiveSample('重复的径向渐变', 120, 120) }} -### Multiple repeating radial gradients +### 多个重复的径向渐变 ```html hidden
@@ -798,70 +927,13 @@ div { } ``` -{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }} - -### Plaid gradient - -To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax: - -``` -
-``` - -``` -div { - width: 200px; - height: 200px; -} -``` +{{ EmbedLiveSample('多个重复的径向渐变', 250, 150) }} -``` -.plaid-gradient { - background: - repeating-linear-gradient(90deg, transparent, transparent 50px, - rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, - transparent 56px, transparent 63px, - rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, - transparent 69px, transparent 116px, - rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), - repeating-linear-gradient(0deg, transparent, transparent 50px, - rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, - transparent 56px, transparent 63px, - rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, - transparent 69px, transparent 116px, - rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), - repeating-linear-gradient(-45deg, transparent, transparent 5px, - rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), - repeating-linear-gradient(45deg, transparent, transparent 5px, - rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px); +## 参见 - background: - repeating-linear-gradient(90deg, transparent 0 50px, - rgba(255, 127, 0, 0.25) 50px 56px, - transparent 56px 63px, - rgba(255, 127, 0, 0.25) 63px 69px, - transparent 69px 116px, - rgba(255, 206, 0, 0.25) 116px 166px), - repeating-linear-gradient(0deg, transparent 0 50px, - rgba(255, 127, 0, 0.25) 50px 56px, - transparent 56px 63px, - rgba(255, 127, 0, 0.25) 63px 69px, - transparent 69px 116px, - rgba(255, 206, 0, 0.25) 116px 166px), - repeating-linear-gradient(-45deg, transparent 0 5px, - rgba(143, 77, 63, 0.25) 5px 10px), - repeating-linear-gradient(45deg, transparent 0 5px, - rgba(143, 77, 63, 0.25) 5px 10px); -} -``` - -{{ EmbedLiveSample('Plaid_gradient', 200, 200) }} - -## See also - -- Gradient functions: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} -- Gradient-related CSS data types: {{cssxref("<gradient>")}}, {{cssxref("<image>")}} -- Gradient-related CSS properties: {{cssxref("background")}}, {{cssxref("background-image")}} -- [CSS Gradients Patterns Gallery, by Lea Verou](http://lea.verou.me/css3patterns/) -- [CSS3 Gradients Library, by Estelle Weyl](http://standardista.com/cssgradients) -- [Gradient CSS Generator](https://cssgenerator.org/gradient-css-generator.html) +- 渐变函数：{{cssxref("gradient/linear-gradient", "linear-gradient()")}}、{{cssxref("gradient/radial-gradient", "radial-gradient()")}}、{{cssxref("gradient/conic-gradient", "conic-gradient()")}}、{{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}、{{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}、{{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} +- 和渐变有关的 CSS 数据类型：{{cssxref("<gradient>")}}、{{cssxref("<image>")}} +- 和渐变有关的 CSS 属性：{{cssxref("background")}}、{{cssxref("background-image")}} +- [CSS 渐变纹样图集，作者 Lea Verou](https://projects.verou.me/css3patterns/) +- [CSS 渐变库，作者 Estelle Weyl](http://standardista.com/cssgradients/) +- [渐变 CSS 生成器](https://cssgenerator.org/gradient-css-generator.html) 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 5432cfefb18864..63d0fcbae7db24 100644 --- a/files/zh-cn/web/css/gradient/conic-gradient/index.md +++ b/files/zh-cn/web/css/gradient/conic-gradient/index.md @@ -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", "色轮")}}。`conic-gradient()` 函数的结果是 {{CSSxRef("<gradient>")}} 数据类型的对象，此对象是一种特殊的 {{CSSxRef("<image>")}} 数据类型。 {{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}} @@ -39,57 +39,57 @@ background: conic-gradient( - `` - : 使用与 [background-position](/zh-CN/docs/Web/CSS/background-position) 属性相同的长度、顺序和关键字值，定义渐变的中心。如果省略，默认值是 `center`，表示渐变是居中的。 - `` - - : 一个颜色断点的 {{CSSxRef("<color>")}} 值，并且跟随着一个或两个可选的断点位置（一个沿着渐变圆周轴的{{CSSxRef("<angle>")}}）。 + - : 色标（color stop）的 {{CSSxRef("<color>")}} 值，然后是一个或两个可选的色标位置（沿着渐变圆周轴的 {{CSSxRef("<angle>")}}）。 - `` - - : 颜色中转点是一个 {{Glossary("interpolation")}} 提示，它定义了在相邻颜色之间渐变如何进行。长度定义了渐变色应在两个颜色断点之间的哪一点到达颜色过渡的中点。如果省略，颜色转换的中点是两个颜色断点之间的中点。 + - : {{Glossary("interpolation", "插值")}}提示，定义了在相邻色标之间的渐变如何进行。这个长度定义了渐变色应在两个色标之间的哪一点到达颜色过渡的中点。如果省略，颜色过渡的中点是两个色标之间的中点。 -> **备注：** 渲染颜色中间点的规则（[color stops in CSS gradients](#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)；就是说，它没有天然的或首选的尺寸，也没有首选的比例。它的具体大小将与它所应用的元素的大小相匹配，或者如果设置为元素大小以外的值，则与 `` 的大小相匹配。 +与其他渐变一样，锥形渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#描述)，也就是说没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。 要创建重复的锥形渐变来填充 360 度旋转，应该使用 {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 函数。 -因为 `` 属于 `` 数据类型，它们只能用在能使用 `` 的地方。因此，`conic-gradient()` 在 {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("<color>")}} 数据类型的属性上不起作用。 +由于 `` 属于 `` 数据类型，因此只能用在能使用 `` 的地方。因此，`conic-gradient()` 在 {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("<color>")}} 数据类型的属性上不起作用。 > **备注：** 为什么它被称为“锥形”渐变？如果色块的一侧比另一侧亮得多，则从上面看，它可能看起来像一个圆锥体。 ### 锥形渐变的合成 -锥形渐变语法与径向渐变语法类似，但颜色断点放置在渐变圆弧（圆的周长）周围，而不是从渐变中心出现的渐变线上。使用锥形渐变时，颜色会围绕圆心旋转，从顶部开始顺时针旋转。在径向渐变中，颜色从椭圆中心向各个方向向外过渡。 +锥形渐变语法与径向渐变语法类似，但色标放置在渐变圆弧（圆的周长）周围，而不是从渐变中心出现的渐变线上。使用锥形渐变时，颜色会围绕圆心旋转，从顶部开始顺时针旋转。在径向渐变中，颜色从椭圆中心向各个方向向外过渡。 -![沿着锥形渐变的圆周和径向渐变的轴的颜色断点](screenshot_2018-11-29_21.09.19.png) +![沿着锥形渐变的圆周和径向渐变的轴的色标](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_ 角度来旋转。渐变的颜色由倾斜的颜色断点、它们的起点、终点，以及介于两者之间的可选的倾斜的颜色断点决定。颜色之间的过渡可以通过相邻颜色的颜色断点之间的颜色提示来改变。 +渐变的弧度是渐变的周长。渐变或弧度的*起始点*方向是北，或 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); ``` -如果两个或多个颜色断点位于同一位置，则转换将是在该位置声明的第一个和最后一个颜色之间的硬线。要使用锥形渐变创建饼图（这不是创建饼图的正确方法，因为无法访问背景图像），请使用硬颜色断点——其中两个相邻颜色断点的颜色断点角度相同。最简单的方法是使用多个位置的颜色断点。以下两种声明是等效的： +如果两个及以上色标位于同一位置，则转换将是在该位置声明的第一个和最后一个颜色之间的硬线。要使用锥形渐变创建饼图（这不是创建饼图的正确方法，因为背景图像并非无障碍），请使用硬色标——其中两个相邻色标的色标角度相同。最简单的方法是使用多个位置的色标。以下两种声明是等效的： ```css conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); 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); @@ -102,18 +102,18 @@ conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad background-size: 25% 25%; ``` -你可以混合和匹配不同的角度单位，但最好不要，以上的内容很难理解。 +你可以混合和匹配不同的角度单位，但最好不要这样做，以上的内容就已经很难理解。 -### 正式语法 +### 形式语法 {{csssyntax}} -## 无障碍说明 +## 无障碍考虑 -浏览器不向辅助技术提供任何关于背景图像的特殊信息。这主要对屏幕阅读器来说很重要，因为屏幕阅读器不会宣布其存在，因此不会向用户传达任何信息。虽然可以创建饼图、棋盘和其他带有圆锥梯度的效果，但 CSS 图像不提供指定替代文本的原生方式，因此屏幕阅读器用户无法访问由圆锥梯度表示的图像。如果图像包含对理解页面的总体用途至关重要的信息，那么最好在文档中对其进行语义描述。 +浏览器不向辅助技术提供任何关于背景图像的特殊信息。这主要对屏幕阅读器来说很重要，因为屏幕阅读器不会宣布其存在，因此不会向用户传达任何信息。虽然可以创建饼图、棋盘和其他带有圆锥梯度的效果，但 CSS 图像不提供指定替代文本的原生方式，因此屏幕阅读器用户无法访问由锥形渐变表示的图像。如果图像包含对理解页面的总体用途至关重要的信息，那么最好在文档中对其进行语义描述。 -- [MDN Understanding WCAG, Guideline 1.1 explanations](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +- [MDN 理解 WCAG，指南 1.1 解释](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content) +- [理解成功标准 1.1.1 | W3C 理解 WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) ## 示例 @@ -161,7 +161,7 @@ div { ### 渐变饼图 -本示例使用多位置颜色断点，相邻颜色具有相同的颜色断点值，从而创建出条纹效果。 +本示例使用多位置色标，相邻颜色具有相同的色标值，从而创建出条纹效果。 ```css hidden div { @@ -225,7 +225,7 @@ div { ## 参见 - [使用 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("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()")}} - {{cssxref("element", "element()")}} diff --git a/files/zh-cn/web/css/gradient/index.md b/files/zh-cn/web/css/gradient/index.md index c4b340bd383207..2fe724e8453436 100644 --- a/files/zh-cn/web/css/gradient/index.md +++ b/files/zh-cn/web/css/gradient/index.md @@ -5,20 +5,48 @@ slug: Web/CSS/gradient {{CSSRef}} -**``** 是一种{{cssxref("<image>")}}CSS 数据类型的子类型，用于表现两种或多种颜色的过渡转变。**``** [没有内在尺寸](/zh-CN/docs/CSS/image#no_intrinsic)；即，不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元素的大小。 +**``** [CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types) 是 {{cssxref("<image>")}} 的一种特殊类型，包含两种或多种颜色的过渡转变。 + +{{EmbedInteractiveExample("pages/css/type-gradient.html")}} + +CSS 渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#描述)，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。 ## 语法 -### 渐变函数 +`` 数据类型是由下面列出的函数类型中的一个定义的。 + +### 线性渐变 + +线性渐变会在一个假想的直线上过渡颜色。线性渐变是由 {{cssxref("gradient/linear-gradient", "linear-gradient()")}} 函数产生的。 + +### 径向渐变 + +径向渐变从一个中间点（原点）开始过渡颜色。径向渐变是由 {{cssxref("gradient/radial-gradient", "radial-gradient()")}} 函数产生的。 + +### 重复渐变 + +重复渐变可根据需要复制渐变，以填充指定区域。重复渐变是使用 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} 和 {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} 函数生成的。 + +### 锥形渐变 + +锥形渐变会沿着一个圆过渡颜色。锥形渐变是由 {{cssxref("gradient/conic-gradient", "conic-gradient()")}} 函数产生的。 + +## 插值 + +就像很多包含颜色的插值一样，渐变是在 alpha 预乘的颜色空间中插值的。这会避免在颜色和不透明度都在改变时出现未预料的灰色阴影。（注意旧的浏览器可能在使用 [transparent 关键字](/zh-CN/docs/Web/CSS/named-color#transparent) 时不使用此行为。） + +## 形式语法 + +{{csssyntax}} -**``** 数据类型由下列函数定义。 +## 示例 -#### 线形渐变 +### 线性渐变示例 -颜色值沿着一条隐式的直线逐渐过渡。由{{cssxref("linear-gradient", "linear-gradient()")}}产生。 +简单的线性渐变示例。 ```html hidden -
Linear gradient
+
线性渐变
``` ```css hidden @@ -43,14 +71,14 @@ div { } ``` -{{EmbedLiveSample('线形渐变', 240, 80)}} +{{EmbedLiveSample('线性渐变示例', 240, 120)}} -#### 径向渐变 +### 径向渐变示例 -颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由{{cssxref("radial-gradient", "radial-gradient()")}}函数产生。 +简单的径向渐变。 ```html hidden -
Radial gradient
+
径向渐变
``` ```css hidden @@ -66,16 +94,16 @@ div { } ``` -{{EmbedLiveSample('径向渐变', 240, 80)}} +{{EmbedLiveSample('径向渐变示例', 240, 120)}} -#### 重复渐变 +### 重复渐变示例 -重复多次渐变图案直到足够填满指定元素。由 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}和{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}函数产生。 +简单的重复线性和径向渐变示例。 ```html hidden -
Repeating linear gradient
+
重复的线性渐变

-
Repeating radial gradient
+
重复的径向渐变
``` ```css hidden @@ -106,11 +134,30 @@ div { } ``` -{{EmbedLiveSample('重复渐变', 220, 180)}} +{{EmbedLiveSample('重复渐变示例', 240, 220)}} -## 插值 +### 锥形渐变示例 + +简单的锥形渐变示例。注意这目前并非在浏览器中广泛支持。 + +```html hidden +
锥形渐变
+``` + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```css +.conic-gradient { + background: conic-gradient(lightpink, white, powderblue); +} +``` -与其他的颜色插值一样，颜色渐变也通过 Alpha 预乘 (alpha-permultiplied) 计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。（在使用[transparent keyword](/zh-CN/docs/Web/CSS/color_value#transparent_keyword)时，敬请注意一些没有使用这种计算方式的旧浏览器。） +{{EmbedLiveSample('锥形渐变示例', 240, 240)}} ## 规范 @@ -122,5 +169,8 @@ div { ## 参见 -- [Using CSS gradients](/zh-CN/docs/CSS/Using_CSS_gradients), -- 渐变方程：{{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}; +- [使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients) +- 渐变函数：{{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("gradient/conic-gradient", "conic-gradient()")}}、{{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} +- [CSS 基本数据类型](/zh-CN/docs/Web/CSS/CSS_Types) +- [CSS 单位和值](/zh-CN/docs/Web/CSS/CSS_Values_and_Units) +- [CSS 介绍：值和单位](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/zh-cn/web/css/gradient/linear-gradient/index.md b/files/zh-cn/web/css/gradient/linear-gradient/index.md index f47c77fe80350d..c6dfc5c459b9b8 100644 --- a/files/zh-cn/web/css/gradient/linear-gradient/index.md +++ b/files/zh-cn/web/css/gradient/linear-gradient/index.md @@ -5,283 +5,163 @@ slug: Web/CSS/gradient/linear-gradient {{CSSRef}} -CSS **`linear-gradient()`** 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于{{cssxref("<gradient>")}}数据类型，是一种特别的{{cssxref("<image>")}}数据类型。 +**`linear-gradient()`** [CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions)创建一个由两种或多种颜色沿一条直线进行线性过渡的图像，其结果是 {{cssxref("<gradient>")}} 数据类型的对象，此对象是一种特殊的 {{cssxref("<image>")}} 数据类型。 -``` -/* 渐变轴为45度，从蓝色渐变到红色 */ +{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} + +## 语法 + +```css +/* 渐变轴为 45 度，从蓝色渐变到红色 */ linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); -/* 从下到上，从蓝色开始渐变、到高度 40% 位置是绿色渐变开始、最后以红色结束 */ +/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red); + +/* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */ +linear-gradient(.25turn, red, 10%, blue); + +/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */ +linear-gradient(45deg, red 0 50%, blue 50% 100%); ``` -{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} +### 值 -如同其他 gradient 函数一般，**`linear-gradient()`** 函数[没有内在尺寸](/zh-CN/docs/Web/CSS/image#no_intrinsic)；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。 +- `` + - : 渐变线的起始点位置。如果指定了，则包含 `to` 和两个关键字：一个指定水平位置（`left` 或 `right`），另一个指定竖直位置（`top` 或 `bottom`）。关键词的先后顺序无影响。如果没有指定，则默认为 `to bottom`。 + `to top`、`to bottom`、`to left` 和 `to right` 分别等价于 `0deg`、`180deg`、`270deg` 和 `90deg`。其余值会被转换为角度。 +- {{CSSxRef("<angle>")}} + - : 渐变线的方向的角度。`0deg` 等价于 `to top`，增加值相当于顺时针旋转。 +- `` + - : 色标（color stop）的 {{cssxref("<color>")}} 值，然后是一个或两个可选的色标位置（沿渐变轴的 {{cssxref("<percentage>")}} 值或 {{cssxref("<length>")}} 值）。 +- `` + - : 插值提示，定义渐变色在相邻色标之间的渐变过程。其中的长度定义了渐变色应在两个色标之间的哪个点到达颜色过渡的中点。如果省略该值，颜色过渡的中点就是两个色标之间的中点。 -> **备注：** 利用{{cssxref("repeating-linear-gradient")}}函数可以实现线形重复渐变效果。 +> **备注：** [CSS 渐变中的色标](#线性渐变的构成) 的渲染与 [SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)中的色标遵循相同的规则。 -> **备注：** 由于``数据类型系``的子数据类型，``只能被用于``可以使用的地方。因此，`linear-gradient()` 并不适用于{{Cssxref("background-color")}}以及类似的使用 {{cssxref("<color>")}}数据类型的属性中。 +## 描述 -## 线形渐变的构成 +和其他渐变一样，线性渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#描述)，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。 -线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，`linear-gradient()` 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点 +要创建一个能够重复填满容器的线性渐变，请使用 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} 函数。 -![linear-gradient.png](linear-gradient.png)渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。 +由于 `` 属于 `` 数据类型，因此只能用在能使用 [``](/zh-CN/docs/Web/CSS/image) 的地方。因此，`linear-gradient()` 在 {{CSSxRef("background-color")}} 以及其他使用 {{CSSxRef("<color>")}} 数据类型的属性上不起作用。 -起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内） +### 线性渐变的合成 -同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。 +线性渐变是在一个轴——*渐变线*和两个或者更多个*色标*构成的。轴上的每个点都是一个单独的颜色，要创建平滑的渐变，`linear-gradient()` 函数会绘制出一系列与渐变线垂直的彩色线，每条线都匹配与渐变线相交点的颜色。 -关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质，有时候被叫做不可思议的顶点效应：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。 +![linear-gradient.png](linear-gradient.png) -不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，Web 开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。 +渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点、终点，以及两者之间的可选的中间点（中间点可以有多个）。 -当颜色中间点的位置被隐式定义，它被放置在位于它之前的点和位于它之后的点之间的中间位置处。利用{{cssxref("<length>")}}或者{{cssxref("<percentage>")}}数据类型可以显示定义一个位置。 +*起点*是渐变线上代表起始颜色值的点。*终点*是渐变线上代表最终颜色值的点。这两个点都是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。这一复杂的定义导致了一个有趣的效果，有时称为 _magic corners_：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。 -``` +#### 自定义渐变 + +通过提供额外的色标，可以在多种颜色之间创建高度个性化的过渡效果。色标的位置可以由 {{CSSxRef("<length>")}} 值或 {{CSSxRef("<percentage>")}} 值清晰地指定。如果你不指定颜色的位置，那么将会位于前面和后面两点的中点。以下两个渐变是等价的： + +```css linear-gradient(red, orange, yellow, green, blue); 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% 的位置。 -``` +```css linear-gradient(red 10%, 30%, blue 90%); ``` -如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。 +如果两个及以上色标位于同一个位置，那么过渡会在这个位置的第一个和最后一个颜色之间产生一条硬线。 -颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在 40% 的位置，然后过渡从黄色到蓝色终止于 65% 的位置处。 +色标应该以递增的顺序列出。后面的更低值的色标会覆盖前面的值并创建硬过渡线。下面的渐变在 40% 处由红色变为黄色，然后在 25% 处由黄色变为蓝色： -``` +```css linear-gradient(red 40%, yellow 30%, blue 65%); ``` -允许颜色多个颜色终止位置。通过在 CSS 声明中包含两个位置，可以将一个颜色声明为两个相邻的颜色终止。以下三个梯度是相等的： +允许有多个位置的色标。一个颜色可以声明为多个相邻的色标，方法就是在 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% 标记处。 - -## 语法 - -### 值 - -- `` - - : 描述渐变线的起始点位置。它包含 to 和两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。关键词的先后顺序无影响，且都是可选的。 - to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。 -- `` - - : 用角度值指定渐变的方向（或角度）。角度顺时针增加。 -- `` - - : 由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS 渐变的颜色渲染采取了与 SVG 相同的规则。 -- `` - - : 颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。 - -> **备注：** 渲染颜色中间点的规则 [color stops in CSS gradients](#Gradient_with_multiple_color_stops)与一致 [SVG gradients](/zh-CN/docs/Web/SVG/Tutorial/Gradients)。 - -### 正式语法 - -``` -linear-gradient( - [ | to ,]? ) - \---------------------------------/ \----------------------------/ - Definition of the gradient line List of color stops - -where = [ left | right ] || [ top | bottom ] - and = [ [, ? ]? ]#, - and = [ ]? - and = [ | ]{1,2} - and = [ | ] -``` - -### 语法历史 - -`linear-gradient` 的语法由 2008 年实施的 [first Apple proposal](http://www.webkit.org/blog/175/introducing-css-gradients/) 发展而来。 - -``` --webkit-gradient(, [, ]?, [, ]? [, ]*) -``` - -在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的 CSS 值。W3C 并未收到相关草案。 - -一个替代语法在 2009 年由 Mozilla 提出并实现。这个语法需要两个 CSS 函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为： - -``` --moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? [, ]+); -``` - -新的语法不需要 `to()`、`from()` 和 `color-stop()` 函数，所以这些函数被丢弃。而 `top` / `bottom` 与 `left` / `right` 的顺序也被标记为不重要，所以 `Mozilla` 移除了必需首先定义 `top` / `bottom` 的限制。 - -新的语法仍然有一个缺点：它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后，它被增加到[CSS Images Values and Content Replacement Level 3 draft in 2011-02-17](http://www.w3.org/TR/2011/WD-css3-images-20110217/#ltlinear-gradient)。 - -- 原生支持{{ cssxref("<angle>") }}允许任何方向的渐变 -- 定义 magic corner 算法，允许使用简便的方式定义端点的颜色，从而简化了开发者的工作 - -在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被 Webkit 和 Trident（IE）实现。 - -``` -linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? [, ]+); -``` - -{{ cssxref("<angle>") }}属性的添加导致了一些混乱，它应当指向终点方向，但是这些关键字却通常指起始方向。在[related W3C CSSWG thread](http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html)可以查看一些讨论。在一项新的语法中，这个问题被修正。它仍然使用方向关键字，但是在关键字之前增加关键字 `to` 。这项语法被添加到[CSS Images Values and Content Replacement Level 3 draft in 2011-09-08](http://www.w3.org/TR/2011/WD-css3-images-20110908/#ltlinear-gradient)。 - -``` -linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? [, ]+); -``` +默认情况下，如果 `0%` 的地方没有颜色，那么那里就是声明的第一个颜色。类似地，最后一个颜色也会持续到 `100%` 的位置，或者如果最后一个色标没有声明长度，那么就是在 `100%` 的位置。 -以上应当是最终语法。 +## 形式语法 -在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终 Apple 的提案显示，带前缀的语法都使用极坐标定义 {{ cssxref("<angle>") }} 参数，导致了`0deg` 指向东方。为了与 CSS 的其他部分保持一致，标准将 0deg 指向北方。为了防止使用前缀版本属性的站点不至于崩溃，它们保持原始的角度定义（0deg 指向东方）。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下，Gecko 给所有语法都加上前缀，不带前缀且没有 to 关键词的语法会被丢弃。 +{{csssyntax}} ## 示例 ### 45 度渐变 -可以为渐变轴某个位置指定某个颜色，这些位置可被称为“颜色中间点（color-stops）”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内，每个颜色都表现为一条垂直于渐变轴的直线。在下图中，渐变轴从左上角出发并且呈 45 度。渐变轴上定义了红色和蓝色两个颜色中间点。 - -```html -
+```css hidden +body { + width: 100vw; + height: 100vh; +} ``` ```css -div { +body { background: linear-gradient(45deg, red, blue); } ``` {{EmbedLiveSample("45 度渐变",120,120)}} -### 从 60% 的梯度线开始的渐变 - -有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。 +### 从渐变线 60% 处开始的渐变 -```html -
+```css hidden +body { + width: 100vw; + height: 100vh; +} ``` ```css -div { - background: linear-gradient(135deg, red, red 60%, blue); +body { + background: linear-gradient(135deg, orange 60%, cyan); } ``` -#### 结果 - -{{EmbedLiveSample("从 60% 的梯度线开始的渐变")}} - -### 具有多个颜色停止的渐变 +{{EmbedLiveSample("从渐变线 60% 处开始的渐变", 120, 120)}} -如果第一个颜色中间点没有 `` 或 ``属性，那么它默认为 0%。如果最后一个颜色中间点没有 `` 或者 ``属性，则默认为 100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。 +### 有多位置色标的渐变 -颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后，如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小，那它的位置会按照离它最近的一个颜色中间点来计算。 +这个示例使用了多位置的色标，两个相邻的颜色有相同的色标值，形成了条纹效果。 -```html -
A rainbow made from a gradient
+```css hidden +body { + width: 100vw; + height: 100vh; +} ``` ```css -div { +body { background: linear-gradient( to right, - red, - orange, - yellow, - green, - blue, - indigo, - violet + red 20%, + orange 20% 40%, + yellow 40% 60%, + green 60% 80%, + blue 80% ); } ``` -#### 结果 - -{{EmbedLiveSample("具有多个颜色停止的渐变")}} - -### 包含多个颜色中间点的渐变 - -如果第一个颜色中间点没有定义长度或百分比，它将包含缺省值 0。如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值 100%。如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。 - -颜色中间点必须被按顺序定义。第一个和最后一个被分配为默认值之后，如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。 - -使用渐变制作彩虹 - -```css -background: linear-gradient( - to right, - red, - orange, - yellow, - green, - blue, - indigo, - violet -); -``` - -### 线性重复渐变 - -线性渐变目前不能实现重复渐变。默认情况下，渐变会撑满它被定义的元素。这项功能可以参考{{ Cssxref("repeating-linear-gradient") }}。 - -### 使用透明度 - -```html -
线性与透明度
-``` - -```css -div { - background: linear-gradient(to bottom right, red, rgba(0, 0, 0, 0)); -} -``` - -#### 结果 - -{{EmbedLiveSample("使用透明度")}} - -如果所有点和长度都使用固定单位（而不是相对于 background-size 的值指定的百分比或关键字），则渐变背景不受 {{Cssxref("background-size")}} 的影响。 - -### 跨浏览器实施渐变 - -这里包含了所有前缀的渐变设置。 - -```css -.grad { - background-color: #f07575; /* 不支持渐变的浏览器回退方案 */ - background-image: -webkit-linear-gradient( - top, - hsl(0, 80%, 70%), - #bada55 - ); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ - background-image: -moz-linear-gradient( - top, - hsl(0, 80%, 70%), - #bada55 - ); /* 支持 Firefox (3.6 to 15) */ - background-image: -o-linear-gradient( - top, - hsl(0, 80%, 70%), - #bada55 - ); /* 支持旧 Opera (11.1 to 12.0) */ - background-image: linear-gradient( - to bottom, - hsl(0, 80%, 70%), - #bada55 - ); /* 标准语法; 需要最新版本 */ -} -``` +{{EmbedLiveSample("有多位置色标的渐变", 120, 120)}} -\-moz-前缀的规则用于兼容 Fx 3.6 to Fx 15 的火狐浏览器。 -webkit-前缀的规则用于兼容在 Android 4.3 以前版本、iOS 6.1 以前版本、Safari 6。当使用带前缀的规则时，不要加“to”关键字。 +### 更多线性渐变示例 -> **备注：** 如果将\标签的 background-image 属性设置为线性渐变`linear-gradient`，除非你还设置文档根标签（例如\标签）的[min-height](/zh-CN/docs/Web/CSS/min-height)属性，否则渐变不会填充浏览器屏幕到 100％。 +更多示例请见[使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients)。 ## 规范 @@ -293,7 +173,12 @@ div { ## 参见 -- [Using CSS gradients](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients), {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}; -- Some properties where it can be used: {{cssxref("background-image")}}, {{cssxref("background")}}; -- [CSS Gradients Patterns Gallery, by Lea Verou](http://lea.verou.me/css3patterns/) -- [CSS3 Gradients Library, by Estelle Weyl](http://standardista.com/cssgradients). +- [使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients) +- 其他渐变函数：{{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}、{{cssxref("gradient/radial-gradient", "radial-gradient()")}}、{{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}、{{cssxref("gradient/conic-gradient", "conic-gradient()")}}、{{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} +- {{CSSxRef("<image>")}} +- {{cssxref("element", "element()")}} +- {{cssxref("image/image","image()")}} +- {{cssxref("image/image-set","image-set()")}} +- {{cssxref("cross-fade", "cross-fade()")}} +- [CSS 图像模块](/zh-CN/docs/Web/CSS/CSS_images) +- MDN 博客中的文章 [CSS 颜色中的新功能、渐变和色调（级别 4）](/en-US/blog/css-color-module-level-4/)（2023 年） diff --git a/files/zh-cn/web/css/gradient/radial-gradient/index.md b/files/zh-cn/web/css/gradient/radial-gradient/index.md index be8eecac6de1b5..da063eb0fea8a3 100644 --- a/files/zh-cn/web/css/gradient/radial-gradient/index.md +++ b/files/zh-cn/web/css/gradient/radial-gradient/index.md @@ -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("<gradient>")}} 数据类型的对象。这是一种特别的 {{cssxref("<image>")}}。 +**`radial-gradient()`** [CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions)创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成，其形状可以是圆形或椭圆形。函数的结果是 {{cssxref("<gradient>")}} 数据类型的对象，此对象是一种特殊的 {{cssxref("<image>")}} 类型。 {{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}} @@ -20,49 +20,51 @@ radial-gradient(circle at center, red 0, blue, green 100%) ## 值 -- `{{cssxref("<position>")}}` - - : {{cssxref("<position>") }} 与 {{cssxref("background-position")}} 或者 {{ Cssxref("transform-origin")}} 类似。如果没有指定，默认为中心点。 +- {{cssxref("<position>")}} + - : 渐变的位置，和解析 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}} 的方式相同。如果没有指定，默认为 `center`。 - `` - - : 渐变结束时的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。 + - : 渐变的结束形状。值可以是 `circle`（圆形，渐变的形状是一个半径不变的正圆）或 `ellipse`（椭圆，渐变形状是轴对称椭圆）。如果没有指定，默认为 `ellipse`。 - `` - - : 确定渐变结束形状的大小。如果省略，则默认为最远角。它可以显式给出，也可以通过关键字给出。出于关键字定义的目的，将梯度框边缘视为在两个方向上无限延伸，而不是有限线段。 + - : 确定渐变结束形状的大小。如果省略，则默认为最远角（farthest-corner）。它可以显式给出，也可以通过关键字给出。就关键字定义而言，渐变框边缘应视为向两个方向无限延伸，而不是有限线段。 对于它们的 ``，圆形和椭圆渐变都接受以下关键字： - | 关键字 | 描述 | - | ----------------- | -------------------------------------------------------------------------------------------------------------------- | - | `closest-side` | 渐变结束的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。 | - | `closest-corner` | 渐变结束的边缘形状与容器距离渐变中心点最近的一个角相交。 | - | `farthest-side` | 与 `closest-side` 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。 | - | `farthest-corner` | 渐变结束的边缘形状与容器距离渐变中心点最远的一个角相交。 | + | 关键字 | 描述 | + | ----------------- | ------------------------------------------------------------------------------------------------------------------ | + | `closest-side` | 渐变结束形状如果是圆形，与容器距离渐变中心点最近的一边相切，如果是椭圆，则与距离渐变中心点最近的垂直和水平边相切。 | + | `closest-corner` | 渐变结束形状与容器距离渐变中心点最近的一个角相交。 | + | `farthest-side` | 类似于 `closest-side`，但是结束形状与容器距离渐变中心点最远的一边（或最远的垂直和水平边）相切。 | + | `farthest-corner` | 默认值，渐变的结束形状与容器距离渐变中心点最远的一个角相交。 | - 如果 `` 被指定为圆形，则可以为大小指定一个 [``](/zh-CN/docs/Web/CSS/length)，它明确了圆的半径。 + 如果 `` 被指定为 `circle`，则可以为大小指定一个 [``](/zh-CN/docs/Web/CSS/length) 值，它明确了圆的半径。负值是无效的。 - 如果 `` 被指定为椭圆，或者被忽略，则可以使用 [``](/zh-CN/docs/Web/CSS/length-percentage) 用两个值来指定椭圆的大小。第一个值表示水平半径，第二个值表示垂直半径。百分比值是相对于渐变框的相应尺寸的。负值无效。 + 如果 `` 被指定为 `ellipse`，则可以使用带有两个值的 [``](/zh-CN/docs/Web/CSS/length-percentage) 来指定椭圆的大小。第一个值表示水平半径，第二个值表示垂直半径。百分比值是相对于渐变框在相应维度上的大小的。负值是无效的。 + + 如果 `` 关键词被省略，渐变形状会由给定的大小决定。一个 `` 产生圆，两个 `` 单位的值产生椭圆。一个 `` 值是无效的。 - `` - - : 色值结束点（color stop）的 {{cssxref("<color>")}} 值，后跟一个或两个可选的停止位置（沿渐变轴的 {{cssxref("<percentage>")}} 或 {{cssxref("<length>")}}）。`0%` 的百分比，或者 `0` 的长度，代表渐变的中心；值 `100%` 表示结束形状与虚拟渐变射线的交点。两者之间的百分比值线性定位在梯度射线上。包括两个停止位置相当于在两个位置声明了两个颜色相同的色值结束点。 + - : 色标（color stop）的 {{cssxref("<color>")}} 值，然后是一个或两个可选的色标位置（沿渐变轴的 {{cssxref("<percentage>")}} 或 {{cssxref("<length>")}}）。百分比值 `0%`，或者长度值 `0`，代表渐变的中心；值 `100%` 表示结束形状与虚拟渐变射线的交点。两者之间的百分比值线性定位在渐变射线上。包含两个色标位置相当于在两个位置上声明了两个颜色相同的色标。 - `` - - : color-hint 是一个插值提示，定义了相邻色标之间的渐变如何进行。长度定义了两种颜色之间的哪个点渐变颜色应该到达颜色过渡的中点。如果省略，颜色过渡的中点是两个色值结束点之间的中点。 + - : 颜色提示（color-hint）是一个插值提示，定义了渐变色在相邻色标之间的渐变方式。这个长度定义了渐变色应在两个色标之间的哪个点到达颜色过渡的中点。如果省略该值，颜色过渡的中点就是两个色标之间的中点。 ## 描述 -与其他渐变相同，径向渐变是一个[不固定尺寸](/zh-CN/docs/Web/CSS/image#no_intrinsic)的图像，即它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。 +与其他渐变一样，径向渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#描述)，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。 -如要创建重复的径向渐变来填充容器，请使用 CSS 的 {{cssxref("repeating-radial-gradient")}} 方法。 +如要创建重复的径向渐变来填充容器，请使用 {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} 函数替代。 -因为 `` 属于 `` 类型，所以它可以用于任何适用于 `` 的地方。正是因为这样，`radial-gradient()` 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("<color>")}} 数据类型。 +由于 `` 属于 `` 数据类型，因此只能用在能使用 `` 的地方。因此，`radial-gradient()` 在 {{Cssxref("background-color")}} 及其他使用 {{cssxref("<color>")}} 数据类型的属性上不起作用。 -## 径向渐变的组成 +## 径向渐变的合成 -![解释径向梯度的图：虚拟辐射线从中点开始水平。椭圆渐变，以及最终的形状，与声明它的框具有相同的纵横比](radial_gradient.png) +![解释径向渐变的图：虚拟辐射线从中点开始是水平的。椭圆渐变，及其结束形状，与所声明的框具有相同的长宽比。](radial_gradient.png) -径向渐变由其*中心点*、*边缘形状*轮廓、*两个或多个色值结束点*定义而成。 +径向渐变由其*中心点*、*结束形状*轮廓、*两个及以上色标*定义而成。 -为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。 +要创建平滑的渐变，`radial-gradient()` 函数绘制了一系列从中心点放射到*结束形状*（甚至可能超出范围）的同心轮廓。结束形状可以是圆形或椭圆形。 -色值结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。基于百分比的色值结束位置是相对于边缘形状和此渐变射线之间的交点（代表 100％）。每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。 +色标位于*虚拟渐变射线*（virtual gradient ray）上，该渐变射线从中心点水平向右延伸。基于百分比的色标位置是相对于结束形状和此渐变射线之间的交点（代表 `100％`）。每个形状都是单个颜色，并由其相交的渐变射线上的颜色确定。 ## 形式语法 @@ -130,10 +132,10 @@ radial-gradient(circle at center, red 0, blue, green 100%) ## 参见 -- [CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients) +- [使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients) - 其他的渐变函数：{{cssxref("repeating-radial-gradient")}}、{{cssxref("linear-gradient")}}、{{cssxref("repeating-linear-gradient")}}、{{cssxref("conic-gradient")}}、{{cssxref("repeating-conic-gradient")}} - {{cssxref("<image>")}} -- {{cssxref("_image","image()")}} +- {{cssxref("image/image","image()")}} - {{cssxref("element")}} - {{cssxref("image-set","image-set()")}} - {{cssxref("cross-fade")}} diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md index 5bb26b4a6fe84e..30957deb417e62 100644 --- a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md +++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md @@ -5,7 +5,17 @@ slug: Web/CSS/gradient/repeating-linear-gradient {{CSSRef}} -CSS 函数 **`repeating-linear-gradient()`** 创建一个由重复线性渐变组成的{{cssxref("<image>")}}，这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器。这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象，这是一个特殊的{{cssxref("<image>")}}类型。 +[CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) **`repeating-linear-gradient()`** 创建一个由重复线性渐变组成的 {{cssxref("<image>")}}，类似于 {{cssxref("linear-gradient")}}，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器。这个函数的结果是 {{cssxref("<gradient>")}} 数据类型的对象，此对象是一种特殊的 {{cssxref("<image>")}} 类型。 + +{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}} + +重复渐变的长度是第一个色标和最后一个色标之间的距离。如果第一种颜色没有色标长度，则色标长度默认为 0。每次重复时，色标的位置都会以基本线性渐变长度的倍数移动。因此，每个结束色标的位置都会与起始色标的位置重合；如果色值不同，就会产生鲜明的视觉过渡。可以通过重复第一种颜色值作为最后一种颜色值来改变这种情况。 + +与其他渐变一样，线性重复渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#描述)，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。 + +由于 `` 属于 `` 数据类型，因此只能用在可以使用 `` 的地方。因此，`repeating-linear-gradient()` 在{{Cssxref("background-color")}} 以及其他使用 {{cssxref("<color>")}} 数据类型上不起作用。 + +## 语法 ```css /* 一个倾斜 45 度的重复线性渐变， @@ -20,166 +30,88 @@ repeating-linear-gradient(to left top, blue, red); 从蓝色开始，40% 后变绿， 最后渐变到红色 */ repeating-linear-gradient(0deg, blue, green 40%, red); -``` -每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。 +/* 从左到右重复五次的渐变，从红色开始，然后变绿，再变回红色 */ +repeating-linear-gradient(to right, red 0%, green 10%, red 20%); +``` -与其他渐变一样，线形重复渐变没有提供 [固定的尺寸](/zh-CN/docs/CSS/image#no_intrinsic)；即，它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。 +### 值 -> **备注：** 因为 `` 属于`` 数据类型，所以只能在可以使用 ``的地方使用它们。因此`repeating-linear-gradient()` 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。 +- `` -## 语法 + - : 渐变线的起始点位置。如果指定了，则包含 `to` 和两个关键字：一个指定水平位置（`left` 或 `right`），另一个指定竖直位置（`top` 或 `bottom`）。关键字的先后顺序无影响。如果没有指定，则默认为 `to bottom`。 -### 值 + `to top`、`to bottom`、`to left` 和 `to right` 分别等价于 `0deg`、`180deg`、`270deg` 和 `90deg`。其余值会被转换为角度。 -- `` - - : 描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置 left or right，第二个指出水平位置 top or bottom。关键词的先后顺序无影响，且都是可选的。 - to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。 - {{cssxref("<angle>")}} - - : 用角度值指定渐变的方向（或角度）。角度顺时针增加。 -- `` + - : 渐变线的方向的角度。`0deg` 等价于 `to top`，增加值相当于顺时针旋转。 +- `` + - : 色标（color stop）的 {{cssxref("<color>")}} 值，然后是一个或两个可选的色标位置（沿渐变轴的 {{cssxref("<percentage>")}} 或 {{cssxref("<length>")}}）。百分比值 `0%`，或者长度值 `0`，代表渐变的开始，`100%` 代表 100% 的图像尺寸，也就是说渐变不会重复。 +- `` + - : 颜色提示（color-hint）是一种插值提示，定义了渐变色在相邻色标之间的渐变方式。长度定义了渐变色应在两个色标之间的哪个点到达颜色过渡的中点。如果省略此值，颜色过渡的中点就是两个色标之间的中点。 - - : 由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS 渐变的颜色渲染采取了与 SVG 相同的规则。 - - > **备注：** 渲染颜色中间点的规则[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)中的色标遵循相同的规则。 ### 形式语法 -```css -repeating-linear-gradient( [ | to ,]? [, ]+ ) - \---------------------------------/ \----------------------------/ - 渐变轴的定义 色标列表 - -where = [left | right] || [top | bottom] - and = [ | ]? -``` +{{csssyntax}} ## 示例 -```css -#grad1 { - background-image: repeating-linear-gradient( - 180deg, - rgb(26, 198, 204), - rgb(26, 198, 204) 7%, - rgb(100, 100, 100) 10% - ); +### 斑马条纹 + +```css hidden +body { + width: 100vw; + height: 100vh; } +``` -#grad2 { +```css +body { background-image: repeating-linear-gradient( -45deg, transparent, - transparent 25px, - rgba(255, 255, 255, 1) 25px, - rgba(255, 255, 255, 1) 50px + transparent 20px, + black 20px, + black 40px + ); + /* 包括多个色标长度 */ + background-image: repeating-linear-gradient( + -45deg, + transparent 0 20px, + black 20px 40px ); } ``` -```html -
    -
  1. - Repeating horizontal bars -
    -
    2. -
  2. - Zebra stripes -
    -
    3. -
-``` +{{EmbedLiveSample('斑马条纹', 120, 120)}} + +### 十个重复的水平线 ```css hidden -div { - display: block; - width: 50%; - height: 80px; - border-color: #000000; - padding: 10px; +body { + width: 100vw; + height: 100vh; } +``` -#grad1 { - background-image: -moz-repeating-linear-gradient( - 180deg, - rgb(26, 198, 204), - rgb(26, 198, 204) 7%, - rgb(100, 100, 100) 10% - ); - background-image: -webkit-repeating-linear-gradient( - 180deg, - rgb(26, 198, 204), - rgb(26, 198, 204) 7%, - rgb(100, 100, 100) 10% - ); - background-image: -o-repeating-linear-gradient( - 180deg, - rgb(26, 198, 204), - rgb(26, 198, 204) 7%, - rgb(100, 100, 100) 10% - ); +```css +body { background-image: repeating-linear-gradient( - 180deg, + to bottom, rgb(26, 198, 204), rgb(26, 198, 204) 7%, rgb(100, 100, 100) 10% ); } - -#grad2 { - background-color: black; - background-image: -moz-repeating-linear-gradient( - -45deg, - transparent, - transparent 25px, - rgba(255, 255, 255, 1) 25px, - rgba(255, 255, 255, 1) 50px - ); - background-image: -webkit-repeating-linear-gradient( - -45deg, - transparent, - transparent 25px, - rgba(255, 255, 255, 1) 25px, - rgba(255, 255, 255, 1) 50px - ); - background-image: -o-repeating-linear-gradient( - -45deg, - transparent, - transparent 25px, - rgba(255, 255, 255, 1) 25px, - rgba(255, 255, 255, 1) 50px - ); - background-image: -ms-repeating-linear-gradient( - -45deg, - transparent, - transparent 25px, - rgba(255, 255, 255, 1) 25px, - rgba(255, 255, 255, 1) 50px - ); - background-image: repeating-linear-gradient( - -45deg, - transparent, - transparent 25px, - rgba(255, 255, 255, 1) 25px, - rgba(255, 255, 255, 1) 50px - ); -} ``` -```html hidden -
    -
  1. - repeating gradient -
    -
    2. -
  2. - Zebra pattern -
    -
    3. -
-``` +{{EmbedLiveSample('十个重复水平线', 120, 120)}} + +由于最后一个色标是 10%，且渐变是竖直的，因此重复渐变中的每个渐变都是高度的 10%，正好满足 10 个水平线。 -{{EmbedLiveSample('示例', '300px', '300px', '')}} +> **备注：** 更多示例请参见[使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients)。 ## 规范 diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.md b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.md index c2842dba432527..6baa66e71a610c 100644 --- a/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.md +++ b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.md @@ -5,184 +5,120 @@ slug: Web/CSS/gradient/repeating-radial-gradient {{CSSRef}} -CSS 函数 **`repeating-radial-gradient()`** 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是 {{cssxref("<gradient>")}} 数据类型的对象，是一种特殊的{{cssxref("<image>")}}类型。 +[CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions) **`repeating-radial-gradient()`** 创建一个从原点辐射的重复渐变组成的 {{cssxref("<image>")}}，类似于 {{cssxref("gradient/radial-gradient", "radial-gradient()")}} 并且采用相同的参数，但是它会在所有方向上无限重复色标，以覆盖其整个容器，类似于 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}。函数的结果是 {{cssxref("<gradient>")}} 数据类型的对象，此对象是一种特殊的 {{cssxref("<image>")}} 类型。 -```css -/* 一个从容器中心点开始的重复渐变， - 从红色开始，渐变到蓝色，再渐变到绿色 */ -repeating-radial-gradient(circle at center, red 0, blue, green 30px); -``` +{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}} -每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。 +每次重复时，色标（color stop）的位置的偏移量都是基准径向渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的颜色应该与第一个颜色的颜色保持一致；如果不一致，会导致非常突兀的渐变效果，可以通过将第一个色标重复添加到最后一个中来解决。 -与其他渐变一样，线形重复渐变没有提供[固定的尺寸](/zh-CN/docs/CSS/image#no_intrinsic)；即，它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。 +与其他渐变一样，径向重复渐变[没有内在尺寸](/zh-CN/docs/Web/CSS/image#描述)，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。 -> **备注：** 因为 `` 属于`` 数据类型，所以只能在可以使用 ``的地方使用它们。因此`repeating-linear-gradient()` 不适用于{{Cssxref("background-color")}} 以及使用{{cssxref("<color>")}} 数据类型的地方。 +由于 `` 属于 `` 数据类型，因此只能用在可以使用 `` 的地方。因此，`repeating-radial-gradient()` 在{{Cssxref("background-color")}} 以及其他使用 {{cssxref("<color>")}} 数据类型上不起作用。 ## 语法 +```css +/* 位于容器中间的渐变， + 由红色开始，改变为蓝色，以绿色结束， + 颜色每 30px 重复一次 */ +repeating-radial-gradient(circle at center, red 0, blue, green 30px); + +/* 接近容器左上角的椭圆形渐变， + 由红色开始，改变为绿色，然后再变回红色， + 在中心和右下角之之间重复五次， + 在中心和左上角之间只重复一次 */ +repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); +``` + ### 值 - {{cssxref("<position>")}} - - : `position`与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 `center`. -- {{cssxref("<angle>")}} - - : 渐变轴的角度。角度顺时针增加，默认值为`0deg`。 -- {{cssxref("<shape>")}} - - : 渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 `ellipse`。 + - : 渐变的位置，和 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}} 以相同方式解析。如果没有指定，默认为 `center`。 +- `` + - : 渐变的结束形状。值可以是 `circle`（圆形，渐变的形状是一个半径不变的正圆）或 `ellipse`（椭圆，形状为轴对称椭圆）。如果没有指定，默认为 `ellipse`。 - `` - - : 关键字用于描述边缘轮廓的具体位置。以下为关键字常量： + - : 关键字，描述结束形状应该有多大。可能的值包括： - | Keyword | Description | - | ----------------- | ---------------------------------------------------------------------------------------------------------------- | - | `closest-side` | 渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。 | - | `closest-corner` | 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 | - | `farthest-side` | 与 `closest-side`相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。 | - | `farthest-corner` | 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。 | + | 关键字 | 描述 | + | ----------------- | ------------------------------------------------------------------------------------------------------------------ | + | `closest-side` | 渐变结束形状如果是圆形，与容器距离渐变中心点最近的一边相切，如果是椭圆，则与距离渐变中心点最近的垂直和水平边相切。 | + | `closest-corner` | 渐变结束形状与容器距离渐变中心点最近的一个角相交。 | + | `farthest-side` | 类似于 `closest-side`，结束形状与容器距离渐变中心点最远的一边（或最远的垂直和水平边）相切。 | + | `farthest-corner` | 渐变的结束形状与容器距离渐变中心点最远的一个角相交。 | - > **备注：** 早期的草案中还包含其他关键字 (`cover` and `contain`) ，分别相当于标准关键字 `farthest-corner` 和 `closest-side`,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。 + > **备注：** 早期的函数实现中还包含其他关键字（`cover` 和 `contain`），分别相当于标准关键字 `farthest-corner` 和 `closest-side`。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。 - `` - - : 表示某个确定位置的固定色值，包含一个[``](/zh-CN/docs/Web/CSS/color_value)值加上可选的位置值（相对虚拟渐变射线的[``](/zh-CN/docs/Web/CSS/percentage)或者[``](/zh-CN/docs/Web/CSS/length)长度值）。百分比值`0%`，或者长度值`0`，表示渐变中心点；百分比值`100%`表示渐变射线与边缘形状相交的点。其间的百分比值线性对应渐变射线上的点。 + - : 色标（color stop）的 {{cssxref("<color>")}} 值，然后是一个或两个可选的色标位置（沿渐变轴的 {{cssxref("<percentage>")}} 或 {{cssxref("<length>")}}）。百分比值 `0%`，或者长度值 `0`，表示渐变中心点；百分比值 `100%` 表示渐变射线与结束形状相交的点。其间的百分比值线性对应渐变射线上的点。 ### 形式语法 -``` -repeating-radial-gradient( - [[ circle || ] [at ]? , | - [ ellipse || [ | ]{2}] [at ]? , | - [[ circle | ellipse ] || ] [at ]? , | - at , [ , ]+ ) - \---------------------------------------------------------------/\--------------------------------/ - 定义轮廓、尺寸和结束形状的位置 色标列表 - -where = closest-corner | closest-side | farthest-corner | farthest-side - and = [ | ]? -``` +{{csssyntax}} ## 示例 -径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”，每个圆的中心位置用点指定，大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。 - ### 黑白相间的渐变 -```css -div { - display: block; - width: 50%; - height: 80px; - border-color: #000000; - padding: 10px; +```html hidden +
+``` + +```css hidden +.radial-gradient { + width: 120px; + height: 120px; } -#grad1 { - background: -webkit-repeating-radial-gradient( - black, - black 5px, - white 5px, - white 10px - ); - background: -moz-repeating-radial-gradient( - black, - black 5px, - white 5px, - white 10px - ); - background: -ms-repeating-radial-gradient( - black, - black 5px, - white 5px, - white 10px - ); - background: -o-repeating-radial-gradient( - black, - black 5px, - white 5px, - white 10px - ); +``` + +```css +.radial-gradient { background: repeating-radial-gradient( black, black 5px, white 5px, white 10px ); - text-shadow: 1px 1px 0pt black; - color: white; - border: 1px solid black; - height: 5.5em; } ``` {{EmbedLiveSample('黑白相间的渐变', '300px', '120px', '')}} -```css -background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +### Farthest-corner 渐变 + +```html hidden +
``` -### Farthest-corner 渐变 +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` ```css -div { - display: block; - width: 50%; - height: 80px; - border-radius: 10px; - border-color: #000000; - padding: 10px; -} -#grad1 { - background: -webkit-repeating-radial-gradient( - ellipse farthest-corner, - red, - black 5%, - blue 5%, - green 10% - ); - background: -moz-repeating-radial-gradient( - ellipse farthest-corner, - red, - black 5%, - blue 5%, - green 10% - ); - background: -ms-repeating-radial-gradient( - ellipse farthest-corner, - red, - black 5%, - blue 5%, - green 10% - ); - background: -o-repeating-radial-gradient( - ellipse farthest-corner, +.radial-gradient { + background: repeating-radial-gradient( + ellipse farthest-corner at 20% 20%, red, black 5%, blue 5%, green 10% ); background: repeating-radial-gradient( - ellipse farthest-corner, - red, - black 5%, - blue 5%, - green 10% + ellipse farthest-corner at 20% 20%, + red 0 5%, + green 5% 10% ); - text-shadow: 1px 1px 0pt blue; - color: white; - border: 1px solid black; - height: 5.5em; } ``` -{{EmbedLiveSample('Farthest-corner 渐变', '300px', '120px', '')}} +{{EmbedLiveSample('Farthest-corner 渐变', 120, 120)}} -```css -background: repeating-radial-gradient( - ellipse farthest-corner, - red, - black 5%, - blue 5%, - green 10% -); -``` +这个椭圆形渐变会位于左上角靠中心 20% 的位置，在中心和最远角（右下角）之间重复 10 次。支持多位置色标的浏览器会显示为红色和绿色条纹的椭圆形。不支持这个语法的浏览器仍会从红色到黑色再由蓝色到绿色的渐变。 + +> **备注：** 更多例子请见[使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients)。 ## 规范 @@ -194,5 +130,10 @@ background: repeating-radial-gradient( ## 参见 -- [使用渐变](/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients) -- 其他渐变方法：{{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}} +- [使用 CSS 渐变](/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients) +- 其他渐变函数：{{cssxref("gradient/radial-gradient", "radial-gradient()")}}、{{cssxref("gradient/linear-gradient", "linear-gradient()")}}、{{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}、{{cssxref("gradient/conic-gradient", "conic-gradient()")}}、{{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image","image()")}} +- {{cssxref("element", "element()")}} +- {{cssxref("image/image-set","image-set()")}} +- {{cssxref("cross-fade", "cross-fade()")}} diff --git a/files/zh-cn/web/css/named-color/index.md b/files/zh-cn/web/css/named-color/index.md index d41f09c9660896..e77824f4e4175f 100644 --- a/files/zh-cn/web/css/named-color/index.md +++ b/files/zh-cn/web/css/named-color/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/named-color {{CSSRef}} -[CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types) **``** 为颜色名——如 `red`、`blue`、`black` 或 `lightseagreen`。`` 在语法上为 {{CSSXref("<ident>")}}。 +[CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types) **``** 为颜色名——如 `red`、`blue`、`black` 或 `lightseagreen`。`` 在语法上为 [``](/zh-CN/docs/Web/CSS/ident)。 在可使用 {{CSSXref("<color>")}} 的任意位置均可使用 `` 值。 @@ -21,7 +21,7 @@ color: transparent; ### 取值 -具名颜色由标准颜色，以及关键字 [`transparent`](#transparent) 和 {{CSSXref("<color>", "currentcolor", "#currentcolor_keyword")}} 所构成。 +命名颜色包含标准颜色、[`transparent`](#transparent) 和 [`currentcolor`](/zh-CN/docs/Web/CSS/color_value#currentcolor_keyword) 关键字。 #### 标准颜色 @@ -881,17 +881,17 @@ color: transparent; -起初在 [CSS 第 1 级](https://www.w3.org/TR/REC-CSS1/#color-units)中仅定义了 16 种基本颜色，在 [CSS 第 2 级](https://www.w3.org/TR/CSS2/syndata.html#value-def-color)中添加了 `orange`。Web 设计师认为这些颜色太少，于是浏览器厂商根据 X11 颜色名为颜色添加了大量名字。这些名字先后在 [SVG 1.0](https://www.w3.org/TR/2001/REC-SVG-20010904/) 和 [CSS 颜色第 3 级](https://www.w3.org/TR/css-color-3/#svg-color)中获得标准化、正式定义和一致性（某些名字的不同拼写现为别名）。这些颜色名被称为*扩展性颜色关键字*、*X11 颜色*或 _SVG 颜色_。 +起初在 [CSS 第 1 级](https://www.w3.org/TR/REC-CSS1/#color-units)中仅定义了 16 种基本颜色，在 [CSS 第 2 级](https://www.w3.org/TR/CSS2/syndata.html#value-def-color)中添加了 `orange`。Web 设计师认为这些颜色太少，于是浏览器厂商根据 X11 颜色名为颜色添加了大量名字。这些名字先后在 [SVG 1.0](https://www.w3.org/TR/2001/REC-SVG-20010904/) 和 [CSS 颜色第 3 级](https://www.w3.org/TR/css-color-3/#svg-color)中获得标准化、正式定义和一致性（某些名字的不同拼写现为别名）。这些名字称为*扩展性颜色关键字*、*X11 颜色*或 _SVG 颜色_。 为纪念 [web 先驱 Eric Meyer](https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/)，在 [CSS 颜色第 4 级](https://www.w3.org/TR/css-color-4/#named-colors)中添加了又一种颜色 `rebeccapurple`。 ### transparent -`transparent` 关键字表示完全透明的颜色。此颜色的元素后的背景完全可见。严格而言，`transparent` 为 `rgba(0,0,0,0)` 的缩写。 +`transparent` 关键字表示完全透明的颜色。此颜色的元素后的背景完全可见。技术上，`transparent` 为 `rgba(0,0,0,0)` 的缩写。 为防止意外行为（如在 {{CSSXref("gradient")}} 中），目前的 CSS 规范称应在[预乘 alpha 颜色空间](https://www.w3.org/TR/css-color-4/#interpolation-alpha)中计算 `transparent`。然而注意旧浏览器可能将其视为 alpha 值为 `0` 的黑色。 -`transparent` 关键字在 CSS 第 2 级（修订 1）中并非真正的颜色，而是可在两个 CSS 属性——{{CSSXref("background")}} 和 {{CSSXref("border")}}——上代替常规 `` 值使用的特殊关键字。添加此关键字主要是为了允许开发者改写继承的实在颜色。随着 alpha 通道在 CSS 颜色第 3 级中的到来，`transparent` 被重定义为真正的颜色。现在在可使用 {{CSSXref("<color>")}} 值的任意位置均可使用此关键字。 +`transparent` 关键字在 CSS 第 2 级（修订 1）中并非真正的颜色，而是可在两个 CSS 属性——{{CSSXref("background")}} 和 {{CSSXref("border")}}——上代替常规 `` 值使用的特殊关键字。添加此关键字主要是为了允许开发者覆盖继承的纯色。随着 alpha 通道在 CSS 颜色第 3 级中的到来，`transparent` 被重定义为真正的颜色。现在在可使用 {{CSSXref("<color>")}} 值的任意位置均可使用此关键字。 ## 描述 @@ -915,7 +915,7 @@ color: transparent; ## 示例 -### 使用具名颜色 +### 使用命名颜色 #### HTML @@ -959,7 +959,7 @@ color: transparent; #### 结果 -{{EmbedLiveSample("使用具名颜色")}} +{{EmbedLiveSample("使用命名颜色")}} ## 规范 @@ -971,4 +971,4 @@ color: transparent; ## 参见 -- {{CSSXref("<color>")}}——`` 为此数据类型定义的构成部分 +- [``](/zh-CN/docs/Web/CSS/color_value)——`` 为此数据类型定义的构成部分 diff --git a/files/zh-cn/web/css/text-align-last/index.md b/files/zh-cn/web/css/text-align-last/index.md index 914a4fc0452600..896b6044afb6aa 100644 --- a/files/zh-cn/web/css/text-align-last/index.md +++ b/files/zh-cn/web/css/text-align-last/index.md @@ -5,10 +5,12 @@ slug: Web/CSS/text-align-last {{CSSRef}} -CSS 属性 **`text-align-last`** 描述的是一段文本中最后一行在被强制换行之前的对齐规则。 +CSS 属性 **`text-align-last`** 指定一行或者块中的最后一行在被强制换行之前的对齐规则。 + +## 语法 ```css -/* Keyword values */ +/* 关键字值 */ text-align-last: auto; text-align-last: start; text-align-last: end; @@ -17,45 +19,41 @@ text-align-last: right; text-align-last: center; text-align-last: justify; -/* Global values */ +/* 全局值 */ text-align-last: inherit; text-align-last: initial; +text-align-last: revert; +text-align-last: revert-layer; text-align-last: unset; ``` {{cssinfo}} -## 语法 - -### 属性值 +### 值 - `auto` - - : 每一行的对齐规则由 {{cssxref("text-align")}} 的值来确定，当 {{cssxref("text-align")}} 的值是 `justify`，`text-align-last` 的表现和设置了 `start` 的表现是一样的，即如果文本的展示方向是从左到右，则最后一行左侧对齐与内容盒子。 + - : 受影响的行会根据 {{cssxref("text-align")}} 的值来对齐，除非 {{cssxref("text-align")}} 的值是 `justify`，在这种情况下，其效果等同于将 `text-align-last` 的值设置为 `start`。 - `start` - - : 与 {{cssxref("direction")}} 的设置有关。 - 如果文本展示方向是从左到右，起点在左侧，则是左对齐； - 如果文本展示方向是从右到左，起点在右侧，则是右对齐。 - 如果没有设置 {{cssxref("direction")}} ，则按照浏览器文本的默认显示方向来确定。 + - : 如果内容方向是左至右，则等于 `left`，反之则为 `right`。 - `end` - - : 与 {{cssxref("direction")}} 的设置有关。 - 如果文本展示方向是从左到右，末尾在右侧，则是右对齐； - 如果文本展示方向是从右到左，末尾在左侧，则是左对齐。 - 如果没有设置 {{cssxref("direction")}} ，则按照浏览器文本的默认显示方向来确定。 + - : 如果内容方向是左至右，则等于 `right`，反之则为 `left`。 - `left` - - : 最后一行文字与内容盒子的左侧对齐 + - : 行内内容对齐到行框的左边缘。 - `right` - - : 最后一行文字与内容盒子的右侧对齐 + - : 行内内容对齐到行框的右边缘。 - `center` - - : 最后一行文字与内容盒子居中对齐 + - : 行内内容在行框中居中。 - `justify` - : 最后一行文字的开头与内容盒子的左侧对齐，末尾与右侧对齐。 -### 语法 +### 形式语法 {{csssyntax}} ## 示例 +### 对齐最后一行 + ```html hidden

Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, @@ -68,12 +66,11 @@ text-align-last: unset; p { font-size: 1.4em; text-align: justify; - -moz-text-align-last: center; text-align-last: center; } ``` -{{EmbedLiveSample('示例','100%')}} +{{EmbedLiveSample('对齐最后一行','560')}} ## 规范 @@ -86,4 +83,3 @@ p { ## 参见 - {{cssxref("text-align")}} -- {{cssxref("direction")}} diff --git a/files/zh-cn/web/css/text-align/index.md b/files/zh-cn/web/css/text-align/index.md index abf054cd94a67d..38873149bff73a 100644 --- a/files/zh-cn/web/css/text-align/index.md +++ b/files/zh-cn/web/css/text-align/index.md @@ -5,59 +5,80 @@ slug: Web/CSS/text-align {{CSSRef}} -`text-align` CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。`text-align` 并不控制块元素自己的对齐，只控制它的行内内容的对齐。 +`text-align` [CSS](/zh-CN/docs/Web/CSS) 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 {{cssxref("vertical-align")}} 类似，但是是水平方向的。 + +{{EmbedInteractiveExample("pages/css/text-align.html")}} + +## 语法 ```css -/* Keyword values */ +/* 关键字值 */ +text-align: start; +text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; -text-align: start; -text-align: end; text-align: match-parent; -/* Block alignment values (Non-standard syntax) */ +/* 在表格列内基于字符的对齐 */ +text-align: "."; +text-align: "." center; + +/* 块对齐值（非标准语法） */ text-align: -moz-center; text-align: -webkit-center; -/* Global values */ +/* 全局值 */ text-align: inherit; text-align: initial; +text-align: revert; +text-align: revert-layer; text-align: unset; ``` -{{cssinfo}} +`text-align` 属性可以按照以下方式之一来指定： -## 语法 - -text-align 属性指定为从以下值列表中选择的单个关键字。 +- 使用关键字值 `start`、`end`、`left`、`right`、`center`、`justify`、`justify-all` 或 `match-parent`。 +- 仅使用单个 `` 值，此时另外一个值默认为 `right`。 +- 同时使用关键字值和 [``](#string) 值。 ### 值 -- `start` {{experimental_inline}} - - : 如果内容方向是左至右，则等于`left`，反之则为`right`。 -- `end` {{experimental_inline}} - - : 如果内容方向是左至右，则等于`right`，反之则为`left`。 +- `start` + - : 如果内容方向是左至右，则等于 `left`，反之则为 `right`。 +- `end` + - : 如果内容方向是左至右，则等于 `right`，反之则为 `left`。 - `left` - : 行内内容向左侧边对齐。 - `right` - : 行内内容向右侧边对齐。 - `center` - : 行内内容居中。 -- `` {{experimental_inline}} - - : 第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。 - `justify` - : 文字向两侧对齐，对最后一行无效。 - `justify-all` {{experimental_inline}} - - : 和 justify 一致，但是强制使最后一行两端对齐。 + - : 和 `justify` 一致，但是强制使最后一行两端对齐。 - `match-parent` - - : 和`inherit`类似，区别在于`start`和`end`的值根据父元素的{{cssxref("direction")}}确定，并被替换为恰当的`left`或`right`。 + - : 和 `inherit` 类似，区别在于 `start` 和 `end` 的值根据父元素的 {{cssxref("direction")}} 确定，并被替换为恰当的 `left` 或 `right` 值。 +- {{cssxref("<string>")}} {{experimental_inline}} + - : 应用在单元格时，指定单元格内容相对于哪个字符对齐。 + +## 无障碍考虑 + +对于有阅读障碍等认知问题的人来说，对齐的文本产生的单词之间的间距不一致可能会出现问题。 + +- [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.8 | 了解 WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## 形式定义 + +{{CSSInfo}} -### 形式语法 +## 形式语法 -{{csssyntax("text-align")}} +{{csssyntax}} ## 示例 @@ -146,4 +167,4 @@ text-align 属性指定为从以下值列表中选择的单个关键字。 ## 参见 -- {{Cssxref("margin","margin:auto")}}, {{Cssxref("margin-left","margin-left:auto")}}, {{Cssxref("vertical-align")}} +- {{Cssxref("margin","margin:auto")}}、{{Cssxref("margin-left","margin-left:auto")}}、{{Cssxref("vertical-align")}} diff --git a/files/zh-cn/web/css/webkit_extensions/index.md b/files/zh-cn/web/css/webkit_extensions/index.md index 76ebc1edb98e53..556123c42d4ed2 100644 --- a/files/zh-cn/web/css/webkit_extensions/index.md +++ b/files/zh-cn/web/css/webkit_extensions/index.md @@ -1,244 +1,521 @@ --- -title: Webkit Extensions +title: Webkit CSS 扩展 slug: Web/CSS/WebKit_Extensions --- {{CSSRef}} -WebKit 支持大量的[CSS](/zh-CN/CSS)扩展，这种 css 属性的前缀`为-webkit-`. - -这些属性其中的一部分已经被包含在 CSS 规范草案中，并且可能成为最后的推荐标准，但目前仍然是试验性的属性，还有一些属性是不规范的属性，它们没有出现在跟踪规范中。 - -### WebKit-前缀属性 (跟踪规范) - -A - -- {{ Cssxref("-webkit-animation") }} -- {{ Cssxref("-webkit-animation-delay") }} -- {{ Cssxref("-webkit-animation-direction") }} -- {{ Cssxref("-webkit-animation-duration") }} -- {{ Cssxref("-webkit-animation-fill-mode") }} -- {{ Cssxref("-webkit-animation-iteration-count") }} -- {{ Cssxref("-webkit-animation-name") }} -- {{ Cssxref("-webkit-animation-play-state") }} -- {{ Cssxref("-webkit-animation-timing-function") }} -- {{ Cssxref("-webkit-appearance") }} - -B - -- {{ Cssxref("-webkit-backface-visibility") }} -- {{ Cssxref("-webkit-border-image") }} - -C D E - -- {{ Cssxref("-webkit-column-count") }} -- {{ Cssxref("-webkit-column-gap") }} -- {{ Cssxref("-webkit-column-width") }} -- {{ Cssxref("-webkit-column-rule") }} -- {{ Cssxref("-webkit-column-rule-width") }} -- {{ Cssxref("-webkit-column-rule-style") }} -- {{ Cssxref("-webkit-column-rule-color") }} -- {{ Cssxref("-webkit-columns") }} -- {{ Cssxref("-webkit-column-span") }} - -F - -- {{ Cssxref("-webkit-font-feature-settings") }} -- {{ Cssxref("-webkit-font-kerning") }} -- {{ Cssxref("-webkit-font-size-delta") }} -- {{ Cssxref("-webkit-font-variant-ligatures") }} - -G - -- {{ Cssxref("-webkit-grid-column") }} -- {{ Cssxref("-webkit-grid-columns") }} -- {{ Cssxref("-webkit-grid-row") }} -- {{ Cssxref("-webkit-grid-rows") }} - -H—O - -- {{ Cssxref("-webkit-hyphens") }} - -P - -- {{ Cssxref("-moz-perspective") }} -- {{ Cssxref("-moz-perspective-origin") }} -- {{ Cssxref("pointer-events") }} (applying to more than SVG) - -Q—T - -- {{ cssxref("-moz-text-align-last") }} -- {{ Cssxref("text-decoration-color","-moz-text-decoration-color") }} -- {{ Cssxref("text-decoration-line","-moz-text-decoration-line") }} -- {{ Cssxref("text-decoration-style","-moz-text-decoration-style") }} -- {{ Cssxref("-moz-transform") }} -- {{ Cssxref("-moz-transform-origin") }} -- {{ Cssxref("-moz-transform-style") }} -- {{ cssxref("-moz-transition") }} -- {{ cssxref("-moz-transition-delay") }} -- {{ cssxref("-moz-transition-duration") }} -- {{ cssxref("-moz-transition-property") }} -- {{ cssxref("-moz-transition-timing-function") }} - -### WebKit-prefixed properties with an unprefixed counterpart - -A B - -- {{ Cssxref("-webkit-background-clip") }} -- {{ Cssxref("-webkit-background-origin") }} -- {{ Cssxref("-webkit-background-size") }} -- {{ Cssxref("-webkit-border-bottom-left-radius") }} -- {{ Cssxref("-webkit-border-bottom-right-radius") }} -- {{ Cssxref("-webkit-border-radius") }} -- {{ Cssxref("-webkit-border-top-left-radius") }} -- {{ Cssxref("-webkit-border-top-right-radius") }} -- {{ Cssxref("-webkit-box-sizing") }} -- {{ Cssxref("-epub-caption-side") }} - -### 私有 WebKit-前缀属性（不使用网页上） - -A - -- {{ Cssxref("-webkit-aspect-ratio") }} -- B -- {{ Cssxref("-webkit-background-composite") }} -- {{ Cssxref("-webkit-border-after") }} -- {{ Cssxref("-webkit-border-after-color") }} -- {{ Cssxref("-webkit-border-after-style") }} -- {{ Cssxref("-webkit-border-after-width") }} -- {{ Cssxref("-webkit-border-before") }} -- {{ Cssxref("-webkit-border-before-color") }} -- {{ Cssxref("-webkit-border-before-style") }} -- {{ Cssxref("-webkit-border-before-width") }} -- {{ Cssxref("-webkit-border-end") }} -- {{ Cssxref("-webkit-border-end-color") }} -- {{ Cssxref("-webkit-border-end-style") }} -- {{ Cssxref("-webkit-border-end-width") }} -- {{ Cssxref("-webkit-border-fit") }} -- {{ Cssxref("-webkit-border-horizontal-spacing") }} -- {{ Cssxref("-webkit-border-start") }} -- {{ Cssxref("-webkit-border-start-color") }} -- {{ Cssxref("-webkit-border-start-style") }} -- {{ Cssxref("-webkit-border-start-width") }}{{ Cssxref("-webkit-border-vertical-spacing") }} -- {{ Cssxref("-webkit-box-align") }} -- {{ Cssxref("-webkit-box-direction") }} -- {{ Cssxref("-webkit-box-flex") }} -- {{ Cssxref("-webkit-box-flex-group") }} -- {{ Cssxref("-webkit-box-lines") }} -- {{ Cssxref("-webkit-box-ordinal-groups") }} -- {{ Cssxref("-webkit-box-orient") }} -- {{ Cssxref("-webkit-box-reflect") }} -- {{ cssxref("-webkit-box-pack") }} -- {{ Cssxref("-webkit-box-reflect") }} -- {{ Cssxref("-webkit-box-shadow") }} - -C - -- {{ Cssxref("-webkit-column-axis") }} -- {{ Cssxref("-webkit-column-break-after") }} -- {{ Cssxref("-webkit-column-break-before") }} -- {{ Cssxref("-webkit-column-break-inside") }} -- D -- {{ Cssxref("-webkit-dashboard-region") }} -- E—G -- {{ Cssxref("-webkit-filter") }} -- {{ Cssxref("-webkit-font-smoothing") }} - -H - -- {{ Cssxref("-webkit-highlight") }} -- {{ Cssxref("-webkit-hyphenate-charset") }} -- {{ Cssxref("-webkit-hyphenate-limit-after") }} -- {{ Cssxref("-webkit-hyphenate-limit-before") }} -- {{ Cssxref("-webkit-hyphenate-limit-lines") }} - -I—L - -- {{ Cssxref("-webkit-line-align") }} -- {{ Cssxref("-webkit-line-box-contain") }} -- {{ Cssxref("-webkit-line-break") }} -- {{ Cssxref("-webkit-line-clamp") }} -- {{ Cssxref("-webkit-line-grid") }} -- {{ Cssxref("-webkit-line-snap") }} -- {{ Cssxref("-webkit-locale") }} -- {{ Cssxref("-webkit-logical-height") }} -- {{ Cssxref("-webkit-logical-width") }} - -M - -- {{ Cssxref("-webkit-margin-after") }} -- {{ Cssxref("-webkit-margin-after-collapse") }} -- {{ Cssxref("-webkit-margin-before") }} -- {{ Cssxref("-webkit-margin-before-collapse") }} -- {{ Cssxref("-webkit-margin-bottom-collapse") }} -- {{ Cssxref("-webkit-margin-collapse") }} -- {{ Cssxref("-webkit-margin-end") }} -- {{ Cssxref("-webkit-margin-start") }} -- {{ Cssxref("-webkit-margin-top-collapse") }} -- {{ Cssxref("-webkit-marquee") }} -- {{ Cssxref("-webkit-marquee-direction") }} -- {{ Cssxref("-webkit-marquee-increment") }} -- {{ Cssxref("-webkit-marquee-repetition") }} -- {{ Cssxref("-webkit-marquee-speed") }} -- {{ Cssxref("-webkit-marquee-style") }} -- {{ Cssxref("-webkit-mask") }} -- {{ Cssxref("-webkit-mask-attachment") }} -- {{ Cssxref("-webkit-mask-box-image") }} -- {{ Cssxref("-webkit-mask-box-image-outset") }} -- {{ Cssxref("-webkit-mask-box-image-repeat") }} -- {{ Cssxref("-webkit-mask-box-image-slice") }} -- {{ Cssxref("-webkit-mask-boximage-source") }} -- {{ Cssxref("-webkit-mask-box-image-width") }} -- {{ Cssxref("-webkit-mask-clip") }} -- {{ Cssxref("-webkit-mask-composite") }} -- {{ Cssxref("-webkit-mask-image") }} -- {{ Cssxref("-webkit-mask-origin") }} -- {{ Cssxref("-webkit-mask-position") }} -- {{ Cssxref("-webkit-mask-position-x") }} -- {{ Cssxref("-webkit-mask-position-y") }} -- {{ Cssxref("-webkit-mask-repeat") }} -- {{ Cssxref("-webkit-mask-repeat-x") }} -- {{ Cssxref("-webkit-mask-repeat-y") }} -- {{ Cssxref("-webkit-mask-size") }} -- {{ Cssxref("-webkit-match-nearest-mail-blockquote-color") }} -- {{ Cssxref("-webkit-max-logical-height") }} -- {{ Cssxref("-webkit-max-logical-width") }} -- {{ Cssxref("-webkit-min-logical-height") }} -- {{ Cssxref("-webkit-min-logical-width") }} - -N - -- {{ Cssxref("-webkit-nbsp-mode") }} - -O - -- {{ cssxref("-moz-orient") }} -- {{ Cssxref("-moz-outline-radius") }} -- {{ Cssxref("-moz-outline-radius-bottomleft") }} -- {{ Cssxref("-moz-outline-radius-bottomright") }} -- {{ Cssxref("-moz-outline-radius-topleft") }} -- {{ Cssxref("-moz-outline-radius-topright") }} - -P Q R - -- {{ Cssxref("-moz-padding-end") }} -- {{ Cssxref("-moz-padding-start") }} - -S - -- {{ Cssxref("-moz-script-level") }} -- {{ Cssxref("-moz-script-min-size") }} -- {{ Cssxref("-moz-script-size-multiplier") }} -- {{ Cssxref("-moz-stack-sizing") }} - -T U V - -- {{ Cssxref("-moz-text-blink") }} -- {{ Cssxref("-moz-user-focus") }} -- {{ Cssxref("-moz-user-input") }} -- {{ Cssxref("-moz-user-modify") }} -- {{ Cssxref("-moz-user-select") }} - -W—Z - -- {{ Cssxref("-moz-window-shadow") }} +基于 WebKit 或 Blink 的应用，例如 Safari 和 Chrome，支持一些特殊的 **[CSS](/zh-CN/docs/Web/CSS) WebKit 扩展**。这些扩展通常带有 `-webkit-` 前缀。大多数 `-webkit-` 前缀的属性通常也能够与 `-apple-` 前缀使用。少部分是有 `-epub-` 前缀的。 + +## 仅 WebKit 具有的属性 + +> **备注：** 避免在网站上使用。这些属性仅在 WebKit 应用中可用。 + +### A + +- {{CSSxRef("-webkit-animation-trigger", "-webkit-animation-trigger")}} +- {{CSSxRef("-webkit-app-region", "-webkit-app-region")}} +- {{CSSxRef("-webkit-aspect-ratio", "-webkit-aspect-ratio")}} + +### B + +- {{CSSxRef("-webkit-backdrop-filter", "-webkit-backdrop-filter")}} +- {{CSSxRef("border-block-end","-webkit-border-after")}}\*\* +- {{CSSxRef("border-block-end-color","-webkit-border-after-color")}}\*\* +- {{CSSxRef("border-block-end-style","-webkit-border-after-style")}}\*\* +- {{CSSxRef("border-block-end-width","-webkit-border-after-width")}}\*\* +- {{CSSxRef("border-block-start","-webkit-border-before")}}\*\* +- {{CSSxRef("border-block-start-color","-webkit-border-before-color")}}\*\* +- {{CSSxRef("border-block-start-style","-webkit-border-before-style")}}\*\* +- {{CSSxRef("border-block-start-width","-webkit-border-before-width")}}\*\* +- {{CSSxRef("border-inline-end", "-webkit-border-end")}}\*\* +- {{CSSxRef("border-inline-end-color","-webkit-border-end-color")}}\*\* +- {{CSSxRef("border-inline-end-style","-webkit-border-end-style")}}\*\* +- {{CSSxRef("border-inline-end-width","-webkit-border-end-width")}}\*\* +- {{CSSxRef("-webkit-border-horizontal-spacing", "-webkit-border-horizontal-spacing")}} +- {{CSSxRef("border-inline-start", "-webkit-border-start")}}\*\* +- {{CSSxRef("border-inline-start-color", "-webkit-border-start-color")}}\*\* +- {{CSSxRef("border-inline-start-style", "-webkit-border-start-style")}}\*\* +- {{CSSxRef("border-inline-start-width", "-webkit-border-start-width")}}\*\* +- {{CSSxRef("-webkit-border-vertical-spacing", "-webkit-border-vertical-spacing")}} +- {{CSSxRef("align-items","-webkit-box-align")}}\*\* +- {{CSSxRef("flex-direction", "-webkit-box-direction")}}\*\* +- {{CSSxRef("-webkit-box-flex-group", "-webkit-box-flex-group")}}\*\* +- {{CSSxRef("flex-grow", "-webkit-box-flex")}}\*\* +- {{CSSxRef("flex-flow", "-webkit-box-lines")}}\*\* +- {{CSSxRef("order", "-webkit-box-ordinal-group")}}\*\* +- {{CSSxRef("flex-direction","-webkit-box-orient")}}\*\* +- {{CSSxRef("justify-content", "-webkit-box-pack")}}\*\* +- {{CSSxRef("-webkit-box-reflect", "-webkit-box-reflect")}}\*\* + +### C + +- {{CSSxRef("-webkit-column-axis", "-webkit-column-axis")}} +- {{CSSxRef("-webkit-column-break-after", "-webkit-column-break-after")}} +- {{CSSxRef("-webkit-column-break-before", "-webkit-column-break-before")}} +- {{CSSxRef("-webkit-column-break-inside", "-webkit-column-break-inside")}} +- {{CSSxRef("-webkit-column-progression", "-webkit-column-progression")}} +- {{CSSxRef("-webkit-cursor-visibility", "-webkit-cursor-visibility")}} + +### D-I + +- {{CSSxRef("-webkit-dashboard-region", "-webkit-dashboard-region")}} +- {{CSSxRef("-webkit-font-size-delta", "-webkit-font-size-delta")}} +- {{CSSxRef("font-smooth", "-webkit-font-smoothing")}} +- {{CSSxRef("-webkit-hyphenate-character", "-webkit-hyphenate-character")}} +- {{CSSxRef("-webkit-hyphenate-limit-after", "-webkit-hyphenate-limit-after")}} +- {{CSSxRef("-webkit-hyphenate-limit-before", "-webkit-hyphenate-limit-before")}} +- {{CSSxRef("-webkit-hyphenate-limit-lines", "-webkit-hyphenate-limit-lines")}} +- {{CSSxRef("-webkit-initial-letter", "-webkit-initial-letter")}} + +### L + +- {{CSSxRef("-webkit-line-align", "-webkit-line-align")}} +- {{CSSxRef("-webkit-line-box-contain", "-webkit-line-box-contain")}} +- {{CSSxRef("-webkit-line-clamp", "-webkit-line-clamp")}} +- {{CSSxRef("-webkit-line-grid", "-webkit-line-grid")}} +- {{CSSxRef("-webkit-line-snap", "-webkit-line-snap")}} +- {{CSSxRef("-webkit-locale", "-webkit-locale")}} +- {{CSSxRef("-webkit-logical-height", "-webkit-logical-height")}} +- {{CSSxRef("-webkit-logical-width", "-webkit-logical-width")}} + +### M + +- {{CSSxRef("-webkit-margin-after", "-webkit-margin-after")}} +- {{CSSxRef("-webkit-margin-before", "-webkit-margin-before")}} +- {{CSSxRef("margin-block-end", "-webkit-margin-end")}}\*\* +- {{CSSxRef("margin-block-start", "-webkit-margin-start")}}\*\* +- {{CSSxRef("-webkit-marquee-direction", "-webkit-marquee-direction")}} +- {{CSSxRef("-webkit-marquee-increment", "-webkit-marquee-increment")}} +- {{CSSxRef("-webkit-marquee-repetition", "-webkit-marquee-repetition")}} +- {{CSSxRef("-webkit-marquee-speed", "-webkit-marquee-speed")}} +- {{CSSxRef("-webkit-marquee-style", "-webkit-marquee-style")}} +- {{CSSxRef("-webkit-marquee", "-webkit-marquee")}} +- {{CSSxRef("-webkit-mask-box-image-outset", "-webkit-mask-box-image-outset")}} +- {{CSSxRef("-webkit-mask-box-image-repeat", "-webkit-mask-box-image-repeat")}} +- {{CSSxRef("-webkit-mask-box-image-slice", "-webkit-mask-box-image-slice")}} +- {{CSSxRef("-webkit-mask-box-image-source", "-webkit-mask-box-image-source")}} +- {{CSSxRef("-webkit-mask-box-image-width", "-webkit-mask-box-image-width")}} +- {{CSSxRef("-webkit-mask-box-image", "-webkit-mask-box-image")}} +- {{CSSxRef("-webkit-mask-repeat-x", "-webkit-mask-repeat-x")}}\*\*\* +- {{CSSxRef("-webkit-mask-repeat-y", "-webkit-mask-repeat-y")}}\*\*\* +- {{CSSxRef("-webkit-mask-source-type", "-webkit-mask-source-type")}} +- {{CSSxRef("-webkit-mask-position-x", "-webkit-mask-position-x")}} +- {{CSSxRef("-webkit-mask-position-y", "-webkit-mask-position-y")}} +- {{CSSxRef("-webkit-max-logical-height", "-webkit-max-logical-height")}} +- {{CSSxRef("-webkit-max-logical-width", "-webkit-max-logical-width")}} +- {{CSSxRef("-webkit-min-logical-height", "-webkit-min-logical-height")}} +- {{CSSxRef("-webkit-min-logical-width", "-webkit-min-logical-width")}} + +### N + +- {{CSSxRef("-webkit-nbsp-mode", "-webkit-nbsp-mode")}} + +### P + +- {{CSSxRef("padding-block-end","-webkit-padding-after")}}\*\* +- {{CSSxRef("padding-block-start","-webkit-padding-before")}}\*\* +- {{CSSxRef("padding-inline-end","-webkit-padding-end")}}\*\* +- {{CSSxRef("padding-inline-start","-webkit-padding-start")}}\*\* +- {{CSSxRef("-webkit-perspective-origin-x", "-webkit-perspective-origin-x")}} +- {{CSSxRef("-webkit-perspective-origin-y", "-webkit-perspective-origin-y")}} + +### R-S + +- {{CSSxRef("-webkit-rtl-ordering", "-webkit-rtl-ordering")}} +- {{CSSxRef("-webkit-svg-shadow", "-webkit-svg-shadow")}} + +### T + +- {{CSSxRef("-webkit-tap-highlight-color", "-webkit-tap-highlight-color")}} +- {{CSSxRef("-webkit-text-decoration-skip", "-webkit-text-decoration-skip")}} +- {{CSSxRef("-webkit-text-decorations-in-effect", "-webkit-text-decorations-in-effect")}} +- {{CSSxRef("-webkit-text-fill-color", "-webkit-text-fill-color")}} +- {{CSSxRef("-webkit-text-security", "-webkit-text-security")}} +- {{CSSxRef("-webkit-text-stroke-color", "-webkit-text-stroke-color")}} +- {{CSSxRef("-webkit-text-stroke-width", "-webkit-text-stroke-width")}} +- {{CSSxRef("-webkit-text-stroke", "-webkit-text-stroke")}} +- {{CSSxRef("-webkit-text-zoom", "-webkit-text-zoom")}} +- {{CSSxRef("-webkit-transform-origin-x", "-webkit-transform-origin-x")}} +- {{CSSxRef("-webkit-transform-origin-y", "-webkit-transform-origin-y")}} +- {{CSSxRef("-webkit-transform-origin-z", "-webkit-transform-origin-z")}} + +### U + +- {{CSSxRef("-webkit-user-drag", "-webkit-user-drag")}} +- {{CSSxRef("-webkit-user-modify", "-webkit-user-modify")}} + +\* 一些是在标准的、无前缀的轨道上。 +\*\* 新语法已经标准化。属性链接到新的语法。旧的带有前缀的语法在一些浏览器中依然支持。 +\*\*\* WebKit 支持不带 `-webkit` 前缀，但是不标准或者不在标准轨道上。 + +## 标准轨道上的带有 WebKit 前缀的属性 + +- {{CSSxRef("appearance", "-webkit-appearance")}} +- {{CSSxRef("-webkit-font-size-delta", "-webkit-font-size-delta")}} + +## 已经成为标准属性的前专有属性 + +> **备注：** 要尽可能地提高兼容性，你需要使用无前缀的标准属性，而不是下面列出的这些有前缀的。 + +### A + +- {{CSSxRef("align-content","-webkit-align-content")}} +- {{CSSxRef("align-items","-webkit-align-items")}} +- {{CSSxRef("align-self","-webkit-align-self")}} +- {{CSSxRef("animation","-webkit-animation")}} +- {{CSSxRef("animation-delay","-webkit-animation-delay")}} +- {{CSSxRef("animation-direction","-webkit-animation-direction")}} +- {{CSSxRef("animation-duration","-webkit-animation-duration")}} +- {{CSSxRef("animation-fill-mode","-webkit-animation-fill-mode")}} +- {{CSSxRef("animation-iteration-count","-webkit-animation-iteration-count")}} +- {{CSSxRef("animation-name","-webkit-animation-name")}} +- {{CSSxRef("animation-play-state","-webkit-animation-play-state")}} +- {{CSSxRef("animation-timing-function","-webkit-animation-timing-function")}} +- {{CSSxRef("appearance", "-webkit-appearance")}} + +### B + +- {{CSSxRef("backface-visibility","-webkit-backface-visibility")}} +- {{CSSxRef("background-clip","-webkit-background-clip")}} +- {{CSSxRef("background-origin","-webkit-background-origin")}} +- {{CSSxRef("background-size","-webkit-background-size")}} +- {{CSSxRef("border-bottom-left-radius","-webkit-border-bottom-left-radius")}} +- {{CSSxRef("border-bottom-right-radius","-webkit-border-bottom-right-radius")}} +- {{CSSxRef("border-image","-webkit-border-image")}} +- {{CSSxRef("border-radius","-webkit-border-radius")}} +- {{CSSxRef("border-top-left-radius","-webkit-border-top-left-radius")}} +- {{CSSxRef("border-top-right-radius","-webkit-border-top-right-radius")}} +- {{CSSxRef("box-decoration-break","-webkit-box-decoration-break")}} +- {{CSSxRef("box-shadow","-webkit-box-shadow")}} +- {{CSSxRef("box-sizing","-webkit-box-sizing")}} + +### C + +- {{CSSxRef("clip-path","-webkit-clip-path")}} +- {{CSSxRef("column-count","-webkit-column-count")}} +- {{CSSxRef("column-fill","-webkit-column-fill")}} +- {{CSSxRef("column-gap","-webkit-column-gap")}} +- {{CSSxRef("column-rule","-webkit-column-rule")}} +- {{CSSxRef("column-rule-color","-webkit-column-rule-color")}} +- {{CSSxRef("column-rule-style","-webkit-column-rule-style")}} +- {{CSSxRef("column-rule-width","-webkit-column-rule-width")}} +- {{CSSxRef("column-span","-webkit-column-span")}} +- {{CSSxRef("column-width","-webkit-column-width")}} +- {{CSSxRef("columns","-webkit-columns")}} + +### F + +- {{CSSxRef("filter","-webkit-filter")}} +- {{CSSxRef("flex","-webkit-flex")}} +- {{CSSxRef("flex-basis","-webkit-flex-basis")}} +- {{CSSxRef("flex-direction","-webkit-flex-direction")}} +- {{CSSxRef("flex-flow","-webkit-flex-flow")}} +- {{CSSxRef("flex-grow","-webkit-flex-grow")}} +- {{CSSxRef("flex-shrink","-webkit-flex-shrink")}} +- {{CSSxRef("flex-wrap","-webkit-flex-wrap")}} +- {{CSSxRef("font-feature-settings", "-webkit-font-feature-settings")}} +- {{CSSxRef("font-kerning", "-webkit-font-kerning")}} +- {{CSSxRef("font-variant-ligatures", "-webkit-font-variant-ligatures")}} + +### G-J + +- {{CSSxRef("grid","-webkit-grid")}} +- {{CSSxRef("grid-area","-webkit-grid-area")}} +- {{CSSxRef("grid-auto-columns","-webkit-grid-auto-columns")}} +- {{CSSxRef("grid-auto-flow","-webkit-grid-auto-flow")}} +- {{CSSxRef("grid-auto-rows","-webkit-grid-auto-rows")}} +- {{CSSxRef("grid-column","-webkit-grid-column")}} +- {{CSSxRef("grid-column-end","-webkit-grid-column-end")}} +- {{CSSxRef("column-gap","-webkit-grid-column-gap")}} +- {{CSSxRef("grid-column-start","-webkit-grid-column-start")}} +- {{CSSxRef("gap","-webkit-grid-gap")}} +- {{CSSxRef("grid-row","-webkit-grid-row")}} +- {{CSSxRef("grid-row-end","-webkit-grid-row-end")}} +- {{CSSxRef("row-gap","-webkit-grid-row-gap")}} +- {{CSSxRef("grid-row-start","-webkit-grid-row-start")}} +- {{CSSxRef("grid-template","-webkit-grid-template")}} +- {{CSSxRef("grid-template-areas","-webkit-grid-template-areas")}} +- {{CSSxRef("grid-template-columns","-webkit-grid-template-columns")}} +- {{CSSxRef("grid-template-rows","-webkit-grid-template-rows")}} + +### H-L + +- {{CSSxRef("hyphens","-webkit-hyphens")}} +- {{CSSxRef("justify-content","-webkit-justify-content")}} +- {{CSSxRef("justify-items","-webkit-justify-items")}} +- {{CSSxRef("justify-self","-webkit-justify-self")}} +- {{CSSxRef("line-break","-webkit-line-break")}} + +### M + +- {{CSSxRef("mask","-webkit-mask")}} +- {{CSSxRef("mask-clip","-webkit-mask-clip")}} +- {{CSSxRef("mask-composite","-webkit-mask-composite")}} +- {{CSSxRef("mask-image","-webkit-mask-image")}} +- {{CSSxRef("mask-origin","-webkit-mask-origin")}} +- {{CSSxRef("mask-position","-webkit-mask-position")}} +- {{CSSxRef("mask-repeat","-webkit-mask-repeat")}} +- {{CSSxRef("mask-size","-webkit-mask-size")}} + +### O-R + +- {{CSSxRef("opacity","-webkit-opacity")}} +- {{CSSxRef("order","-webkit-order")}} +- {{CSSxRef("perspective","-webkit-perspective")}} +- {{CSSxRef("perspective-origin","-webkit-perspective-origin")}} +- {{CSSxRef("print-color-adjust", "-webkit-print-color-adjust")}} +- {{CSSxRef("ruby-position","-webkit-ruby-position")}} + +### S + +- {{CSSxRef("scroll-snap-type","-webkit-scroll-snap-type")}} +- {{CSSxRef("shape-image-threshold","-webkit-shape-image-threshold")}} +- {{CSSxRef("shape-margin","-webkit-shape-margin")}} +- {{CSSxRef("shape-outside","-webkit-shape-outside")}} + +### T + +- {{CSSxRef("text-combine-upright", "-webkit-text-combine")}} +- {{CSSxRef("text-decoration", "-epub-text-decoration")}} +- {{CSSxRef("text-decoration-color", "-webkit-text-color-decoration")}} +- {{CSSxRef("text-decoration-line", "-webkit-text-decoration-line")}} +- {{CSSxRef("text-decoration-style", "-webkit-text-decoration-style")}} +- {{CSSxRef("text-emphasis", "-epub-text-emphasis")}} +- {{CSSxRef("text-emphasis","-webkit-text-emphasis")}} +- {{CSSxRef("text-emphasis-color", "-epub-text-emphasis-color")}} +- {{CSSxRef("text-emphasis-color","-webkit-text-emphasis-color")}} +- {{CSSxRef("text-emphasis-position","-webkit-text-emphasis-position")}} +- {{CSSxRef("text-emphasis-style","-epub-text-emphasis-style")}} +- {{CSSxRef("text-emphasis-style","-webkit-text-emphasis-style")}} +- {{CSSxRef("text-justify","-webkit-text-justify")}} +- {{CSSxRef("text-orientation","-webkit-text-orientation")}} +- {{CSSxRef("text-size-adjust","-webkit-text-size-adjust")}} +- {{CSSxRef("text-underline-position","-webkit-text-underline-position")}} +- {{CSSxRef("transform","-webkit-transform")}} +- {{CSSxRef("transform-origin","-webkit-transform-origin")}} +- {{CSSxRef("transform-style","-webkit-transform-style")}} +- {{CSSxRef("transition","-webkit-transition")}} +- {{CSSxRef("transition-delay","-webkit-transition-delay")}} +- {{CSSxRef("transition-duration","-webkit-transition-duration")}} +- {{CSSxRef("transition-property","-webkit-transition-property")}} +- {{CSSxRef("transition-timing-function","-webkit-transition-timing-function")}} + +### U-W + +- {{CSSxRef("user-select","-webkit-user-select")}} +- {{CSSxRef("word-break", "-epub-word-break")}} +- {{CSSxRef("writing-mode", "-epub-writing-mode")}} + +## 在非 webkit 浏览器中不带前缀支持，但是非标准 + +以下的属性在至少一个浏览器中不带前缀就支持，但是不在标准的轨道上。 + +- {{CSSxRef("mask-position-x","-webkit-mask-position-x")}}\* +- {{CSSxRef("mask-position-y","-webkit-mask-position-y")}}\* + +\* 在 Firefox 中不带前缀支持，在 Safari 中带前缀。 + +## 在 Firefox 中带 `-webkit-` 前缀支持 + +以下属性在 Firefox 中带 `-webkit-` 前缀支持，其中许多也支持无前缀版本。参见上面的[已经成为标准属性的前专有属性](#已经成为标准属性的前专有属性)。 + +> **备注：** 由于许多网站的旧版代码使用了以 -webkit- 为前缀的属性，Edge 和 Firefox 会将许多 -webkit- 为前缀的属性重定向到 -moz-、-ms- 和相应的没有前缀的等价属性上。 + +### A + +- {{CSSxRef("align-content", "-webkit-align-content")}} +- {{CSSxRef("align-items", "-webkit-align-items")}} +- {{CSSxRef("align-self", "-webkit-align-self")}} +- {{CSSxRef("animation", "-webkit-animation")}} +- {{CSSxRef("animation-delay", "-webkit-animation-delay")}} +- {{CSSxRef("animation-direction", "-webkit-animation-direction")}} +- {{CSSxRef("animation-duration", "-webkit-animation-duration")}} +- {{CSSxRef("animation-fill-mode", "-webkit-animation-fill-mode")}} +- {{CSSxRef("animation-iteration-count", "-webkit-animation-iteration-count")}} +- {{CSSxRef("animation-name", "-webkit-animation-name")}} +- {{CSSxRef("animation-play-state", "-webkit-animation-play-state")}} +- {{CSSxRef("animation-timing-function", "-webkit-animation-timing-function")}} +- {{CSSxRef("appearance", "-webkit-appearance")}}\* + +### B + +- {{CSSxRef("backface-visibility", "-webkit-backface-visibility")}} +- {{CSSxRef("background-clip", "-webkit-background-clip")}} +- {{CSSxRef("background-origin", "-webkit-background-origin")}} +- {{CSSxRef("background-size", "-webkit-background-size")}} +- {{CSSxRef("border-bottom-left-radius", "-webkit-border-bottom-left-radius")}} +- {{CSSxRef("border-bottom-right-radius", "-webkit-border-bottom-right-radius")}} +- {{CSSxRef("border-image", "-webkit-border-image")}} +- {{CSSxRef("border-radius", "-webkit-border-radius")}} +- {{CSSxRef("box-align", "-webkit-box-align")}}\*\*, \*\*\* +- {{CSSxRef("box-direction", "-webkit-box-direction")}}\*\*, \*\*\* +- {{CSSxRef("box-flex", "-webkit-box-flex")}}\*\*, \*\*\* +- {{CSSxRef("box-orient", "-webkit-box-orient")}}\*\*, \*\*\* +- {{CSSxRef("box-pack", "-webkit-box-pack")}}\*\*, \*\*\* +- {{CSSxRef("box-shadow", "-webkit-box-shadow")}} +- {{CSSxRef("box-sizing", "-webkit-box-sizing")}} +- {{CSSxRef("border-top-left-radius", "-webkit-border-top-left-radius")}} +- {{CSSxRef("border-top-right-radius", "-webkit-border-top-right-radius")}} + +### F + +- {{CSSxRef("filter", "-webkit-filter")}} +- {{CSSxRef("flex", "-webkit-flex")}} +- {{CSSxRef("flex-basis", "-webkit-flex-basis")}} +- {{CSSxRef("flex-direction", "-webkit-flex-direction")}} +- {{CSSxRef("flex-flow", "-webkit-flex-flow")}} +- {{CSSxRef("flex-grow", "-webkit-flex-grow")}} +- {{CSSxRef("flex-shrink", "-webkit-flex-shrink")}} +- {{CSSxRef("flex-wrap", "-webkit-flex-wrap")}} + +### J + +- {{CSSxRef("justify-content", "-webkit-justify-content")}} + +### M + +- {{CSSxRef("mask", "-webkit-mask")}} +- {{CSSxRef("mask-clip", "-webkit-mask-clip")}} +- {{CSSxRef("-webkit-mask-composite", "-webkit-mask-composite")}}\* +- {{CSSxRef("mask-image", "-webkit-mask-image")}} +- {{CSSxRef("mask-origin", "-webkit-mask-origin")}} +- {{CSSxRef("mask-position", "-webkit-mask-position")}} +- {{CSSxRef("-webkit-mask-position-x", "-webkit-mask-position-x")}}\*\* +- {{CSSxRef("-webkit-mask-position-y", "-webkit-mask-position-y")}}\*\* +- {{CSSxRef("mask-repeat", "-webkit-mask-repeat")}} +- {{CSSxRef("mask-size", "-webkit-mask-size")}} + +### O-P + +- {{CSSxRef("order", "-webkit-order")}} +- {{CSSxRef("perspective", "-webkit-perspective")}} +- {{CSSxRef("perspective-origin", "-webkit-perspective-origin")}} + +### T + +- {{CSSxRef("-webkit-text-fill-color", "-webkit-text-fill-color")}}\*\* +- {{CSSxRef("text-size-adjust", "-webkit-text-size-adjust")}} +- {{CSSxRef("-webkit-text-stroke", "-webkit-text-stroke")}}\*\* +- {{CSSxRef("-webkit-text-stroke-color", "-webkit-text-stroke-color")}}\*\* +- {{CSSxRef("-webkit-text-stroke-width", "-webkit-text-stroke-width")}}\*\* +- {{CSSxRef("transform", "-webkit-transform")}} +- {{CSSxRef("transform-origin", "-webkit-transform-origin")}} +- {{CSSxRef("transition", "-webkit-transition")}} +- {{CSSxRef("transition-delay", "-webkit-transition-delay")}} +- {{CSSxRef("transition-duration", "-webkit-transition-duration")}} +- {{CSSxRef("transition-property", "-webkit-transition-property")}} +- {{CSSxRef("transition-timing-function", "-webkit-transition-timing-function")}} + +### U + +- {{CSSxRef("user-select", "-webkit-user-select")}} + +\* 在 Firefox 中支持有 `-moz-` 和 `-webkit-` 前缀的版本，但是不支持无前缀版本。 +\*\* 这些值是支持的，尽管不是标准的且也不在成为标准的轨道上。 +\*\*\* 应该使用 flex-box 属性。 + +## 弃用的 `-webkit-` 属性 + +以下属性曾经带 -webkit- 前缀支持，但是在常新浏览器（evergreen browser）中不再支持，无论有无 `-webkit-` 前缀。 + +- `-webkit-alt*` +- `-webkit-background-composite` +- `-webkit-border-fit` +- `-webkit-color-correction` +- `-webkit-flow-from` +- `-webkit-flow-into` +- `-webkit-grid-columns`（参见 [`grid-column`](/zh-CN/docs/Web/CSS/grid-column)） +- `-webkit-grid-rows`（参见 [`grid-row`](/zh-CN/docs/Web/CSS/grid-row)） +- `-webkit-highlight` +- `-webkit-hyphenate-charset` +- `-webkit-image-set`（参见 {{CSSxRef("image/image-set", "image-set")}}） +- `-webkit-mask-attachment` +- `-webkit-match-nearest-mail-blockquote-color` +- `-webkit-margin-collapse` +- `-webkit-margin-after-collapse` +- `-webkit-margin-before-collapse` +- `-webkit-margin-bottom-collapse` +- `-webkit-margin-top-collapse` +- {{CSSxRef("-webkit-overflow-scrolling", "-webkit-overflow-scrolling")}} +- `-webkit-region-break-after` +- `-webkit-region-break-before` +- `-webkit-region-break-inside` +- `-webkit-region-fragment` +- `-webkit-shape-inside` +- [-webkit-touch-callout](/zh-CN/docs/Web/CSS/-webkit-touch-callout)（参见 `touch-action`） +- `background-origin-x`（无前缀！） +- `background-origin-y`（无前缀！） + +\* 仍在 Safari 技术预览版中支持，但是通常在正式发布的浏览器中不支持。 + +## 伪类 + +- {{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}} +- {{CSSxRef(":is", ":-webkit-any()")}} +- {{CSSxRef(":any-link", ":-webkit-any-link")}}\* +- {{CSSxRef(":autofill",":-webkit-autofill")}} +- {{CSSxRef(":autofill-strong-password",":-webkit-autofill-strong-password")}} +- {{CSSxRef(":drag",":-webkit-drag")}} +- {{CSSxRef(":full-page-media",":-webkit-full-page-media")}} +- {{CSSxRef(":full-screen", ":-webkit-full-screen")}}\* +- {{CSSxRef(":full-screen-ancestor",":-webkit-full-screen-ancestor")}} +- {{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}} +- {{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}} + +\* 现为标准。 + +> **备注：** 如果在选择器的链或组中有一个无效的伪类，那么整个选择器列表都是无效的。 + +## 伪元素 + +由于网页兼容性的原因，Blink、WebKit 和 Gecko 浏览器将所有以 `::-webkit-` 开头的伪类都视为有效的。 + +- {{CSSxRef("::file-selector-button","::-webkit-file-upload-button")}}\* +- {{CSSxRef("::-webkit-inner-spin-button", "::-webkit-inner-spin-button")}} +- {{CSSxRef("::placeholder", "::-webkit-input-placeholder")}} +- {{CSSxRef("::-webkit-media-controls", "::-webkit-media-controls")}} +- {{CSSxRef("::-webkit-media-controls-current-time-display", "::-webkit-media-controls-current-time-display")}} +- {{CSSxRef("::-webkit-media-controls-enclosure", "::-webkit-media-controls-enclosure")}} +- {{CSSxRef("::-webkit-media-controls-fullscreen-button", "::-webkit-media-controls-fullscreen-button")}} +- {{CSSxRef("::-webkit-media-controls-mute-button", "::-webkit-media-controls-mute-button")}} +- {{CSSxRef("::-webkit-media-controls-overlay-enclosure", "::-webkit-media-controls-overlay-enclosure")}} +- {{CSSxRef("::-webkit-media-controls-panel", "::-webkit-media-controls-panel")}} +- {{CSSxRef("::-webkit-media-controls-play-button", "::-webkit-media-controls-play-button")}} +- {{CSSxRef("::-webkit-media-controls-timeline", "::-webkit-media-controls-timeline")}} +- {{CSSxRef("::-webkit-media-controls-time-remaining-display", "::-webkit-media-controls-time-remaining-display")}} +- {{CSSxRef("::-webkit-media-controls-toggle-closed-captions-button", "::-webkit-media-controls-toggle-closed-captions-button")}} +- {{CSSxRef("::-webkit-media-controls-volume-control-container", "::-webkit-media-controls-volume-control-container")}} +- {{CSSxRef("::-webkit-media-controls-volume-control-hover-background", "::-webkit-media-controls-volume-control-hover-background")}} +- {{CSSxRef("::-webkit-media-controls-volume-slider", "::-webkit-media-controls-volume-slider")}} +- {{CSSxRef("::-webkit-meter-bar", "::-webkit-meter-bar")}} +- {{CSSxRef("::-webkit-meter-even-less-good-value", "::-webkit-meter-even-less-good-value")}} +- {{CSSxRef("::-webkit-meter-inner-element", "::-webkit-meter-inner-element")}} +- {{CSSxRef("::-webkit-meter-optimum-value", "::-webkit-meter-optimum-value")}} +- {{CSSxRef("::-webkit-meter-suboptimum-value", "::-webkit-meter-suboptimum-value")}} +- {{CSSxRef("-webkit-media-text-track-container", "-webkit-media-text-track-container")}} +- {{CSSxRef("::-webkit-outer-spin-button", "::-webkit-outer-spin-button")}} +- {{CSSxRef("::-webkit-progress-bar", "::-webkit-progress-bar")}} +- {{CSSxRef("::-webkit-progress-inner-element", "::-webkit-progress-inner-element")}} +- {{CSSxRef("::-webkit-progress-value", "::-webkit-progress-value")}} +- {{CSSxRef("::-webkit-search-cancel-button", "::-webkit-search-cancel-button")}} +- {{CSSxRef("::-webkit-search-results-button", "::-webkit-search-results-button")}} +- {{CSSxRef("::-webkit-slider-runnable-track", "::-webkit-slider-runnable-track")}} +- {{CSSxRef("::-webkit-slider-thumb", "::-webkit-slider-thumb")}} + +\* 现为标准 + +> **备注：** 通常来说，如果在选择器的链或组中有一个无效的伪元素或者伪类，那么整个选择器列表都是无效的。如果伪元素（不是伪类）有 -webkit- 前缀，那么自 Firefox 版本 63 起，Blink、WebKit 和 Gecko 浏览器都假定其为有效的，不会使整个选择器列表无效。 + +## 媒体特性 + +- {{CSSxRef("@media/-webkit-animation", "-webkit-animation")}} +- {{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}} +- {{CSSxRef("@media/-webkit-transform-2d", "-webkit-transform-2d")}} +- {{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}} +- {{CSSxRef("@media/-webkit-transition", "-webkit-transition")}} + +## 参见 + +- [在 WebKit Trac 上设计表单控件的样式](https://trac.webkit.org/wiki/Styling%20Form%20Controls) +- [Mozilla CSS 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)