recursal/MDN huggingface dataset:
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
====================

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

概述
--

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

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

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

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
=============

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

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

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

简介
--

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

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

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

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
=================

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