recursal/MDN huggingface dataset:
掌握弹性物件的包装
=========

Flexbox 被设计为一维的布局工具，这意味着在处理元素布局方式时只能设计为行或者设计为列——两者不能兼顾。然而 Flex 拥有一种将 flex 元素包围在新的一行内的特性，创建一个新的行如果设置了 `flex-direction` 为 `row` 以及创建新的一列如果设置了 `flex-direction` 为 `column`。在这篇教程中，我将解释这个特性的内部工作原理，以及它设计的目的是什么和在什么情况下要使用 CSS 网格布局而不是弹性盒子。

把物件包装起来
-------

`flex-wrap` 属性的初始值是`nowrap`。这就意味着如果你有一组的对其容器而言太宽的弹性物件，它们就会溢出。如果你想要一旦它们变得太宽就换行，你必须给 `flex-wrap` 属性添加`wrap`值，或者，用`row wrap` 或 `column wrap` 值作用于`flex-flow`的速写。

物件接着就会在容器内换行。在接下来的例子里，我有 10 个`160px`的`flex-basis`物件，它们都具备伸展和收缩能力。一旦第一行达到了没有足够空间放置额外 160 像素物件的点，一个新的弹性行就会被建立，一直这样直到所有的物件被放置。因为物件可以伸展，它们会扩展大于 160 像素从而完整地填充一行。如果在最后一行只有 1 个物件，它就将拉长了充满整行。

我们可以看到相同的事情也发生在列上。容器会需要有一个高度让物件可以开始换行并且制造新的列，并且物件会拉伸高度来填满每一个列。

包装和弹性方向
-------

当结合 `flex-direction` 属性，包装就如你所期待的方式工作。如果 `flex-direction` 被设置成 row-reverse 那么物件就会从容器的底边开始并且以行的反向顺序堆叠自身。

注意反向只能发生在行内、行的方向。我们从右面开始然后跳到第二行再从右边开始。我们没有在两个方向上都反向，从容器底部上来的反向！

一维布局介绍
------

正如我们上面例子中所见到的，如果我们的物件被允许伸展和收缩，当最后一行或一列有较少的物件时，那么这些物件就会伸展从而填满可用空间。

弹性盒子中并没有方法告诉一行里的物件和上一行里的物件对齐——每个弹性行表现得就像一个新的弹性容器。它在主要坐标轴上处理空间分布。如果只有一个物件，并且这个物件允许伸展，他就会填充坐标轴，就好像你有一个单物件的弹性容器。

如果你想在二维方向上布局，那么你很可能想要网格布局。我们可以比较我们上面的行换行例子和 CSS 网格版本的布局来看一下区别。一下实时的例子使用 CSS 网格布局来构建一个布局，它具有至少 160 像素的列的布局，在所有列之间分配额外的空间。

这就是一维和二维布局的区别。在一维的方式里就像弹性盒子，我们仅仅控制行或者列。在二维布局里就像网格，我们同时控制两个。如果你想按行分布空间，使用弹性盒子。如果不是，使用网格。

基于弹性盒子的网格系统如何工作？
----------------

基本上基于弹性盒子的网格系统，是通过将弹性盒子带回到我们所熟悉的基于浮层布局的世界，来工作的。如果你对弹性物件设置了百分比的宽度——`flex-basis` 或是通过对物件增加宽度同时让 `flex-basis` 的值保持为`auto`——你就能获得二维布局的印象。你可以在下面的例子中看到这样的运作。

这里我有设置 `flex-grow` 和 `flex-shrink` 为 `0` 来使固定弹性物件，并且接着使用百分比来控制弹性，正如我们在浮动布局里所使用的那样。

如果你需要弹性物件在坐标轴上对齐，用这样的方法来控制宽度就能达到这个效果。在大多数的情况下，向弹性物件增加款宽度的做法演示了你可能会比将组件切换成网格布局提供的更好体验。

在物件之间建立间隔
---------

当包装弹性物件的时候，间隔它们的需要很可能被提出。在当下我们还没有任何针对弹性盒子的块对齐模块间隔属性的实现。在未来我们将能够对弹性盒子简单的使用 `row-gap` 和 `column-gap` 就如我们在 CSS 网格里做的。当下你会需要使用边距来达成这个要求。

你可以从下面一个实时的例子里看到，为了建立间隔并且不在容器的边缘建立间隔，我们需要在弹性容器自身上使用负边距。弹性容器的任何一条边移入第二个包装从而使得负边距可以将包装的元素拉回来。

正是这个间隔属性的需求，一旦实现，将为我们解决问题。适当的间隙只发生在物件的内边缘。

折叠物件
----

弹性盒子标准详述了如果一个弹性物件在物件上被设置了 `visibility: collapse` 时应当发生什么。参见对于`visibility`属性的 MDN 文档。这份标准描述了如下的表现：

> 
> “定义可见性：在一个弹性物件上的折叠导致它成为一个折叠弹性物件，在一个表行或者表列制造一个类似于 visibility:collapse 的效果：折叠弹性物件整个地从渲染中移除，但在底层保留了一个“支撑”从而保持了弹性行的跨界尺寸的稳定。因此，如果一个弹性容器仅包含一个弹性行，动态地折叠或者展开物件可能改变弹性容器的主尺寸，但是这样确保了跨界尺寸上没有影响以及不会导致页面其余的布局“晃动”。动态行包装在折叠后会被重做的，所以，包含多行的弹性容器的跨界尺寸是可能变化的。” - 折叠物件
> 
> 
> 

如果你想要针对弹性物件使用 JavaScript 来显示和隐藏内容的例子，这样的表现是很有用的。这个标准里的例子演示了一个这样的模式。

在下面的实时例子里，我有一个非包装的弹性容器。第三个物件相比其他的有跟多的内容被设置 `visibility: collaps` 并且因此弹性盒子会保持一个高度的结构来满足显示物件的需要。如果你从 CSS 里移除`visibility: collapse` 或是将值改变为 `visible`，你会看到物件消失了并且空间在非包装的物件之间重新分配；弹性容器的高度不应该改变。

**备注：** 对下面的两个例子使用 Firefox 浏览器，因为 Chrome 和 Safari 会把折叠处理为隐藏。

当处理多行弹性容器时你会需要理解包装会在折叠*后*被重做。所以浏览器需要重做包装的行为来计算新的还留在行内方向里的被折叠物件的空间。

这意味着物件可能在和他们所开始的不同的行里结束。在一个物件在被显示和隐藏的场景下，它很可能导致物件结束在不同的行里。

我已经在下一个实时例子里构建了这样的表现。你可以看到基于折叠物件的位置，伸展改变了它们所在的行。如果你加入更多的内容到第二个物件里，一旦获得了足够多的内容它就改变了行。然后首行仅仅成为和单行文本一样的高度。

如果这对你的布局造成了麻烦，可能就需要重新考虑这个结构，比如，将每一行放置到分开的弹性容器里从而它们不会跨行。

### `visibility: hidden` 和 `display: none` 的区别

当你为了隐藏一个物件去设置 `display: none` ，物件就被格式化的页面结构移除。在实际中的意义就是技术器忽略了它，类似转换的事情不会运行。使用 `visibility: hidden` 保持了格式化结构的框，这十分有用，它仍旧表现的像是布局中的一部分即便用户看不到它。
lab()
=====

函数记号 **`lab()`** 在 CIE L\*a\*b\* 颜色空间中表示指定颜色。Lab 表示人可见的全部颜色的范围。

语法
--


```css
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);
```

### 取值

* 函数记号：`lab(L a b [/ A])`
    + `L` 为介于 `0` 和 `100` 之间的 `<number>` 或介于 `0%` 和 `100%` 之间的 `<percentage>`，指定了 CIE 明度，此处数值 `0` 对应 `0%`（黑），数值 `100` 对应 `100%`（白）。
    + `a` 为介于 `-125` 和 `125` 之间的 `<number>` 或介于 `-100%` 和 `100%` 之间的 `<percentage>`，指定了在 Lab 颜色空间中沿 `a` 轴的距离，即颜色绿或红的程度。
    + `b` 为介于 `-125` 和 `125` 之间的 `<number>` 或介于 `-100%` 和 `100%` 之间的 `<percentage>`，指定了在 Lab 颜色空间中沿 `b` 轴的距离，即颜色蓝或黄的程度。
    + `A`（alpha）可为介于 `0` 和 `1` 之间的 `<number>` 或 `<percentage>`，此处数值 `1` 对应 `100%`（完全不透明）。

**备注：** 在 CSS 中，通常当百分比值有等价数值时，`100%` 等于数值 `1`。此处注意 `100%` 对于 `L` 值等于数值 `100`，对于 `a` 值和 `b` 值等于 `125`。

### 形式语法
```

<lab()> =   
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

示例
--

### 用 lab() 调整明度和颜色轴

下列示例展示了改变 `lab()` 函数的明度、a 轴和 b 轴值的效果。

#### HTML


```html
<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>

<div data-color="blue"></div>
<div data-color="blue-light"></div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```



```css
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-a"] {
  background-color: lab(100 110 125);
}

[data-color="green"] {
  background-color: lab(75% -120 125);
}
[data-color="green-b"] {
  background-color: lab(75% -120 10);
}

[data-color="blue"] {
  background-color: lab(0 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(70 -120 -120);
}
```


#### 结果

### 用 lab() 调整不透明度

下列示例展示了改变函数记号 `lab()` 的 `A`（alpha）值的效果。为演示不透明度的效果，`red` 和 `red-alpha` 元素与 `#background-div` 元素重叠。`0.4` 的 `A` 值使颜色有 40% 的不透明度。

#### HTML


```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}
```



```css
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(100 125 125 / 0.4);
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # lab-colors |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<color>` 数据类型所列的所有颜色记号
* CSS 中的 LCH 颜色——是什么，为什么，怎么用？
* Safari 技术预览 122 发布记录：含 `lab()` 和 `lch()` 颜色
oklab()
=======

函数记号 **`oklab()`** 在 Oklab 颜色空间中表示指定颜色，此颜色空间尽力模仿人眼感知颜色的方式。`oklab()` 在 Oklab 颜色空间中使用直角坐标系，有 a 轴和 b 轴。若想要极坐标颜色系统——色度和色相，请使用 `oklch()`。

Oklab 为感知颜色空间，可用于：

* 在不改变图像明度的前提下，将图像转换为灰度图。
* 在保持用户所感知的色相和明度的前提下，修改颜色的饱和度。
* 创建平滑均匀的颜色渐变（例如在 `<canvas>` 元素中手动插值）。

`oklab()` 函数可表示 Oklab 颜色空间中的任意颜色。此颜色空间比 RGB 更宽广，包含宽色域颜色和 P3 颜色。

语法
--


```css
/\* oklab(明度 a 轴 b 轴) \*/
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);

/\* oklab(明度 a 轴 b 轴 / alpha) \*/
oklab(59.69% 0.1007 0.1191 / 0.5);
```


**备注：** oklab() 函数**不**像其他某些颜色函数一样支持以逗号分隔其值，且可选的 alpha 值在指定时需置于正斜杠（`/`）之后。

### 取值

* 函数记号：`oklab(L a b [/ A])`
    + `L` 为介于 `0` 和 `1` 之间的 `<number>` 或介于 `0%` 和 `100%` 之间的 `<percentage>`，此处数值 `0` 对应 `0%`（黑），数值 `1` 对应 `100%`（白）。`L` 指定了感知明度。
    + `a` 为介于 `-0.4` 和 `0.4` 之间的 `<number>` 或介于 `-100%` 和 `100%` 之间的 `<percentage>`。此值指定了在 Oklab 空间中沿 `a` 轴的距离，即颜色绿或红的程度。
    + `b` 为介于 `-0.4` 和 `0.4` 之间的 `<number>` 或介于 `-100%` 和 `100%` 之间的 `<percentage>`。此值指定了在 Oklab 空间中沿 `b` 轴的距离，即颜色蓝或黄的程度。
    + `A`（alpha）为介于 `0` 和 `1` 之间的 `<number>` 或 `<percentage>`，此处数值 `1` 对应 `100%`（完全不透明）。`A` 表示颜色的透明度（即 alpha 通道）。
### 形式语法
```

<oklab()> =   
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

示例
--

### 用 oklab() 调整明度和轴

下列示例展示了改变 `oklab()` 函数的明度、a 轴和 b 轴值的效果。

#### HTML


```html
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```



```css
[data-color="blue"] {
  background-color: oklab(0.5 -0.3 -0.4);
}
[data-color="blue-light"] {
  background-color: oklab(0.7 -0.3 -0.4);
}

[data-color="red"] {
  background-color: oklab(100% 0.4 0.4);
}
[data-color="red-a"] {
  background-color: oklab(100% 0.2 0.4);
}

[data-color="green"] {
  background-color: oklab(100% -100% 0.4);
}
[data-color="green-b"] {
  background-color: oklab(100% -100% 0.6);
}
```


#### 结果

### 用 oklab() 调整不透明度

下列示例展示了改变 `oklab()` 函数的 `A`（alpha）值的效果。为演示不透明度的效果，`red` 和 `red-alpha` 元素与 `#background-div` 元素重叠。给予 `red-alpha` 元素 `0.4` 的不透明度使其显得比 `red` 元素更透明。

#### HTML


```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}
```



```css
[data-color="red"] {
  background-color: oklab(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: oklab(50% 130 20 / 0.4);
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # ok-lab |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<color>` 数据类型所列的所有颜色记号
* `oklch()`：另一使用与 `oklab()` 相同的颜色空间但在极坐标系中的函数记号
* 一个用于图像处理的感知颜色空间
color-contrast()
================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`color-contrast()`** 函数标记接收一个 `color` 值，并将其与其他的 `color` 值比较，从列表中选择最高对比度的颜色。

语法
--


```css
color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)
```

### 值

函数标记：`color-contrast(color vs color-list)`

`color`

任何有效的 `<color>` 值。

`vs`

字面保留字，作为语法的一部分。

`color-list`

由逗号分隔的列表，至少两个值，以与第一个值进行比较。

规范
--

| Specification |
| --- |
| CSS Color Module Level 6 # colorcontrast |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
hsl()
=====

**`hsl()`** 函数标记根据其*色相*、*饱和度*和*明度*来表达 sRGB (en-US) 颜色。可选的 *alpha* 成分代表了颜色的透明度。

**备注：** 旧版的 `hsla()` 语法是 `hsl()` 的别称，接收相同的参数，行为也是相同的。

尝试一下
----

使用 `hsl()` 来定义*互补色*可以用一个公式来完成，因为它们位于色环 (en-US)中同一直径上。如果一个颜色的色相度是 `θ`，那么其互补色的色相角就是 `180deg - θ`。

语法
--


```css
hsl(120deg 75% 25%)
hsl(120deg 75% 25% / 0.6)
```


此函数也接受旧版的语法，即所有的值都是用逗号分隔的。

### 值

函数标记：`hsl(H S L[ / A])`

`H`

`<number>`、`<angle>` 或者关键字 `none`，代表色相角。关于此类型的更多细节可以参见 `<hue>` (en-US) 文档。

`S`

`<percentage>` 或者关键字 `none`，代表饱和度。在这里，`100%` 是完全饱和，而 `0%` 是完全不饱和（灰色）。

`L`

`<percentage>` 或者关键字 `none`，代表明度。在这里，`100%` 是白色，`0%` 是黑色，`50%` 是“正常”。

`A` 可选

`<alpha-value>` 或者关键字 `none`，其中数字 `1` 代表 `100%`（完全不透明）。


**备注：** 参见缺失颜色成分 以了解 `none` 的效果。

### 形式语法
```

<hsl()> =   
  <legacy-hsl-syntax>  |  
  <modern-hsl-syntax>    
  
<legacy-hsl-syntax> =   
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )    
  
<modern-hsl-syntax> =   
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<hue> =   
  <number>  |  
  <angle>     
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

示例
--

### 使用 hsl() 和 conic-gradient()

`hsl()` 函数和 `conic-gradient()` 可以很好地配合使用，因为这两个都处理角度。
```

<div></div>
```


#### 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);
}
```


#### 结果

### 旧版语法：逗号分隔值

由于历史原因，`hsl()` 函数接受所有值用逗号分隔的形式。

#### HTML


```html
<div class="space-separated"></div>
<div class="comma-separated"></div>
```


#### 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%);
}
```


#### 结果

### 旧版语法：hsla()

旧版的 `hsla()` 语法是 `hsl()` 的别称。

#### HTML


```html
<div class="hsl"></div>
<div class="hsla"></div>
```


#### 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%);
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # the-hsl-notation |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<color>`：代表颜色的数据类型
* HSL 颜色拾取器
rgb()
=====

**`rgb()`** 函数标记根据颜色的红色、绿色和蓝色成分来表达颜色。可选的 alpha 成分代表了颜色的透明度。

**备注：** 旧版的 `rgba()` 语法是 `rgb()` 的别称，接收相同的参数，行为也是相同的。

尝试一下
----

语法
--


```css
rgb(255 255 255)
rgb(255 255 255 / .5)
```


此函数也接受旧版的语法，即所有的值都是用逗号分隔的。

### 值

函数标记：`rgb(R G B[ / A])`

`R`、`G`、`B`

每个都是从 `0` 到 `255` 之间的 `<number>` 值，或从 `0%` 到 `100%` 之间的 `<percentage>` 值，或者为关键字 `none`，分别代表红色、绿色和蓝色的通道。

`A` 可选

`<alpha-value>` 值或者关键字 `none`，数字 `1` 对应 `100%`（完全不透明）。


**备注：** 参见缺失颜色成分以了解 `none` 的效果。

### 形式语法
```

<rgb()> =   
  <legacy-rgb-syntax>  |  
  <modern-rgb-syntax>    
  
<legacy-rgb-syntax> =   
  rgb( <percentage>#{3} , <alpha-value>? )  |  
  rgb( <number>#{3} , <alpha-value>? )        
  
<modern-rgb-syntax> =   
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

示例
--

### 旧版语法：逗号分隔值

由于历史原因，`rgb()` 函数接受所有值用逗号分隔的形式。

#### HTML


```html
<div class="space-separated"></div>
<div class="comma-separated"></div>
```


#### 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);
}
```


#### 结果

### 旧版语法：rgba()

旧版的 `rgba()` 语法是 `rgb()` 的别称。

#### HTML


```html
<div class="rgb"></div>
<div class="rgba"></div>
```


#### 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);
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # rgb-functions |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<color>` 数据类型，以了解所有颜色标记的列表
oklch()
=======

函数记号 **`oklch()`** 在 Oklch 颜色空间中表示指定颜色。此函数记号与 `oklab()` 有相同的 L 轴，但使用极坐标 C（色度）和 H（色相）。

语法
--


```css
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)
```

### 取值

* 函数记号：`oklch(L C H [/ A])`
    + `L` 为介于 `0` 和 `1` 之间的 `<number>` 或介于 `0%` 和 `100%` 之间的 `<percentage>`，此处数值 `0` 对应 `0%`（黑），数值 `1` 对应 `100%`（白）。`L` 指定了感知明度。
    + `C` 为 `<number>` 或 `<percentage>`，此处 `0%` 对应 `0`，`100%` 对应数值 `0.4`。此值衡量了色度（大概表示“颜色的量”），其有用的最小值为 `0`，最大值无理论上限（但实际不超过 `0.5`）。
    + `H` 为 `<number>` 或 `<angle>`，指定了沿正半 a 轴（紫红方向）的色相角。`90deg` 指向正半 b 轴（芥末黄方向），`180deg` 指向负半 a 轴（蓝绿方向），`270deg` 指向负半 b 轴（天蓝方向）。
    + `A`（alpha）可为介于 `0` 和 `1` 之间的 `<number>` 或介于 `0%` 和 `100%` 之间的 `<percentage>`，此处数值 `1` 对应 `100%`（完全不透明）。
### 形式语法
```

<oklch()> =   
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<hue> =   
  <number>  |  
  <angle>     
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

示例
--

### 调整颜色的明度、色度和色相

下列示例展示了改变颜色函数 `oklch()` 的 `L`（明度）、`C`（色度）和 `H`（色相）值的效果。

#### HTML


```html
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```



```css
[data-color="blue"] {
  background-color: oklch(60% 0.4 240);
}
[data-color="blue-light"] {
  background-color: oklch(90% 0.4 240);
}

[data-color="red"] {
  background-color: oklch(100% 0.4 30);
}
[data-color="red-chroma"] {
  background-color: oklch(100% 0.3 40);
}

[data-color="green"] {
  background-color: oklch(60% 0.57 161);
}
[data-color="green-hue"] {
  background-color: oklch(60% 0.57 181);
}
```


#### 结果

### 调整颜色的 alpha 值

下列示例展示了改变颜色函数 `oklch()` 的 `A`（alpha）值的效果。为演示不透明度的效果，`red` 和 `red-alpha` 元素与 `#background-div` 元素重叠。`0.4` 的 `A` 值使颜色有 40% 的不透明度。

#### HTML


```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: oklch(100% 0.57 217);
  width: 150px;
  height: 40px;
}
```



```css
[data-color="red"] {
  background-color: oklch(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: oklch(50% 130 20 / 0.4);
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # ok-lab |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<color>` 数据类型所列的所有颜色记号
* 一个用于图像处理的感知颜色空间
* CSS 中的 OKLCH
* Safari 技术预览 137 发布记录：含 `oklch()` and `oklab()` 颜色
lch()
=====

函数记号 **`lch()`** 在 LCH 颜色空间中表示指定颜色。此函数记号与 `lab()` 有相同的 L 轴，但使用极坐标 C（色度）和 H（色相）。

语法
--


```css
lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);
```

### 取值

* 函数记号：`lch(L C H [/ A])`
    + `L` 为介于 `0` 和 `100` 之间的 `<number>` 或介于 `0%` 和 `100%` 之间的 `<percentage>`，指定了 CIE 明度，此处数值 `0` 对应 `0%`（黑），数值 `100` 对应 `100%`（白）。
    + `C` 为 `<number>` 或 `<percentage>`，此处 `0%` 对应 `0`，`100%` 对应数值 `150`。此值衡量了色度（大概表示“颜色的量”），其有用的最小值为 `0`，最大值无理论上限（但实际不超过 `230`）。
    + `H` 为 `<number>` 或 `<angle>`，指定了沿正半 a 轴（紫红方向）的色相角。`90deg` 指向正半 b 轴（芥末黄方向），`180deg` 指向负半 a 轴（蓝绿方向），`270deg` 指向负半 b 轴（天蓝方向）。
    + `A`（alpha）可为介于 `0` 和 `1` 之间的 `<number>` 或 `<percentage>`，此处数值 `1` 对应 `100%`（完全不透明）。

**备注：** 在 CSS 中，通常当百分比值有等价数值时，`100%` 等于数值 `1`。此处注意 `100%` 对于 `L` 值等于数值 `100`，对于 `C` 值等于 `150`。

### 形式语法
```

<lch()> =   
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<hue> =   
  <number>  |  
  <angle>     
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

示例
--

### 用 lch() 调整明度、色度和色相

下列示例展示了改变函数记号 `lch()` 的 `L`（明度）、`C`（色度）和 `H`（色相）值的效果。

#### HTML


```html
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```



```css
[data-color="blue"] {
  background-color: lch(0% 100 240);
}
[data-color="blue-light"] {
  background-color: lch(100% 100 240);
}

[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-chroma"] {
  background-color: lch(100% 30 20);
}

[data-color="green"] {
  background-color: lch(50% 132 130);
}
[data-color="green-hue"] {
  background-color: lch(50% 132 180);
}
```


#### 结果

### 用 lch() 调整不透明度

下列示例展示了改变函数记号 `lch()` 的 `A`（alpha）值的效果。为演示不透明度的效果，`red` 和 `red-alpha` 元素与 `#background-div` 元素重叠。`0.4` 的 `A` 值使颜色有 40% 的不透明度。

#### HTML


```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```


#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lch(100% 100 240);
  width: 150px;
  height: 40px;
}
```



```css
[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: lch(50% 130 20 / 0.4);
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # lab-colors |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<color>` 数据类型所列的所有颜色记号
* CSS 中的 LCH 颜色——是什么，为什么，怎么用？
* Safari 技术预览 122 发布记录：含 `lch()` 和 `lab()` 颜色
device-cmyk()
=============

**`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`

`<number>` 或 `<percentage>` 值，提供 CMYK 颜色的青色、品红色、黄色和黑色成分。

`A` 可选

`<alpha-value>` 值，其中 `1` 对应 `100%`（完全不透明）。

`color` 可选

可选的后备 `<color>` 值，当用户代理不知道如何将 CMYK 颜色转换为 RGB 颜色时使用。

### 形式语法
```

<device-cmyk()> =   
  <legacy-device-cmyk-syntax>  |  
  <modern-device-cmyk-syntax>    
  
<legacy-device-cmyk-syntax> =   
  device-cmyk( <number>#{4} )    
  
<modern-device-cmyk-syntax> =   
  device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )    
  
<cmyk-component> =   
  <number>      |  
  <percentage>  |  
  none            
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

规范
--

| Specification |
| --- |
| CSS Color Module Level 5 # device-cmyk |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
圆角边框生成器
=======

此工具可用于生成 CSS `border-radius` 样式。
Box-shadow 生成器
==============

这个可视化工具可以帮助你生成一个元素的 CSS `box-shadow` 相关代码，添加 box shadow 效果到你的 CSS 对象上。

Box-shadow 生成器可以向一个元素上添加一至多个 box shadow。

启动工具以后，你可以在顶侧右部找到一个长方形，那是要应用阴影效果的元素。当该元素被选择（首次加载页面时即如此）时你可以应用一些基本的样式：

* 使用颜色选择器设置元素的颜色（`color`）。
* 使用“border”复选框给予元素一个边框（`border`）。
* 使用滑轨设置元素的 `top`、`left`、`width` 和 `height` 属性。

要添加一个阴影，点击左上侧的“+”按钮，这就增加了一个阴影，并将其列在左边的栏里。现在你可以设置新阴影的值：

* 使用颜色选择器设置阴影的颜色（`color`）。
* 使用“inset”复选框设置阴影是否嵌入元素。
* 使用滑轨设置阴影元素的位置、模糊和扩展大小。

要添加另一个阴影，再次点击“+”。现在你设置的任何数值都将应用于这个新的阴影。用左上方的 ↑ 和 ↓ 按钮改变这两个阴影的应用顺序。再次选择第一个阴影，在左边的栏目中点击它。要更新元素本身的样式，请点击顶部标有“element”的按钮来选择它。

你可以为该元素添加 `::before` 和 `::after` 伪元素，并给它们加上盒状阴影。要在元素和它的伪元素之间进行切换，可以使用顶部标有“element”、“:before”和“:after”的按钮。

右下角的方框包含该元素的 CSS 和任何 `before::` 或 `::after` 伪元素。

参见
--

Border-image 生成器

该交互性工具可以让你可视化地创建边框图片（`border-image` 属性）。

Border-radius 生成器

该交互性工具可以让你可视化地创建圆角（`border-radius` 属性）。
多个背景的应用
=======

你可以应用**多个背景**到元素。这些图层彼此叠加，第一个提供的背景位于最上层，最后一个提供的背景位于最下层。只有最后一个背景可以包含背景颜色。

指定多个背景很简单：


```css
.myclass {
  background:
    background1,
    background 2,
    ...,
    backgroundN;
}
```


除了`background-color`之外，你可以用简写`background` 属性和它的各个属性来做到这一点。也就是说，以下背景属性可以被指定为一个列表，每个背景一个： `background`, `background-attachment`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`.

示例
--

在这个例子中，三个背景叠加在一起：Firefox 标志，气泡图像和线性渐变：

### HTML


```html
<div class="multi-bg-example"></div>
```

### CSS


```css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}
```

### 结果

（如果在 CodePen 中图像没有出现，点击 CSS 模块的 TIdy 按钮）

正如你在这里看到的，Firefox 徽标（在`background-image`中首先列出）位于气泡图形正上方，接着是位于所有先前“images”下方的渐变（最后列出）。每个后续的子属性（`background-repeat`和`background-position`）适用于相应的背景。因此，background-repeat 的第一个列出的值适用于第一个（最前面的）背景，依此类推。

参见
--

* Using CSS gradients (en-US)