:picture-in-picture - CSS：层叠样式表

:picture-in-picture
===================

**`:picture-in-picture`** CSS 伪类匹配当前处于画中画模式的元素。

语法
--

```css
:picture-in-picture {
  /\* ... \*/
}
```

用法说明
----

`:picture-in-picture` 伪类允许你配置样式表，以便视频在画中画或者传统播放模式来回切换时自动调整内容的大小、样式或布局。

示例
--

在此示例中，当视频在浮动窗口显示时，会有盒状阴影。

### HTML

页面的 HTML 如下所示：

```html
<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>

<p>
  This demo uses the <code>:picture-in-picture</code> pseudo-class to
  automatically change the style of a video entirely using CSS.
</p>

<video id="pip-video"></video>
```

ID 为 `"pip-video"` 的 `<video>` 会根据是否在画中画浮动窗口中而在是否带有一个红色的阴影之间变换。

### CSS

这一效果发生在 CSS 中。

```css
:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # pip-state |

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

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

参见
--

* Picture-in-picture API
* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`


初始值 - CSS：层叠样式表

初始值
===

CSS属性的**初始值**是其默认值，如其定义表中所列。初始值的使用取决于属性是否被继承：

* 对于继承属性，初始值只能被用于没有指定值的**根元素**上。
* 对于非继承属性，初始值可以被用于**任意**没有指定值的元素上。

**备注：** 你可以使用 `initial` (en-US) 关键词明确指定初始值。

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value |

参见
--

* `initial`
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素


:invalid - CSS：层叠样式表

:invalid
========

**`:invalid`** 是 CSS 伪类选择器，用来选择任何未通过验证的 `<form>`、`<fieldset>`、`<input>` 或其他表单元素。

尝试一下
----

该伪类选择器可用于突出显示用户的字段错误。

语法
--

```css
:invalid {
  /\* ... \*/
}
```

示例
--

### 使用颜色标识元素以显示验证结果

#### HTML

```html
<form>
  <div class="field">
    <label for="url\_input">输入一个 URL：</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">输入一个电子邮件地址：</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```

#### CSS

```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

#### 结果

### 展示分阶段的表单部分

在这个例子中，我们使用 `:invalid` 以及后续兄弟选择器（`~`）来分阶段地展示一个表单，使得表单最初只显示第一个完成的项目，当用户完成每一个项目时，表单会显示下一个项目。当整个表单完成后，用户可以提交它。

#### HTML

```html
<form>
  <fieldset>
    <label for="form-name">姓名</label><br />
    <input type="text" name="name" id="form-name" required />
  </fieldset>

  <fieldset>
    <label for="form-email">电子邮件</label><br />
    <input type="email" name="email" id="form-email" required />
  </fieldset>

  <fieldset>
    <label for="form-message">信息</label><br />
    <textarea name="message" id="form-message" required></textarea>
  </fieldset>

  <button type="submit" name="send">提交</button>
</form>
```

#### CSS

```css
/\* 在无效的字段集后隐藏该字段集： \*/
fieldset:invalid ~ fieldset {
  display: none;
}

/\* 在表单无效时，将按钮变暗并禁用它： \*/
form:invalid button {
  opacity: 0.3;
  pointer-events: none;
}

input,
textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: monospace;
  padding: 0.25em 0.5em;
}

button {
  width: 100%;
  border: thin solid darkgrey;
  font-size: 1.25em;
  background-color: darkgrey;
  color: white;
}
```

#### 结果

无障碍考虑
-----

红色通常用于表示输入无效。某些色盲患者将无法确定输入的状态，除非有不依赖颜色传达意义的附加指示器。通常使用描述性文字和（或）图标。

* MDN 理解 WCAG，指南 1.4 的解释 (en-US)
* 理解成功标准 1.4.1 | W3C 理解 WCAG 2.0
注意
--

### 单选按钮

如果一组单选按钮中的任何一个是 `reuqire`，并且未选择该组中的任何按钮，则应用 `:invalid` 伪类到所有按钮上（分组的单选按钮共享 `name` 属性的相同值）。

### Gecko 默认设置

默认情况下，Gecko 不对 `:invalid` 伪类应用样式。但是，对于 `:invalid` 的某些子集情况，它会应用样式（使用 `box-shadow` 属性显示红色“发光”）。此时，应用的是 `:user-invalid` (en-US) 伪类。

规范
--

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

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

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

参见
--

* 其他验证相关的伪类：`:required`、`:optional`、`:valid`
* 相关的 Mozilla 伪类：`:user-invalid` (en-US)、`:-moz-submit-invalid` (en-US)
* 表单数据验证 (en-US)
* 从 JavaScript 中访问有效性状态


scroll-padding-block-end - CSS：层叠样式表

scroll-padding-block-end
========================

**`scroll-padding-block-end`** 属性定义了滚动口的*最优视区*——用于在用户视野中放置内容的目标区域——的块末内边距。作者由此得以排除滚动口被其他内容（如固定定位的工具栏或侧边栏）所遮挡的区域，或在目标元素与滚动口的边之间留出更多余地。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
scroll-padding-block-end: auto;

/\* <length> 值 \*/
scroll-padding-block-end: 10px;
scroll-padding-block-end: 1em;
scroll-padding-block-end: 10%;

/\* 全局值 \*/
scroll-padding-block-end: inherit;
scroll-padding-block-end: initial;
scroll-padding-block-end: revert;
scroll-padding-block-end: revert-layer;
scroll-padding-block-end: unset;
```

### 取值

`<length-percentage>`

滚动口的块末内边距，为有效的长度或百分比。

`auto`

此内边距由用户代理所决定。此值通常为 `0px`，但用户代理可检测非零值是否更合理并另行处理。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding-block-end =
  auto                       |
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动


-webkit-mask-attachment - CSS：层叠样式表

-webkit-mask-attachment
=======================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

如果使用了 `-webkit-mask-image` (en-US), `-webkit-mask-attachment` 将指定蒙版在视口的位置是固定的，还是同包含块一起滚动的。

```css
/\* 关键字 \*/
-webkit-mask-attachment: scroll;
-webkit-mask-attachment: fixed;
-webkit-mask-attachment: local;

/\* 多个值 \*/
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

/\* 全局值 \*/
-webkit-mask-attachment: inherit;
-webkit-mask-attachment: initial;
-webkit-mask-attachment: unset;
```

|  |  |
| --- | --- |
| 初始值 | `scroll` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

语法
--

### 可用的值

scroll

使用 `scroll` 时，蒙版在视口中同包含它的块一起滚动。

fixed

使用 `fixed` 时，蒙版不会同包含它的元素一起滚动，而是在视口中固定不动。

### 使用语法

Error: could not find syntax for this item示例
--

```css
body {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-attachment: fixed;
}
```

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

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

另见
--

`-webkit-mask` (en-US), `-webkit-mask-clip` (en-US), `-webkit-mask-box-image` (en-US), `-webkit-mask-origin` (en-US), `-webkit-mask-image` (en-US), `-webkit-mask-composite` (en-US), `-webkit-mask-repeat` (en-US)


子组合器 - CSS：层叠样式表

子组合器
====

**子组合器**（`>`）被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。

```css
/\* 选择属于“my-things”类的无序列表（ul）的直接子列表元素（li） \*/
ul.my-things > li {
  margin: 2em;
}
```

被第二个选择器匹配的元素必须是被第一个选择器匹配的元素的直接子元素。这比后代组合器更严格，后者匹配所有被第二个选择器匹配的元素，这些元素存在被第一个选择器匹配的祖先元素，无论在 DOM 上有多少“跳”。

语法
--

```css
元素 1 > 元素 2 { 样式声明 }
```

示例
--

### CSS

```css
span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}
```

### HTML

```html
<div>
  <span>
    1 号 span，在 div 中。
    <span>2 号 span，在 div 中的 span 中。</span>
  </span>
</div>
<span>3 号 span，不在 div 中。</span>
```

### 运行结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

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

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

参见
--

* 后代组合器


rotate - CSS：层叠样式表

rotate
======

**`rotate`** 属性允许你单独设置 **`transform`** 的旋转属性。这种映射方式可以让我们更方便的设置我们想要的效果，并且避免了简写形式需要记忆属性顺序的不方便之处。

语法
--

```css
/\* Keyword values \*/
scale: none;

/\* Angle value \*/
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/\* x, y, or z axis name plus angle \*/
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/\* Vector plus angle value \*/
rotate: 1 1 1 90deg;
```

### 值

角度值

An `<angle>` specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a `rotate()` (2D rotation) function.

x, y 或者 z 轴名称加上角度值

The name of the axis you want to rotate the affected element around (`"x"`, "`y`", or "`z"`), plus an `<angle>` specifying the angle to rotate the element through. Equivalent to a `rotateX()`/`rotateY()`/`rotateZ()` (3D rotation) function.

向量加上角度值

Three `<number>`s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an `<angle>` specifying the angle to rotate the element through. Equivalent to a `rotate3d()` (3D rotation) function.

`none`

指定不应用旋转

### 形式语法
```

rotate =
  none                                    |
  <angle>                                 |
  [ x | y | z | <number>{3} ] && <angle>

```

示例
--

### HTML

```html
<div>
  <p class="rotate">Rotation</p>
</div>
```

### CSS

```css
\* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.rotate {
  transition: rotate 1s;
}

div:hover .rotate {
  rotate: 1 -0.5 1 180deg;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a transform |
| Creates stacking context | yes |

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

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


mask - CSS：层叠样式表

mask
====

CSS 属性 **`mask`** 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

```css
/\* Keyword values \*/
mask: none;

/\* Image values \*/
mask: url(mask.png); /\* 使用位图来做遮罩 \*/
mask: url(masks.svg#star); /\* 使用 SVG 图形中的形状来做遮罩 \*/

/\* Combined values \*/
mask: url(masks.svg#star) luminance; /\* Element within SVG graphic used as luminance mask \*/
mask: url(masks.svg#star) 40px 20px; /\* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘 40px，离左边缘 20px \*/
mask: url(masks.svg#star) 0 0/50px 50px; /\* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是 50px \*/
mask: url(masks.svg#star) repeat-x; /\* Element within SVG graphic used as horizontally repeated mask \*/
mask: url(masks.svg#star) stroke-box; /\* Element within SVG graphic used as mask extending to the box enclosed by the stroke \*/
mask: url(masks.svg#star) exclude; /\* Element within SVG graphic used as mask and combined with background using non-overlapping parts \*/

/\* Global values \*/
mask: inherit;
mask: initial;
mask: unset;
```

**备注：** mask 的简写会将 `mask-border` 设为初始值。使用 `mask` 的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证 `mask-border` 也会重新设置为新的效果样式。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `mask-image`: `none`
* `mask-mode`: `match-source`
* `mask-repeat`: `repeat`
* `mask-position` (en-US): `center`
* `mask-clip` (en-US): `border-box`
* `mask-origin` (en-US): `border-box`
* `mask-size` (en-US): `auto`
* `mask-composite` (en-US): `add`
 |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `mask-position` (en-US): refer to size of mask painting area minus size of mask layer image (see the text for `background-position`)
 |
| 计算值 | as each of the properties of the shorthand:* `mask-image`: as specified, but with `url` values made absolute
* `mask-mode`: as specified
* `mask-repeat`: Consists of two keywords, one per dimension
* `mask-position` (en-US): Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
* `mask-clip` (en-US): as specified
* `mask-origin` (en-US): as specified
* `mask-size` (en-US): as specified, but with relative lengths converted into absolute lengths
* `mask-composite` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `mask-image`: discrete
* `mask-mode`: discrete
* `mask-repeat`: discrete
* `mask-position` (en-US): a repeatable list
* `mask-clip` (en-US): discrete
* `mask-origin` (en-US): discrete
* `mask-size` (en-US): a repeatable list
* `mask-composite` (en-US): discrete
 |
| Creates stacking context | yes |

Syntax
------

### Values

`<mask-reference>`

设置遮罩图片的路径。详见 `mask-image`。

`<masking-mode>`

设置遮罩图片的模式。详见 `mask-mode`。

`<position>`

设置遮罩图片的位置。详见 `mask-position` (en-US)。

`<bg-size>`

设置遮罩的大小。详见 `mask-size` (en-US)。

`<repeat-style>`

设置遮罩图片的重复性。详见 `mask-repeat`。

`<geometry-box>`

如果只有一个 <geometry-box> 值被赋予，他将会设置 `mask-origin` (en-US) 和 `mask-clip` (en-US)。如果两个 <geometry-box> 值显示，第一个值代表 `mask-origin` (en-US) 第二个值代表 `mask-clip` (en-US)。

`<geometry-box> | no-clip`

设置区域，会被遮罩图片影响。详见 `mask-clip` (en-US)。

`<compositing-operator>`

设置遮罩图层的组合操作。详见 `mask-composite` (en-US)。

### 正式语法
```

mask =
  <mask-layer>#

<mask-layer> =
  <mask-reference>              ||
  <position> [ / <bg-size> ]?   ||
  <repeat-style>                ||
  <geometry-box>                ||
  [ <geometry-box> | no-clip ]  ||
  <compositing-operator>        ||
  <masking-mode>

<mask-reference> =
  none           |
  <image>        |
  <mask-source>

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

<geometry-box> =
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box

<compositing-operator> =
  add        |
  subtract   |
  intersect  |
  exclude

<masking-mode> =
  alpha         |
  luminance     |
  match-source

<image> =
  <url>       |
  <gradient>

<mask-source> =
  <url>

<length-percentage> =
  <length>      |
  <percentage>

<shape-box> =
  <visual-box>  |
  margin-box

<url> =
  <url()>  |
  <src()>

<visual-box> =
  content-box  |
  padding-box  |
  border-box

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

例子
--

```css
.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
```

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask |

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

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

参见
--

* `clip-path`, `filter`
* CSS Shapes, clipping and masking – and how to use them
* Applying SVG effects to HTML content (en-US)
* SVG


::backdrop - CSS：层叠样式表

::backdrop
==========

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

**`::backdrop`** CSS 伪元素 是在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）。

```css
/\* Backdrop 只有通过 dialog.showModal() 打开对话框时会被显示 \*/
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}
```

所有处于全屏模式下的元素都被放在顶级渲染层中的一个后进先出（LIFO）栈里。在视区内容被绘制在屏幕上之前，这一特殊的渲染层总是最后被渲染（因此是最上层）。当一个元素在这个栈的栈顶时，`::backdrop` 伪元素允许我们遮盖，装饰或完全隐藏该元素的下层文档。

`::backdrop` 不继承任何元素，同时也不被任何元素继承。没有规定什么属性不能应用于该伪元素。

语法
--
```

::backdrop
```

示例
--

在示例中，backdrop 样式用于将视频全屏显示时的背景颜色改为蓝灰色而不是大多数浏览器默认的黑色。

```css
video::backdrop {
  background-color: #448;
}
```

效果如下：

![](/zh-CN/docs/Web/CSS/::backdrop/bbb-backdrop.png)

注意当 backdrop 可见时，上下两部分的暗蓝灰色的信箱效果。这个区域一般是黑色的，但上面的 CSS 语句修改了它的外观。

You can see this example in action or view or remix the code on Glitch.

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

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

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

参见
--

* `:fullscreen` pseudo-class
* `<dialog>` HTML element
* Fullscreen API


<color> - CSS：层叠样式表

<color>
=======

CSS 数据类型 **`<color>`** 表示一个颜色。颜色可以包括一个 alpha 通道*透明度值*，来表明颜色如何与背景色混合（composite）。

**备注：** 尽管 CSS 颜色值（`<color>`）被精确定义，但在不同的输出设备上仍然有可能表现不一致（甚至区别很大）。这是因为大多数设备不是经校准的，而且有些浏览器不支持输出设备的色彩配置（color profile）。

语法
--

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

/\* 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)

/\* Oklch（亮度、色度、色相） \*/
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)
```

一个 `<color>` 值可以以如下方式定义：

* 通过关键字：`<named-color>`（例如 `blue` 和 `pink`）、`<system-color>` 和 `currentcolor`.
* 通过十六进制标记：`<hex-color>`（例如 `#ff0000`）。
* 通过使用函数标记的颜色空间的参数：
    + sRGB 颜色空间：`hsl()`、`hwb()` (en-US)、`rgb()`；
    + CIELAB 颜色空间：`lab()`、`lch()`；
    + Oklab 颜色空间：`oklab()`、`oklch()`；
    + 其他颜色空间：`color()` (en-US)。
* 通过混合两个颜色：`color-mix()`。
### currentcolor 关键字

`currentcolor` 关键字表示元素的 `color` 属性的值。这可以在默认情况下不接收 `color` 值的属性上使用 `color` 值。

如果 `currentcolor` 用于 `color` 属性的值，那么会给元素继承 `color` 属性的值。

```html
<div style="color: blue; border: 1px dashed currentcolor;">
  这个文本的颜色是蓝色。
  <div style="background: currentcolor; height:9px;"></div>
  这个块的边框也是蓝色。
</div>
```

### 缺失颜色成分

每个 CSS 颜色函数的成分，除了使用旧版的逗号分隔语法的，都可以指定关键字 `none` 表示一个缺失的成分。

清晰地指定缺失的成分可用于颜色插值，可用于需要插值一些颜色成分但不插值其他颜色成分时。对于所有其他的目的，缺失的成分会相当于相应单位的零值：`0`、`0%` 或 `0deg`。例如，下面的颜色在不插值时是等价的：

```css
/\* 这两个是等价的 \*/
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/\* 这两个是等价的 \*/
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);
```

插值
--

颜色插值会发生在渐变、过渡和动画中。

当对 `<color>` 值进行插值时，它们首先会转换成指定的颜色空间，然后颜色成分的计算值会进行线性插值，插值速度由过渡和动画中的缓动函数决定。插值颜色空间默认为 Oklab，但是可以在一些与颜色相关的函数标记中通过 `<color-interpolation-method>` 覆盖。

### 带有缺失成分时的插值

#### 在同一空间内插值颜色

对完全在插值颜色空间中的颜色进行插值时，一个颜色中缺失的成分将替换为另一种颜色中同一成分的现有值。例如，以下两个表达式是等效的：

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

**备注：** 如果两个颜色都缺失这个成分，那么这个成分在插值后也是缺失的。

#### 在不同空间内插值：相似成分

如果任何要插值的颜色不在插值颜色空间中，则其缺失的成分将根据同一类的**相似成分**转换为转换后的颜色，如下表所述：

| 类别 | 相似成分 |
| --- | --- |
| 红色 | `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. 将两种颜色转换为插值颜色空间：

```css
oklch(83.915% 0.0902 0.28)
oklch(63.612% 0.1522 78.748)
```

3. 如果转换后颜色的任何成分与相应原始颜色中的缺失成分相似，则将其重置为缺失的成分：

```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 (en-US) 强烈建议不要将颜色作为传递特定消息、活动或结果的唯一方式。参见颜色和颜色对比度 (en-US)以了解更多信息。

形式语法
----
```

<color> =
  <absolute-color-base>  |
  currentcolor           |
  <system-color>

<absolute-color-base> =
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent

<absolute-color-function> =
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>

<rgb()> =
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>

<rgba()> =
  <legacy-rgba-syntax>  |
  <modern-rgba-syntax>

<hsl()> =
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>

<hsla()> =
  <legacy-hsla-syntax>  |
  <modern-hsla-syntax>

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

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

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

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

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

<color()> =
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<legacy-rgb-syntax> =
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )

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

<legacy-rgba-syntax> =
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )

<modern-rgba-syntax> =
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<legacy-hsl-syntax> =
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )

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

<legacy-hsla-syntax> =
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )

<modern-hsla-syntax> =
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
  <number>  |
  <angle>

<alpha-value> =
  <number>      |
  <percentage>

<colorspace-params> =
  <predefined-rgb-params>  |
  <xyz-params>

<predefined-rgb-params> =
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> =
  <xyz-space> [ <number> | <percentage> | none ]{3}

<predefined-rgb> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020

<xyz-space> =
  xyz      |
  xyz-d50  |
  xyz-d65

```

示例
--

### 颜色值检测器

在这个例子中，我们提供了一个 `<div>` 和一个文本输入框。往文本框内输入有效的颜色会使 `<div>` 接受这个颜色，从而可能测试我们的颜色值。

#### HTML

```html
<div></div>
<hr />
<label for="color">输入有效的颜色值：</label>
<input type="text" id="color" />
```

```
div {
  height: 200px;
  width: 200px;
}
```

```
const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "无效的颜色值";
  }
});
```

#### 结果

### 完全饱和的 sRGB 颜色

此示例显示 sRGB 颜色空间中完全饱和的 sRGB 颜色。

#### HTML

```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}
```

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

#### 结果

### 不同深浅的红色

此示例显示 sRGB 颜色空间中不同深浅的红色。

#### HTML

```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}
```

```css
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;
}
```

#### 结果

### 不同饱和度的红色

此示例显示 sRGB 颜色空间中不同饱和度的红色。

#### HTML

```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}
```

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

#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # color-syntax |

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

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

参见
--

* `opacity`：在元素级别上设备透明度的属性
* `<hue>` (en-US)：表示一个颜色的色相角度的数据类型
* `color`、`background-color`、`border-color`、`box-shadow`、`outline-color`、`text-shadow`：使用 `<color>` 的常见属性
* 使用 CSS 给元素应用颜色
* MDN 博客中的文章 CSS 颜色中的新功能、渐变和色调（级别 4）（2023 年）


border-block-end - CSS：层叠样式表

border-block-end
================

CSS 属性 **`border-block-end`** 为简写属性，用于在样式表中的某处同时设置逻辑块末边框的各属性值。

尝试一下
----

属性构成
----

此属性为下列 CSS 属性的简写属性：

* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
语法
--

```css
border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;

/\* 全局值 \*/
border-block-end: inherit;
border-block-end: initial;
border-block-end: revert;
border-block-end: revert-layer;
border-block-end: unset;
```

`border-block-end` 可用于设置 `border-block-end-width`、`border-block-end-style` 和 `border-block-end-color` 中至少一个属性的值。此属性所对应的实体边框取决于元素的书写模式、行内方向和文本朝向。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top`、`border-right`、`border-bottom` 或 `border-left` 属性。

与此相关的属性有 `border-block-start`、`border-inline-start` 和 `border-inline-end`，这些属性定义了元素的其他边框。

### 取值

`border-block-end` 属性可用下列值中的至少一个指定，次序任意：

`<'border-width'>`

边框宽度。见 `border-width`。

`<'border-style'>`

边框线型。见 `border-style`。

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-top-width`: `medium`
* `border-top-style`: `none`
* `border-top-color`: `currentcolor`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-top-style`: as specified
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-block-end-color`: by computed value type
* `border-block-end-style`: discrete
* `border-block-end-width`: by computed value type
 |

形式语法
----
```

border-block-end =
  <line-width>  ||
  <line-style>  ||
  <color>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

示例
--

### 竖排文本的边框

#### HTML

```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block-end: 5px dashed blue;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-shorthands |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top`、`border-right`、`border-bottom` 或 `border-left`
* `writing-mode`、`direction`、`text-orientation`


scroll-margin-top - CSS：层叠样式表

scroll-margin-top
=================

**`scroll-margin-top`** 属性定义了滚动吸附区域的上外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
scroll-margin-top: 10px;
scroll-margin-top: 1em;

/\* 全局值 \*/
scroll-margin-top: inherit;
scroll-margin-top: initial;
scroll-margin-top: revert;
scroll-margin-top: revert-layer;
scroll-margin-top: unset;
```

### 取值

`<length>`

滚动容器的上外边距。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

scroll-margin-top =
  <length>

```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动


@supports - CSS：层叠样式表

@supports
=========

**`@supports`** CSS at-rule 你可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为*特性查询*。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。

```css
@supports (display: grid) {
  div {
    display: grid;
  }
}
```

```css
@supports not (display: grid) {
  div {
    float: right;
  }
}
```

在 JavaScript 中，可以通过 CSS 对象模型接口 `CSSSupportsRule` 来访问 `@supports`。

语法
--

`@supports` at-rule 由一组样式声明和一条*支持条件*构成。支持条件由一条或多条使用 逻辑与（`and`）、逻辑或（`or`）、逻辑非（`not`）结合的名称 - 值对（name-value pair）组成。可以使用圆括号调整操作符的优先级。

### 声明语法

最基本的支持条件就是 CSS 声明，也就是一个 CSS 属性后跟一个值，中间用冒号分开。如果 `transform-origin` 的实现语法认为 `5% 5%` 是有效的值，则下面的表达式会返回 true。

```css
@supports (transform-origin: 5% 5%) {
}
```

### 函数语法

第二种基本支持条件是支持函数，几乎所有浏览器都支持这种语法，但函数本身仍在标准化进程中。

#### `selector()`
实验性

测试浏览器是否支持经过测试的选择器语法。如果浏览器支持子组合器，则以下示例返回 true：

```css
@supports selector(A > B) {
}
```

### `not` 操作符

将 `not` 操作符放在任何表达式之前就能否定一条表达式。如果 `transform-origin` 的实现语法认为 `10em 10em 10em` 是**无效**的，则下面的表达式会返回 true。

```css
@supports not (transform-origin: 10em 10em 10em) {
}
```

和其他操作符一样，`not` 操作符可以应用在任意复杂度的表达式上。下面的几个例子中都是合法的表达式：

```css
@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}
```

**备注：** 如果 `not` 操作符位于表达式的最外层，则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用，比如 `and` 和 `or`，则需要外面的圆括号。

### `and` 操作符

`and` 操作符用来将两个原始的表达式做逻辑与后生成一个新的表达式，如果两个原始表达式的值**都为真**，则生成的表达式也为真。在下例中，当且仅当两个原始表达式同时为真时，整个表达式才为真：

```css
@supports (display: table-cell) and (display: list-item) {
}
```

可以将多个合取词并置而不需要更多的括号。以下两者都是等效的：

```css
@supports (display: table-cell) and (display: list-item) and (display: run-in) {
}
@supports (display: table-cell) and ((display: list-item) and (display: run-in)) {
}
```

### `or` 操作符

`or` 操作符用来将两个原始的表达式做逻辑或后生成一个新的表达式，如果两个原始表达式的值**有一个或者都**为真，则生成的表达式也为真。在下例中，当两个原始表达式中至少有一个为真时，整个表达式才为真：

```css
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}
```

可以将多个析取词并置而不需要更多的括号。以下两者都是等效的：

```css
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
 (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

@supports (transform-style: preserve-3d) or
 (
 (-moz-transform-style: preserve-3d) or
 (
 (-o-transform-style: preserve-3d) or
 (-webkit-transform-style: preserve-3d)
 )
 ) {
}
```

**备注：** 在使用 `and` 和 `or` 操作符时，如果是为了定义多个表达式的执行顺序，则必须使用圆括号。如果不这样做的话，该条件就是无效的，会导致整个 at-rule 失效。

### 形式化语法
```

@supports =
  @supports <supports-condition> { <rule-list> }

<supports-condition> =
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]\*  |
  <supports-in-parens> [ or <supports-in-parens> ]\*

<supports-in-parens> =
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>

<supports-feature> =
  <supports-decl>

<general-enclosed> =
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]

<supports-decl> =
  ( <declaration> )

```

示例
--

### 检测是否支持指定的 CSS 属性

```css
@supports (animation-name: test) {
  /\* 如果支持不带前缀的 animation-name，则下面指定的 CSS 会生效 \*/
  @keyframes {
    /\* @supports 是一个 CSS 条件组 at-rule，它可以包含其他相关的 at-rules \*/
  }
}
```

### 检测是否支持指定的 CSS 属性或者其带前缀版本

```css
@supports (
 (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px)
 or (-ms-perspective: 10px) or (-o-perspective: 10px)
) {
  /\* 如果支持不带前缀以及带前缀的 perspective 属性，则下面指定的 CSS 会生效 \*/
}
```

### 检测是否不支持指定的 CSS 属性

```css
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  /\* 这里的 CSS 代码用来模拟 text-align-last:justify \*/
}
```

### 测试是否支持自定义属性

```css
@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}
```

### 测试是否支持选择器 (eg. `:is()`)

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

```css
/\* 这条 CSS 规则在不支持 is:() 的浏览器中无效 \*/
:is(ul, ol) > li {
  /\* 支持 :is(...) 选择器时，这里的 CSS 生效 \*/
}

@supports not selector(:is(a, b)) {
  /\* 不支持 :is() 时的备选方案 \*/
  ul > li,
 ol > li {
    /\* 以上给不支持 :is(...) 的浏览器展开了 CSS 选择器规则 \*/
  }
}

@supports selector(:nth-child(1n of a, b)) {
  /\* 这条规则需要内嵌在 @supports 块内。
 否则该规则在支持 :nth-child(…) 但不支持其内的 `of` 参数的浏览器中，
 只有部分生效 \*/
  :is(:nth-child(1n of ul, ol) a, details > summary) {
    /\* 当:is(...) 选择器以及 :nth-child(…) 的 `of` 参数都支持时，
 这里的 CSS 会生效 \*/
  }
}
```

规范
--

| Specification |
| --- |
| CSS Conditional Rules Module Level 4 # at-supports-ext |
| CSS Conditional Rules Module Level 3 # at-supports |

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

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

参见
--

* 使用特性查询
* The CSSOM class `CSSSupportsRule`, and the `CSS.supports()` method that allows the same check to be performed via JavaScript.


overflow-inline - CSS：层叠样式表

overflow-inline
===============

CSS 属性 **`overflow-inline`** 设置了当内容溢出盒的行首和行末侧时所显示的内容。可以不显示，或者显示滚动条或溢出内容。

**备注：**`overflow-inline` 属性根据文档的书写模式对应于 `overflow-y` 或 `overflow-x`。

语法
--

```css
/\* 关键词值 \*/
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: scroll;
overflow-inline: auto;

/\* 全局值 \*/
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;
```

`overflow-inline` 属性可指定为下列关键词之一。

### 取值

`visible`

不裁剪内容且可在内边距盒的行首和行末侧外渲染内容。

`hidden`

若内边距盒在行向尺度上无法容纳内容则裁剪内容。不提供滚动条。

`scroll`

若内边距盒在行向尺度上无法容纳内容则裁剪内容。无论内容是否被裁剪，浏览器均显示滚动条。（由此可阻止滚动条在内容变化时显示或消失。）打印机仍可能打印溢出内容。

`auto`

取决于用户代理。若内边距盒可以容纳内容，则与 `visible` 表现相同，但仍建立新的块格式化上下文。若内容溢出则桌面浏览器提供滚动条。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | Block-containers, flex containers, and grid containers |
| 是否是继承属性 | 否 |
| 计算值 | as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip |
| Animation type | discrete |

形式语法
----
```

overflow-inline =
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

```

示例
--

### 设置行向溢出行为

#### HTML

```html
<ul>
  <li>
    <code>overflow-inline:hidden</code>——在盒外隐藏文本
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-block:scroll</code>——总是添加滚动条
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-block:visible</code>——按需在盒外显示文本
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-block:auto</code>——在多数浏览器上等价于 <code>scroll</code>
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>
```

#### CSS

```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-control |

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

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

参见
--

* 相关 CSS 属性：`text-overflow`、`white-space`、`overflow`、`overflow-block`、`overflow-x`、`overflow-y`、`clip`、`display`
* CSS 逻辑属性
* 书写模式


flex-flow - CSS：层叠样式表

flex-flow
=========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
概述
--

CSS **`flex-flow`** 属性是 flex-direction 和 flex-wrap 的简写。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| 适用元素 | flex containers |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `flex-direction`: as specified
* `flex-wrap`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `flex-direction`: discrete
* `flex-wrap`: discrete
 |

更多信息参见 使用 CSS 弹性盒 (en-US)

语法
--

Formal syntax:
```

flex-flow =
  <'flex-direction'>  ||
  <'flex-wrap'>

```

### 取值

`更多取值信息请查看` `flex-direction` (en-US) 和 `flex-wrap` (en-US)

示例
--

```css
element {
  /\* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines \*/
  flex-flow: column-reverse wrap;
}
```

规范
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |

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

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

另参见
---

* 使用 CSS 弹性盒子 (en-US)


empty-cells - CSS：层叠样式表

empty-cells
===========

CSS 中 **`empty-cells`** 属性定义了用户端 user agent 应该怎么来渲染表格 `<table>` 中没有可见内容的单元格的边框和背景。

```css
/\* Keyword values \*/
empty-cells: show;
empty-cells: hide;

/\* Global values \*/
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;
```

只有当 `border-collapse` 属性值是 `separate` 时，才会生效。

|  |  |
| --- | --- |
| 初始值 | `show` |
| 适用元素 | table-cell elements |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

语法
--

`empty-cells` 的属性值必须是以下取值中的一个。

### 取值

`show`

边框和背景正常渲染。与普通元素一样。

`hide`

边框和背景被隐藏。

### 语法形式
```

empty-cells =
  show  |
  hide

```

示例
--

### HTML

```html
<table class="table\_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table\_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
```

### CSS

```css
.table\_1 {
  empty-cells: show;
}

.table\_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}
```

### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # empty-cells |

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

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


font-feature-settings - CSS：层叠样式表

font-feature-settings
=====================

**`font-feature-settings`** 属性用于控制 OpenType 字体中的高级印刷功能。

尝试一下
----

语法
--

```css
/\* 默认设置 \*/
font-feature-settings: normal;

/\* 设置 OpenType 功能标签的值 \*/
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

/\* 全局值 \*/
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;
```

**备注：** Web 开发者应该尽可能的使用类似 `font-variant` 这样的短标记属性或者相关的速记标识属性等，类似 `font-variant-ligatures`, `font-variant-caps`, `font-variant-east-asian` (en-US), `font-variant-alternates`, `font-variant-numeric` or `font-variant-position`.

该属性是一个比较偏底层的功能接口，用于解决由于没有其他方法去访问和设置 OpenType 字体某些特性而无法解决一些特殊功能需求。

特别需要注意的是，该 CSS 属性不应该用来开启大写字母转换。

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

### 值

`normal`

文本使用默认设置进行布局。

`<feature-tag-value>`

 在呈现文本时，OpenType 要素标记值的列表被传递到文本布局引擎以启用或禁用字体特征。标签始终是 4 个 ASCII 字符的 `<string>` 。如果是 U + 20 - U + 7E 代码点范围以外的字符或字符个数不对，则整个属性无效。
 值是一个正整数。两个关键字 on 和 off 分别是 1 和 0 的同义词。如果未设置任何值，则默认值为 1。对于非布尔型 OpenType 功能（例如，文体替代 stylistic alternates），该值意味着要选择特定的字形；对于布尔值，它是一个开关。

### 形式语法
```

font-feature-settings =
  normal                |
  <feature-tag-value>#

<feature-tag-value> =
  <opentype-tag> [ <integer [0,∞]> | on | off ]?

<opentype-tag> =
  <string>

```

实例
--

```css
/\* use small-cap alternate glyphs \*/
.smallcaps {
  font-feature-settings: "smcp" on;
}

/\* convert both upper and lowercase to small caps (affects punctuation also) \*/
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/\* enable historical forms \*/
.hist {
  font-feature-settings: "hist";
}

/\* disable common ligatures, usually on by default \*/
.noligs {
  font-feature-settings: "liga" 0;
}

/\* enable tabular (monospaced) figures \*/
td.tabular {
  font-feature-settings: "tnum";
}

/\* enable automatic fractions \*/
.fractions {
  font-feature-settings: "frac";
}

/\* use the second available swash character \*/
.swash {
  font-feature-settings: "swsh" 2;
}

/\* enable stylistic set 7 \*/
.fancystyle {
  font-family: Gabriola; /\* available on Windows 7, and on Mac OS \*/
  font-feature-settings: "ss07";
}
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-settings-prop |

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

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

其他参考
----

* FontFont OpenType User Guide (pdf)
* OpenType Feature Tags 列表
* Using the whole font ( -moz 语法是旧的。在 Gecko 上，使用-ms 语法，但使用-moz ).


padding-inline-start - CSS：层叠样式表

padding-inline-start
====================

CSS 属性 **`padding-inline-start`** 定义了元素的逻辑行首内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
padding-inline-start: 10px; /\* 绝对长度 \*/
padding-inline-start: 1em; /\* 相对于文本尺寸的长度 \*/

/\* <percentage> 值 \*/
padding-inline-start: 5%; /\* 相对于包含区块宽度的内边距 \*/

/\* 全局值 \*/
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: revert;
padding-inline-start: revert-layer;
padding-inline-start: unset;
```

### 取值

`<length>`

以固定值指定的内边距尺寸。必须非负。

`<percentage>`

以百分比指定的内边距尺寸，参照包含区块的行向尺寸（即横向语言中的*宽度*，由 `writing-mode` 所定义）。必须非负。

描述
--

虽然规范定义 `padding-inline-start` 属性的取值与 `padding-top` 属性相同，但是此属性所对应的实体属性取决于 `writing-mode`、`direction` 和 `text-orientation` 所设置的值。因此这一属性可能对应于 `padding-bottom`、`padding-right` 或 `padding-left`。

与此相关的属性有 `padding-block-start`、`padding-block-end` 和 `padding-inline-end`，这些属性定义了元素的其他内边距。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | as `length` |
| Animation type | a length |

形式语法
----
```

padding-inline-start =
  <'padding-top'>

```

示例
--

### 为竖排文本设置行首内边距

#### HTML

```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-inline-start: 20px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`padding-top`、`padding-right`、`padding-bottom` 和 `padding-left`
* `writing-mode`、`direction`、`text-orientation`


margin-inline-start - CSS：层叠样式表

margin-inline-start
===================

**`margin-inline-start`** CSS 属性定义元素的逻辑行首外边距，根据元素的书写模式、行内方向和文本朝向映射为实体的外边距。它根据 `writing-mode`、`direction` 和 `text-orientation` 属性的值对应于 `margin-top`、`margin-right`、`margin-bottom` 或 `margin-left` 属性。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
margin-inline-start: 10px; /\* 绝对长度 \*/
margin-inline-start: 1em; /\* 相对于文字大小 \*/
margin-inline-start: 5%; /\* 相对于最近区块容器的宽度 \*/

/\* 关键词值 \*/
margin-inline-start: auto;

/\* 全局值 \*/
margin-inline-start: inherit;
margin-inline-start: initial;
margin-inline-start: revert;
margin-inline-start: unset;
```

这个属性与 `margin-block-start`、`margin-block-end` 和 `margin-inline-end` 属性相关，它们均定义元素的其他边距。

### 值

`margin-inline-start` 属性接受与 `margin-left` 属性相同的值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | same as `margin` |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

形式语法
----
```

margin-inline-start =
  <'margin-top'>

```

示例
--

### 设置逻辑行首外边距

#### HTML

```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-start: 20px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* `margin-inline-end`
* 对应的实体属性：`margin-top`、`margin-right`、`margin-bottom` 和 `margin-left`
* `writing-mode`、`direction`、`text-orientation`


text-overflow - CSS：层叠样式表

text-overflow
=============

**`text-overflow`** CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“`…`”）或显示一个自定义字符串。

尝试一下
----

`text-overflow` 属性并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，你需要在元素上添加几个额外的属性：`overflow` 和 `white-space`。例如：

```css
overflow: hidden;
white-space: nowrap;
```

`text-overflow` 属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素*内联*（inline）方向一致（举个反例：文本无法在盒子的下方溢出）。

语法
--

`text-overflow` 属性可能被赋予一个或者两个值。如果赋一个值，指的行末溢出行为（从左至右的文本右末端，从右至左的文本左末端）。如果赋两个值，第一个值指定行左端溢出行为，第二个值指定行右端溢出行为。

```css
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/\* Global values \*/
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
```

* 关键字之一：`clip`、`ellipsis`、`fade`
* 函数 `fade()`：传入 `<length>` 或 `<percentage>` 来控制淡出距离
* 一个字符串 `<string>`。
### 值

`clip`

默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。如果你的目标浏览器支持 `text-overflow: ''`，为了能在两个单词过渡处截断，你可以使用一个空字符串值（`''`）作为 `text-overflow` 属性的值。

`ellipsis`

这个关键字会用一个省略号（`'…'`、`U+2026 HORIZONTAL ELLIPSIS`）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。

`<string>`
实验性

`<string>` 用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小以至于连字符串本身都容纳不下，那么这个字符串也会被截断。

`fade`
实验性

这个关键字将会截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。

`fade( <length> | <percentage> )`
实验性

 这个函数将会截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。
 参数决定淡出特效的距离。`<percentage>` 以行宽而定。小于 `0` 的值视为 0。大于行宽的值视为行宽。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `clip` |
| 适用元素 | block container elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

text-overflow =
  clip      |
  ellipsis

```

示例
--

### 单值语法

这个示例呈现了将不同的 `text-overflow` 值应用到一个段落上面，在从左到右的文本和从右到左的文本上的效果。

#### HTML

```html
<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>
```

#### CSS

```css
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /\* Both of the following are required for text-overflow \*/
  white-space: nowrap;
  overflow: hidden;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  text-overflow: " [..]";
}

body {
  display: flex;
  justify-content: space-around;
}

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}
```

#### 结果

### 双值语法

这个示例展现了 `text-overflow` 的双值语法，你可以为文本的开头和末尾定义不同的溢出行为。为了呈现这个效果，我们不得不使行滚动，这样行开头也被隐藏了起来。

#### HTML

```html
<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
```

#### CSS

```css
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /\* Both of the following are required for text-overflow \*/
  white-space: nowrap;
  overflow: scroll;
}

.overflow-clip-clip {
  text-overflow: clip clip;
}

.overflow-clip-ellipsis {
  text-overflow: clip ellipsis;
}

.overflow-ellipsis-ellipsis {
  text-overflow: ellipsis ellipsis;
}

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}
```

#### JavaScript

```js
// Scroll each paragraph so the start is also hidden
const paras = document.querySelectorAll("p");
for (let para of paras) {
  para.scroll(100, 0);
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 3 # text-overflow |

此接口的较早版本曾经被纳入*候选推荐标准（Candidate Recommendation）*名单。但由于需要对某些尚未列出的风险点进行移除工作，因此该规范已降级到*工作草案*。所以说浏览器无前缀地实现此属性，但其却不在候选推荐标准阶段。

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

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

参见
--

* 相关 CSS 属性：`overflow`、`white-space`
* 控制换行的 CSS 属性：`overflow-wrap`、`word-break`


list-style-type - CSS：层叠样式表

list-style-type
===============

CSS 属性 `list-style-type` 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。

尝试一下
----

The color (en-US) of the marker will be the same as the computed color of the element it applies to.

只有几个元素 (`<li>` 和 `<summary>`) 的默认值为 `display: list-item`。但是， `list-style-type` 属性可以应用在任何 `display` 的值为 `list-item` 的元素上。此外，由于这个属性是可继承的，它可以设置在父元素上 (通常是 `<ol>` 或 `<ul>`) 以便应用于所有子元素 (`<li>`)。

语法
--

```css
/\* Partial list of types \*/
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/\* <string> value \*/
list-style-type: "-";

/\* Identifier matching an @counter-style rule \*/
list-style-type: custom-counter-style;

/\* Keyword value \*/
list-style-type: none;

/\* Global values \*/
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;
```

list-style-type 的属性值可以是以下任意一项：

* a `<custom-ident>` value
* a `symbols()` value
* a `<string>` value
* the keyword `none`.
### 取值

* `<custom-ident>`
    + : A identifier matching the value of a `@counter-style` or one of the predefined styles:
* `symbols()` (en-US)
    + : Defines an anonymous style of the list.
* `<string>`
    + : The specified string will be used as the item's marker.
* `none`
    + : 不显示列表项的标记。
* `disc`
    + : 实心圆点 (默认值)
* `circle`
    + : 空心圆点
* `square`
    + : 实心方块
* `decimal`
    + : 十进制阿拉伯数字
* `cjk-decimal`
实验性

    + : 中日韩十进制数
* `decimal-leading-zero`
    + : Decimal numbers, padded by initial zeros.
* `lower-roman`
    + : Lowercase roman numerals
* `upper-roman`
    + : Uppercase roman numerals
* `lower-greek`
    + : Lowercase classical Greek
        - alpha, beta, gamma…
* `lower-alpha`, `lower-latin`
    + : Lowercase ASCII letters
* `upper-alpha`, `upper-latin`
    + : Uppercase ASCII letters
* `armenian`
    + : Traditional Armenian numbering
* `georgian`
    + : Traditional Georgian numbering
* `hebrew`
实验性

    + : Traditional Hebrew numbering
* `ethiopic-numeric`
实验性
* `hiragana`
实验性

    + : Dictionary-order hiragana lettering.
* `katakana`
实验性

    + : Dictionary-order katakana lettering
* `hiragana-iroha`
实验性

    + : Iroha is the old japanese ordering of syllabs.
* `katakana-iroha`
实验性

    + : Iroha is the old japanese ordering of syllabs.
* `japanese-informal`
实验性

    + : Japanese informal numbering
* `japanese-formal`
实验性

    + : Japanese formal numbering to be used in legal or financial document. The kanjis are designed so that they can't be modified to look like another correct one
* `korean-hangul-formal`
实验性

    + : Korean hangul numbering.
* `korean-hanja-informal`
实验性

    + : Korean hanja numbering.
* `korean-hanja-formal`
实验性

    + : Formal Korean Han numberging.
* `simp-chinese-informal`
实验性

    + : Simplified Chinese informal numberging.
* `cjk-ideographic`
实验性

    + : Identical to `simp-chinese-informal`
* `simp-chinese-formal`
实验性

    + : Simplified Chinese formal numberging.
* `trad-chinese-informal`
实验性

    + : Traditional Chinese informal numberging.
* `trad-chinese-formal`
实验性

    + : Traditional Chinese formal numberging.
### 非标准扩展

Extended set of values provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers supports which extension.

* `arabic-indic`、`-moz-arabic-indic`
* `bengali`、`-moz-bengali`
* `cjk-earthly-branch`、`-moz-cjk-earthly-branch`
* `cjk-heavenly-stem`、`-moz-cjk-heavenly-stem`
* `devanagari`、`-moz-devanagari`
* `-moz-ethiopic-halehame`
* `-moz-ethiopic-halehame-am`
* `ethiopic-halehame-ti-er`、`-moz-ethiopic-halehame-ti-er`
* `ethiopic-halehame-ti-et`、`-moz-ethiopic-halehame-ti-et`
* `gujarati`、`-moz-gujarati`
* `gurmukhi`、`-moz-gurmukhi`
* `hangul`、`-moz-hangul`
* `hangul-consonant`、`-moz-hangul-consonant`
* `kannada`、`-moz-kannada`
* `khmer`、`-moz-khmer`
* `lao`、`-moz-lao`
* `malayalam`、`-moz-malayalam`
* `myanmar`、`-moz-myanmar`
* `oriya`、`-moz-oriya`
* `persian`、`-moz-persian`
* `-moz-tamil`
* `telugu`、`-moz-telugu`
* `thai`、`-moz-thai`
* `urdu`、`-moz-urdu`
### Formal syntax
```

list-style-type =
  <counter-style>  |
  <string>         |
  none

<counter-style> =
  <counter-style-name>  |
  <symbols()>

<symbols()> =
  symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

例子
--

### CSS

```css
ol.normal {
  list-style-type: upper-alpha;
}

/\* or use the shortcut "list-style": \*/
ol.shortcut {
  list-style: upper-alpha;
}
```

### HTML

```html
<ol class="normal">
  List 1
  <li>Hello</li>
  <li>World</li>
  <li>What's up?</li>
</ol>

<ol class="shortcut">
  List 2
  <li>Looks</li>
  <li>Like</li>
  <li>The</li>
  <li>Same</li>
</ol>
```

### Result

Accessibility concerns
----------------------

The VoiceOver screen reader has an issue where unordered lists with a `list-style-type`value of `none` applied to them will not be announced as a list. To address this, add a zero-width space as pseudo content before each list item to ensure the list is announced properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.

```css
ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}
```

* VoiceOver and list-style-type: none – Unfettered Thoughts
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
注释
--

* Some types require a suitable font installed to display as expected.
* The `cjk-ideographic` is identical to `trad-chinese-informal`; it exists for legacy reasons.
规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # text-markers |
| CSS Counter Styles Level 3 # extending-css2 |

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

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

参见
--

* `list-style`, `list-style-image`, `list-style-position`


translate - CSS：层叠样式表

translate
=========

CSS 属性 **`translate`** 允许你单独声明平移变换，并独立于 `transform` 属性。这在一些典型的用户界面上更好用，而且这样就无需在 `transform` 中声明该函数并记住转换函数的确切顺序了。

语法
--

```css
/\* Keyword values \*/
translate: none;

/\* Single values \*/
translate: 100px;
translate: 50%;

/\* Two values \*/
translate: 100px 200px;
translate: 50% 105px;

/\* Three values \*/
translate: 50% 105px 5rem;
```

### 值

单个长度/百分比值

一个长度值或百分比，表示二维平移，与声明了 X 轴和 Y 轴的平移一样（此时省略的第二个值默认为 0）。等同于在 `translate()` 函数（2D 平移）中指定单个值。

两个长度/百分比值

两个长度值或百分比表示在二维上分别按照指定 X 轴和 Y 轴的值进行的平移。等同于在 `translate()` 函数（2D 平移）中函数指定两个值。

三个长度/百分比值

三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于`translate3d()` 函数（3D 平移）。

`none`

表示不应用平移效果。

### 形式语法
```

translate =
  none                                                |
  <length-percentage> [ <length-percentage> <length>? ]?

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

### HTML

```html
<div>
  <p class="translate">Translation</p>
</div>
```

### CSS

```css
\* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.translate {
  transition: translate 1s;
}

div:hover .translate {
  translate: 200px 50px;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the size of bounding box |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates stacking context | yes |

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

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

参见
--

* `scale`
* `rotate`
* `transform`

注意：skew 不是一个独立的变换属性。


box-sizing - CSS：层叠样式表

box-sizing
==========

CSS 中的 **`box-sizing`** 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

尝试一下
----

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 `width` 与 `height` 只会应用到这个元素的内容区。如果这个元素有任何的 `border` 或 `padding` ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现：

* `content-box` 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
* `border-box` 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

**译者注：** `border-box`不包含`margin`

**备注：** 对于新的 web 站点，你可能希望首先将 box-sizing 设置为 border-box，如下所示：

```css
\* {
  box-sizing: border-box;
}
```

这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，你应谨慎使用这个属性。例如：你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。

语法
--

`box-sizing` 属性被指定为下面列表中的关键字。

### 属性值

`content-box`

默认值，标准盒子模型。`width` 与 `height` 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。比如说，`.box {width: 350px; border: 10px solid black;}` 在浏览器中的渲染的实际宽度将是 370px。

尺寸计算公式：

* `width` = 内容的宽度
* `height` = 内容的高度

宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

`border-box`

`width` 和 `height` 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。注意，填充和边框将在盒子内 , 例如， `.box {width: 350px; border: 10px solid black;}` 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负，并且被分配到 0，使得不可能使用 border-box 使元素消失。

尺寸计算公式：

* `width` = border + padding + 内容的宽度
* `height` = border + padding + 内容的高度

### 形式语法
```

box-sizing =
  content-box  |
  border-box

```

示例
--

本例显示了不同的 `box-sizing` 值如何改变两个原本相同的元素的渲染尺寸。

### HTML

```html
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>
```

### CSS

```css
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /\* Total width: 160px + (2 \* 20px) + (2 \* 8px) = 216px
 Total height: 80px + (2 \* 20px) + (2 \* 8px) = 136px
 Content box width: 160px
 Content box height: 80px \*/
}

.border-box {
  box-sizing: border-box;
  /\* Total width: 160px
 Total height: 80px
 Content box width: 160px - (2 \* 20px) - (2 \* 8px) = 104px
 Content box height: 80px - (2 \* 20px) - (2 \* 8px) = 24px \*/
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # box-sizing |

|  |  |
| --- | --- |
| 初始值 | `content-box` |
| 适用元素 | all elements that accept width or height |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

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

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

参见
--

* CSS 框盒模型


atan2() - CSS：层叠样式表

atan2()
=======

CSS 函数 **`atan2()`** 为三角函数，返回介于 `-infinity` 和 `infinity` 之间的两值的反正切值。此函数接受两个参数，返回表示介于 `-180deg` 和 `180deg` 之间的 `<angle>` 的弧度数。

语法
--

```css
/\* 两个 <number> 值 \*/
transform: rotate(atan2(3, 2));

/\* 两个 <dimension> 值 \*/
transform: rotate(atan2(1rem, -0.5rem));

/\* 两个 <percentage> 值 \*/
transform: rotate(atan2(20%, -30%));

/\* 其他值 \*/
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));
```

### 参数

`atan2(y, x)` 函数接受以逗号分隔的两值作为其参数。每值可为 `<number>`、`<dimension>` 或 `<percentage>`。两值须为同一类型，但若均为 `<dimension>`，则其单位可以不同（例：`atan2(100px, 5vw)` 为有效表达式）。

`y`

点的纵坐标。为解析为 `<number>`、`<dimension>` 或 `<percentage>` 的计算式。

`x`

点的横坐标。为解析为 `<number>`、`<dimension>` 或 `<percentage>` 的计算式。

### 返回值

对于所给两值 `x` 和 `y`，函数 `atan2(y, x)` 计算并返回正半横轴与从原点到点 `(x, y)` 的射线的夹角（`<angle>`）。

### 形式语法
```

<atan2()> =
  atan2( <calc-sum> , <calc-sum> )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

示例
--

### 旋转元素

由于 `atan2()` 函数返回 `<angle>`，故可用于旋转（`rotate`）元素。

#### HTML

```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```

#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```

```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan2(3, 2));
}
div.box-2 {
  transform: rotate(atan2(3%, -2%));
}
div.box-3 {
  transform: rotate(atan2(-1, 0.5));
}
div.box-4 {
  transform: rotate(atan2(1, 0.5));
}
div.box-5 {
  transform: rotate(atan2(1rem, -0.5rem));
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

参见
--

* `sin()`
* `cos()`
* `tan()`
* `asin()`
* `acos()`
* `atan()`


animation-play-state - CSS：层叠样式表

animation-play-state
====================

**`animation-play-state`** CSS 属性设置动画是运行还是暂停。

尝试一下
----

恢复暂停的动画将从暂停时停止的位置开始播放，而不是从动画序列的开头重新开始播放。

语法
--

```css
/\* 单个动画 \*/
animation-play-state: running;
animation-play-state: paused;

/\* 多个动画 \*/
animation-play-state: paused, running, running;

/\* 全局值 \*/
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;
```

### 值

`running`

当前**动画**正在**运行**。

`paused`

当前**动画**已被**停止**。

**备注：** 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 `animation-name` 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见设置多个动画属性值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `running` |
| 适用元素 | all elements, `::before` and `::after` pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

### 形式语法
```

animation-play-state =
  <single-animation-play-state>#

<single-animation-play-state> =
  running  |
  paused

```

示例
--

### 暂停动画

这个动画被暂停了，但是当你将鼠标悬停在上面时会继续运行。

#### HTML

```html
<div class="box"></div>
```

```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

#### 结果

将鼠标悬停在矩形上来播放动画。

参见 CSS 动画以获取示例。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-play-state |

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

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

参见
--

* 使用 CSS 动画
* JavaScript `AnimationEvent` (en-US) API
* 其他相关的动画属性：`animation`、`animation-composition` (en-US)、`animation-delay`、`animation-direction`、`animation-duration`、`animation-fill-mode`、`animation-iteration-count`、`animation-name`、`animation-timeline` (en-US)、`animation-timing-function`


font-variant - CSS：层叠样式表

font-variant
============

**font-variant** 属性是`font-variant-caps`, `font-variant-numeric`, `font-variant-alternates`, `font-variant-ligatures`, `font-variant-east-asian` (en-US)等属性的简写。你也可以使用简写 `font` 设定`font-variant`在 CSS Level 2 (Revision 1) 中的值（即`normal` 或 `small-caps`）。

尝试一下
----

语法
--

```css
font-variant: small-caps;
font-variant: common-ligatures small-caps;

/\* Global values \*/
font-variant: inherit;
font-variant: initial;
font-variant: unset;
```

### 值

`normal`

规定一个常规（normal）字型；每个非简写的属性的初始值都是 normal。属于 `font-variant` 的非简写属性有：`font-variant-caps`, `font-variant-numeric`, `font-variant-alternates`, `font-variant-ligatures` 和 `font-variant-east-asian` (en-US)。

`none`

将`font-variant-ligatures`设定为 `none` ，将其他非简写属性的值设定为初始值`normal`。

`<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>`

规定与`font-variant-ligatures`属性相关的关键字，可能的值包括： `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual` 和 `no-contextual`。

`stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()`

规定与`font-variant-alternates`属性相关的关键字和函数。

`small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`

规定与`font-variant-caps` 属性相关的关键字和函数。

`<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero`

规定与`font-variant-alternates`属性相关的关键字，可能的值包括：`lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal` 和 `slashed-zero`。

`<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby`

规定与`font-variant-east-asian` (en-US)属性相关的关键字，可能的值包括：`jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby`。
```

font-variant =
  normal                                              |
  none                                                |
  [ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]

<common-lig-values> =
  common-ligatures     |
  no-common-ligatures

<discretionary-lig-values> =
  discretionary-ligatures     |
  no-discretionary-ligatures

<historical-lig-values> =
  historical-ligatures     |
  no-historical-ligatures

<contextual-alt-values> =
  contextual     |
  no-contextual

<feature-value-name> =
  <ident> (en-US)

<numeric-figure-values> =
  lining-nums    |
  oldstyle-nums

<numeric-spacing-values> =
  proportional-nums  |
  tabular-nums

<numeric-fraction-values> =
  diagonal-fractions  |
  stacked-fractions

<east-asian-variant-values> =
  jis78        |
  jis83        |
  jis90        |
  jis04        |
  simplified   |
  traditional

<east-asian-width-values> =
  full-width          |
  proportional-width

```

示例
--

### Setting the small-caps font variant

#### HTML

```html
<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>
```

#### CSS

```css
p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-prop |

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

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

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

参见
--

* `text-transform`
* `text-combine-upright` (en-US)
* `text-orientation`


:checked - CSS：层叠样式表

:checked
========

**`:checked`** CSS 伪类选择器表示任何处于选中状态的**radio**(`<input type="radio">`), **checkbox** (`<input type="checkbox">`) 或 ("select") 元素中的**option** HTML 元素 ("option")。

```css
/\* 匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) \*/
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}
```

用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。

**备注：** 因为浏览器经常将 `<option>` 视为可替换元素，因此不同的浏览器通过`:checked`伪类渲染出来的效果也不尽相同。

语法
--

```css
:checked {
  /\* CSS declarations \*/
}
```

示例
--

### 基础示例

#### HTML

```html
<div>
  <input type="radio" name="my-input" id="yes" />
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no" />
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in" />
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>
```

#### CSS

```css
div,
select {
  margin: 8px;
}

/\* Labels for checked inputs \*/
input:checked + label {
  color: red;
}

/\* Radio element, when checked \*/
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/\* Checkbox element, when checked \*/
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/\* Option elements, when selected \*/
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}
```

#### 结果

### 借用隐藏的 checkbox 来切换元素的样式（显示/隐藏）

这个例子利用了`:checked`伪类，让用户基于复选框的状态切换内容，而无需使用 JavaScript。

#### HTML

```html
<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr>
      <th>Column #1</th>
      <th>Column #2</th>
      <th>Column #3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
```

#### CSS

```css
/\* Hide the toggle checkbox \*/
#expand-toggle {
  display: none;
}

/\* Hide expandable content by default \*/
.expandable {
  visibility: collapse;
  background: #ddd;
}

/\* Style the button \*/
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/\* Show hidden content when the checkbox is checked \*/
#expand-toggle:checked ~ \* .expandable {
  visibility: visible;
}

/\* Style the button when the checkbox is checked \*/
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}
```

#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-checked |
| Selectors Level 4 # checked |

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

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


max-inline-size - CSS：层叠样式表

max-inline-size
===============

CSS 属性 **`max-inline-size`** 根据元素的书写模式定义了元素区块的横向或纵向最大尺寸。根据 `writing-mode` 的值，此属性对应于 `max-width` 或 `max-height` 属性。

若为纵向书写模式，则 `max-inline-size` 的值对应于元素的最大高度；否则对应于元素的最大宽度。与此相关的属性为 `max-block-size` (en-US)，此属性定义了元素另一方向的尺度。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
max-inline-size: 300px;
max-inline-size: 25em;

/\* <percentage> 值 \*/
max-inline-size: 75%;

/\* 关键词值 \*/
max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content(20em);

/\* 全局值 \*/
max-inline-size: inherit;
max-inline-size: initial;
max-inline-size: revert;
max-inline-size: revert-layer;
max-inline-size: unset;
```

### 取值

`max-inline-size` 属性的取值与 `max-width` 和 `max-height` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | same as `width` and `height` |
| 是否是继承属性 | 否 |
| Percentages | inline-size of containing block |
| 计算值 | same as `max-width` and `max-height` |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

max-inline-size =
  <'max-width'>

```

示例
--

### 以像素为单位设置最大行向尺寸

#### HTML

```html
<p class="exampleText">示例文本</p>
```

#### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-inline-size: 200px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

参见
--

* 对应的实体属性：`max-width` 和 `max-height`
* `writing-mode`


min-width - CSS：层叠样式表

min-width
=========

概述
--

`min-width` 属性为给定元素设置最小宽度。它可以阻止 `width` 属性的应用值小于 `min-width` 的值。

`min-width 的值会同时覆盖` `max-width` 和 `width`。

语法
--
```

形式语法：
```
min-width =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

<length-percentage> =
  <length>      |
  <percentage>

```

```
```

/* <length> value */
min-width: 3.5em

/* <percentage> value */
min-width: 10%

/* Keyword values */
min-width: max-content
min-width: min-content
min-width: fit-content
min-width: fill-available

/* Global values */
min-width: inherit
min-width: initial
min-width: unset
```

### 值

`<length>`

固定的最小宽度。查看 `<length>` 了解可用单位。负值会让该声明失效。

`<percentage>`

固定的最小宽度表现为包含块宽度的 `<percentage>` (百分比值)。负值会让该声明失效。

#### Keyword values

`auto`

用于弹性元素的默认最小宽度。相比其他布局中以`0`为默认值，`auto`能为弹性布局指明更合理的默认表现。

`max-content`
实验性

固有首选宽度。

`min-content`
实验性

固有最小宽度

`fill-available`
实验性

包含块的宽度减去水平 margin、border 和 padding。有些浏览器在实现时使用了该关键字的早期名字： `available`。

`fit-content`
实验性

等同于 `min(max-content, max(min-content, fill-available)`.

示例
--

```css
table {
  min-width: 75%;
}

form {
  min-width: 0;
}
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # min-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* `width`, `max-width`, `min-height`
* The box model, `box-sizing`


::target-text - CSS：层叠样式表

::target-text
=============

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

**`::target-text`** CSS 伪元素代表了浏览器在支持文本片段技术时所滚动到的文字。它使得作者可以选择高亮一段文字的方式。

```css
::target-text {
  background-color: pink;
}
```

语法
--

```css
::target-text {
  /\* ... \*/
}
```

示例
--

### 高亮文本片段

```css
::target-text {
  background-color: rebeccapurple;
  color: white;
}
```

要实际查看 CSS 效果，请参考 scroll-to-text 演示。

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-target-text |

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

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

参见
--

* 文本片段


@property - CSS：层叠样式表

@property
=========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`@property`** CSS `at-rule`是CSS Houdini API 的一部分，它允许开发者显式地定义他们的`CSS 自定义属性`, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。

`@property` 规则提供了一个直接在样式表中注册自定义属性的方式，而无需运行任何 JS 代码。有效的 `@property` 规则会注册一个自定义属性，就像 `CSS.registerProperty` (en-US) 函数被使用同样的参数调用了一样。

Syntax(语法描述符)
-------------

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

一个有效的 `@property` 规则代表一项自定义属性的注册，使用自定义属性名作为规则内代码序列的序部。

`@property` 规则中 **syntax** 和 **inherits** 描述符是必需的; 如果其中任何一项缺失，整条规则都将失效并且会被忽略。 **initial-value** 描述符仅在 syntax 描述符为通用 syntax 定义时是可选的，否则**initial-value**也是必需的——如果此时该描述符缺失，整条规则都将失效且被忽略。

未知的描述符自身都是无效的，且会被忽略。但是不会造成整条`@property`规则的失效。

实例
--

为 `--my-color` `自定义属性`添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。

使用 CSS `@property` 规则:

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

使用 JavaScript 中的 `CSS.registerProperty` (en-US)函数：

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

标准语法
----

```css
@property = @property <custom-property-name> { <declaration-list> }
```

规范
--

| Specification |
| --- |
| CSS Properties and Values API Level 1 # at-property-rule |

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

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

另见
--

* CSS 属性与值 API
* CSS 绘图 API (en-US)
* CSS 类型对象模型 (en-US)
* CSS Houdini


:out-of-range - CSS：层叠样式表

:out-of-range
=============

**`:out-of-range`** CSS 伪类表示一个 `<input>` 元素，其当前值处于属性 `min` 和 `max` 限定的范围外。

尝试一下
----

这个伪类很有用，可以给用户提供一个视觉提示，让他们知道字段的当前值是否超出了允许的范围。

**备注：** 该伪类仅适用于具有（并可以接受）范围限制的元素。如果没有这样的限制，元素值就无所谓“in-range”和“out-of-range”。

语法
--

```css
:out-of-range {
  /\* ... \*/
}
```

示例
--

### HTML

```html
<form action="" id="form1">
  <p>Values between 1 and 10 are valid.</p>
  <ul>
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12" />
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>
```

### CSS

```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |

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

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

参见
--

* `:in-range`
* 表单数据校验


break-inside - CSS：层叠样式表

break-inside
============

**`break-inside`** CSS 属性描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。

```css
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;
```

每一个可能的断点（可以理解为元素的边界）由三个属性来定义。前一个元素的`break-after`，后一个元素的`break-before` (en-US)，以及当前元素的\*\*`break-inside`\*\*。

如果需要定义一个中断点，必须遵循以下原则：

1. 如果这三个中断属性的值有一个是*强制中断值*（这些强制中断值包括了 `always`, `left`, `right`, `page`, `column`, `region`），那么这个属性的值就具有优先权。如果其中一个以上是这样的断点，则使用流中最新出现的元素的值。因此，`break-before`值优先于`break-after`值，而后者又优先于`break-inside`值。
2. 如果三个相关值中的任何一个是避免中断值，相关值包括 `avoid`, `avoid-page`, `avoid-region`, `avoid-column`, 则在该点上不应用此类中断。

一旦应用了强制中断，如果需要，可以添加软中断，但不能在元素边界上添加相应的`avoid`值。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | block-level elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

Syntax
------

### Values

`auto`

允许 (既不禁止也不强制) 在主框中插入任何中断 (页、列或区域)。

`avoid-page`

避免主框中任何页的中断点

`avoid-column`

避免主框中任何列的中断点

`avoid-region`
实验性

避免原则框内的任何区域中断。

### Formal syntax
```

break-inside =
  auto          |
  avoid         |
  avoid-page    |
  avoid-column  |
  avoid-region

```

Specifications
--------------

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # break-within |
| CSS Regions Module Level 1 # region-flow-break |
| CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside |

Browser compatibility
---------------------

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


calc() - CSS：层叠样式表

calc()
======

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：`<length>`、`<frequency>`, `<angle>`、`<time>`、`<percentage>`、`<number>`、或 `<integer>`。

语法
--

```css
/\* property: calc(expression) \*/
width: calc(100% - 80px);
```

此 calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

`+`

加法。

`-`

减法。

`*`

乘法，乘数中至少有一个是 `<number>`。

`/`

除法，除数（`/` 右面的数）必须是 `<number>`。

表达式中的运算对象可以使用任意 `<length>` 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。

### 备注

* \*\*`+` 和 `-` 运算符的两边必须要有空白字符。\*\*比如，`calc(50% -8px)` 会被解析成为一个无效的表达式，解析结果是：一个百分比 后跟一个负数长度值。而加有空白字符的、有效的表达式 `calc(8px + -50%)` 会被解析成为：一个长度 后跟一个加号 再跟一个负百分比。
* `*` 和 `/` 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。
* 用 0 作除数会使 HTML 解析器抛出异常。
* 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，`auto` 可视为已指定。
* `calc()` 函数支持嵌套，但支持的方式是：把被嵌套的 `calc()` 函数全当成普通的括号。（译者注：所以，函数内直接用括号就好了。）
### 形式化语法
```

<calc()> =
  calc( <calc-sum> )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

例子
--

### 使用指定的外边距定位一个对象

使用 `calc()` 可以很容易的为一个对象设置一个左右两边相等的外边距。在这个例子中，使用 CSS 创建了一个横跨整个窗口的 banner，该 banner 左右两边各有一个距离窗口边缘 40 像素的间距：

```css
.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
```

```html
<div class="banner">This is a banner!</div>
```

### 自动调整表单域的大小以适应其容器的大小

`calc()` 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。

看一下下面的 CSS：

```css
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
```

这个例子中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 `calc()`，让它的宽度为其容器的宽度减 1em。下面的 HTML 使用了上面的 CSS：

```html
<form>
  <div id="formbox">
    <label>Type something:</label>
    <input type="text" />
  </div>
</form>
```

### 使用 CSS 变量嵌套使用 `calc()`

我们来看一下下面的代码：
```

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```

在所有的变量都被展开后，`widthC` 的值就会变成 `calc( calc( 100px / 2) / 2)`，然后，当它被赋值给 `.foo` 的 width 属性时，所有内部的这些 `calc()`（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 `width` 属性的值就直接相当于 `calc( ( 100px / 2) / 2)` 了，或者说就变成 `25px` 了。简而言之：一个 `calc()` 里面的 `calc()` 就仅仅相当于是一个括号。

无障碍相关考量
-------

当 `calc()` 被用于控制文本的长度时，确保值中包含一个相对长度单位，例如：

```css
h1 {
  font-size: calc(1.5rem + 3vw);
}
```

这可以保证文本的大小会跟随页面一同缩放。

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-func |

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

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

参见
--

* Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog


overscroll-behavior-y - CSS：层叠样式表

overscroll-behavior-y
=====================

**`overscroll-behavior-y`** CSS 属性设置浏览器在到达滚动区域的垂直边界时的行为。

有关完整说明，请参阅 `overscroll-behavior`。

```css
/\* 关键字值 \*/
overscroll-behavior-y: auto; /\* 默认 \*/
overscroll-behavior-y: contain;
overscroll-behavior-y: none;

/\* 全局值 \*/
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: revert;
overscroll-behavior-y: revert-layer;
overscroll-behavior-y: unset;
```

语法
--

`overscroll-behavior-y` 属性的值是从以下列表中选择的关键字。

### 取值

`auto`

默认情况下，滚动溢出行为正常发生。

`contain`

在设置了该值的元素内部会观察到默认滚动溢出行为（例如“回弹”效果或刷新），但相邻滚动区域不会发生滚动行为，例如底部元素不会滚动。

`none`

相邻滚动区域不会发生滚动行为，并防止默认滚动溢出行为。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | non-replaced block-level elements and non-replaced inline-block elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

overscroll-behavior-y =
  contain  |
  none     |
  auto

```

示例
--

### 阻止底部元素在垂直方向上滚动

```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```

有关完整示例和解释，请参阅 `overscroll-behavior`。

规范
--

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |

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

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

参见
--

* 接管你的滚动：自定义下拉刷新和溢出效果
* 映射的逻辑属性：`overscroll-behavior-inline` (en-US)、`overscroll-behavior-block` (en-US)


CSS Basic User Interface - CSS：层叠样式表

CSS Basic User Interface
========================

**CSS Basic User Interface** 是 CSS 的一个模块，用于定义与用户界面相关的特性的渲染和实现。

参考
--

### 属性

* `appearance`
实验性
* `box-sizing`
* `cursor`
* `ime-mode`
已弃用
* `nav-down`
实验性
* `nav-left`
实验性
* `nav-right`
实验性
* `nav-up`
实验性
* `outline`
* `outline-width`
* `outline-style`
* `outline-color`
* `outline-offset`
* `resize`
* `text-overflow`
* `user-select`
指南
--

Using URL values for the `cursor` property

Explains how a URL can be used with the `cursor` property to produce custom cursors.

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |


-webkit-tap-highlight-color - CSS：层叠样式表

-webkit-tap-highlight-color
===========================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

简介
--

**`-webkit-tap-highlight-color`** 是一个没有标准化的属性，能够设置点击链接的时候出现的高亮颜色。显示给用户的高光是他们成功点击的标识，以及暗示了他们点击的元素。

|  |  |
| --- | --- |
| 初始值 | `black` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

Syntax
------

```css
-webkit-tap-highlight-color: red;
```

### 值

A `color value`.

### 基本语法

Error: could not find syntax for this item规范
--

*不属于规范的一部分。* Apple 有自己的 safari web 内容指南的文档。

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

webkit/safari, Blink/Chrome，以及IE 的一些版本。


:link - CSS：层叠样式表

:link
=====

**`:link`** CSS 伪类表示尚未被访问的元素，匹配每个具有 `href` 属性的未访问的 `<a>` 或 `<area>` 元素。

尝试一下
----

由 `:link` 和 `:visited` 伪类定义的样式可以被任何具有相同优先级的后续用户动作伪类（例如 `:hover` 或 `:active`）覆盖。为了适当地为链接设置样式，请按照 *LVHA 顺序*将 `:link` 规则放置在所有其他与链接相关的规则之前，顺序为 `:link`—`:visited`—`:hover`—`:active`。`:visited` 伪类和 `:link` 伪类是互斥的。

**备注：** 使用 `:any-link` 来选择一个元素，无论它是否已被访问。

语法
--

```css
:link {
  /\* ... \*/
}
```

示例
--

默认情况下，大多数浏览器会对访问过的链接应用特殊的 `color` 值。因此，在你访问这些链接之前，它们通常会有特殊的字体颜色。（在那之后，你需要清除浏览器历史记录才能再次看到它们。）但是，`background-color` 值可能会保留，因为大多数浏览器不会在访问过的链接上设置该属性。

### HTML

```html
<a href="#ordinary-target">This is an ordinary link.</a><br />
<a href="">You've already visited this link.</a><br />
<a>Placeholder link (won't get styled)</a>
```

### CSS

```css
a:link {
  background-color: gold;
  color: green;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-link |
| Selectors Level 4 # link |

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

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

参见
--

* 链接相关的伪类：`:visited`、`:hover` 和 `:active`


font-variant-alternates - CSS：层叠样式表

font-variant-alternates
=======================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`font-variant-alternates`** CSS 属性控制备用字体的使用。这些替代字体可以通过`@font-feature-values`中定义的替代名称来引用。

```css
/\* Keyword values \*/
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/\* Functional notation values \*/
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/\* Global values \*/
font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;
```

在 `@font-feature-values` 规则中可以定义替代字体的函数 (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament` 或 `annotation`), 将名称与 OpenType 参数相关联。此属性允许样式表中使用那些易于理解的名称 (定义于 `@font-feature-values`)。

语法
--

\*\*`font-variant-alternates`\*\*属性可以采用以下两种形式之一：

* 默认值 `normal`
* 一个或多个关键词及函数，使用任意顺序用空格分隔。
### 取值

`normal`

此关键字禁用备用字体。

`historical-forms`

此关键字启用历史类型 - 过去常见但今天不常见的字体。它对应于 OpenType 值 `hist`.

`stylistic()`

此函数可以为个别字体启用字体样式替换。该参数是特定于字体映射到数字的名称。它对应于 OpenType 值 `salt`，例如`salt 2`。

`styleset()`

此函数可以对字符集启用字体样式替换。该参数是特定于字体映射到数字的名称。它对应于 OpenType 的值 `ssXY`，例如 `ss02`。

`character-variant()`

此函数启用字符的特定样式替代。它与 styleset（）类似，但是不会为一组字符创建连贯的字形；单个字符将具有独立且不一定一致的样式。该参数是映射到数字的特定于字体的名称。它对应于 OpenType 值 `cvXY`，例如`cv02`。

`swash()`

此函数启用斜字体。该参数是特定于字体映射到数字的名称。它对应于 OpenType 值 `swsh` 和 `cswh`，例如`swsh 2` 和`cswh 2`。

`ornaments()`

此函数可启用装饰物，例如 fleurons 与其他 dingbat 字形。该参数是特定于字体映射到数字的名称。它对应于 OpenType 值 `ornm`，例如 `ornm 2`。

**备注：** 为了保留文本语义，字体设计师应该包括与 Unicode dingbat 字符不匹配的装饰，作为项目符号字符（U + 2022）的装饰变体。请注意，某些现有字体不遵循此建议。

`annotation()`

此函数支持注释，如带圆圈的数字或倒置的字符。该参数是特定于字体映射到数字的名称。它对应于 OpenType 值`nalt`，例如 `nalt 2`。

正式定义
----

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

正式语法
----
```

font-variant-alternates =
  normal                                              |
  [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]

<feature-value-name> =
  <ident> (en-US)

```

示例
--

### HTML

```html
<p>Firefox rocks!</p>
<p class="variant">Firefox rocks!</p>
```

### CSS

```css
@font-feature-values "Leitura Display Swashes" {
  @swash {
    fancy: 1;
  }
}

p {
  font-size: 1.5rem;
}

.variant {
  font-family: Leitura Display Swashes;
  font-variant-alternates: swash(fancy);
}
```

### 结果

**备注：** 你需要安装 OpenType 字体 *Leitura Display Swashes* 才能使这个例子正常运行。你可以找到一些免费版本进行测试，例如从 fontsgeek.com.

规范
--

不属于任何标准。

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

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


border-block-end-width - CSS：层叠样式表

border-block-end-width
======================

CSS 属性 **`border-block-end-width`** 定义了元素的逻辑块末的边框宽度，并根据元素的书写模式、行内方向和文本朝向对应至实体边框宽度。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top-width`、`border-right-width`、`border-bottom-width` 或 `border-left-width` 属性。

尝试一下
----

语法
--

```css
/\* 边框宽度值 \*/
border-block-end-width: 5px;
border-block-end-width: thick;

/\* 全局值 \*/
border-block-end-width: inherit;
border-block-end-width: initial;
border-block-end-width: revert;
border-block-end-width: revert-layer;
border-block-end-width: unset;
```

与此相关的属性有 `border-block-start-width`、`border-inline-start-width` 和 `border-inline-end-width`，这些属性定义了元素其他边框的宽度。

### 取值

`<'border-width'>`

边框宽度。见 `border-width`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

形式语法
----
```

border-block-end-width =
  <line-width>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

示例
--

### 竖排文本的边框宽度

#### HTML

```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-end-width: 5px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top-width`、`border-right-width`、`border-bottom-width` 和 `border-left-width`
* `writing-mode`、`direction`、`text-orientation`


:optional - CSS：层叠样式表

:optional
=========

**`:optional`** CSS 伪类表示任何未设置 `required` 属性的 `<input>`、`<select>` 或 `<textarea>` 元素。

尝试一下
----

这个伪类很有用，可以为不是必须提交的表单字段设置样式。

**备注：** `:required` 伪类选择*必填*表单字段

语法
--

```css
:optional {
  /\* ... \*/
}
```

示例
--

### 可选字段具有紫色边框

#### HTML

```html
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```

#### CSS

```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}
```

#### 结果

无障碍考虑
-----

如果表单包含可选的 `<input>`，则应该使用 `required` 属性来指示必填输入。这将确保使用辅助技术（例如屏幕阅读器）导航的人能够了解哪些输入需要有效内容以确保成功提交表单。

此外，还应在视觉上指示必填输入，通常使用描述性文本和/或图标，以避免仅依赖于颜色来传达含义。

* MDN 理解 WCAG，指南 3.3 解释 (en-US)
* 了解成功标准 3.3.2 | W3C 理解 WCAG 2.0
规范
--

| Specification |
| --- |
| HTML Standard # selector-optional |
| Selectors Level 4 # opt-pseudos |

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

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

参见
--

* 其他验证相关的伪类：`:required`、`:invalid` 和 `:valid`
* 表单数据校验


::view-transition-new - CSS：层叠样式表

::view-transition-new
=====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`::view-transition-new`** CSS 伪元素表示视图过渡的新视图状态——即过渡后新视图的实时表示。

在视图过渡期间，`::view-transition-new` 包含在相关的伪元素树上，如视图过渡过程中所述。它只能是 `::view-transition-image-pair` 的子节点，并且它不会有任何子节点。

它是一个可替换元素，因此可以使用 `object-fit` 和 `object-position` 等属性进行操作。它的自然尺寸等于内容的大小。

`::view-transition-new` 在 UA 样式表中具有以下默认样式：

```css
@keyframes -ua-view-transition-fade-in {
  from {
    opacity: 0;
  }
}

html::view-transition-new(\*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-name: -ua-view-transition-fade-in;
  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```

**备注：** 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-new`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的设置过渡伪元素和更新伪元素样式部分。

语法
--

```css
::view-transition-new(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` 可以是以下任何值之一：

`*`

使伪元素选择器匹配所有视图过渡组。

`root`

使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 `view-transition-name` 属性分配给特定视图过渡组的元素。

`<custom-ident>`

使伪元素选择器匹配（通过 `view-transition-name` 属性将 `<custom-ident>` 分配给元素而创建的）特定视图转换组。

示例
--

```css
figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-new |

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

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

参见
--

* View Transitions API
* 使用 View Transitions API 实现平滑、简单的过渡


border-left-color - CSS：层叠样式表

border-left-color
=================

**`border-left-color`** 属性设置元素的左边框颜色。值得注意的是，在大数情况下使用 `border-color` 或 `border-left` 更加方便和普遍。

```css
/\* <color> values \*/
border-left-color: red;
border-left-color: #ffbb00;
border-left-color: rgb(255, 0, 0);
border-left-color: hsla(100%, 50%, 25%, 0.75);
border-left-color: currentColor;
border-left-color: transparent;

/\* Global values \*/
border-left-color: inherit;
border-left-color: initial;
border-left-color: unset;
```

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | computed color |
| Animation type | a color |

语法
--

`border-left-color` 属性取值为单个颜色值。

### 取值

`<color>`

左边框的颜色。

### 形式语法
```

border-left-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

### 一个带边框的简单 div

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-left-color: red;
  width: auto;
}
.redtext {
  color: red;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

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

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

参见
--

* The border-related CSS shorthand properties: `border`, `border-left`, and `border-color`.
* The color-related CSS properties for the other borders: `border-right-color`, `border-bottom-color`, and `border-top-color`.
* The other border-related CSS properties applying to the same border: `border-left-style` and `border-left-width`.