recursal/MDN huggingface dataset:
::view-transition-old
=====================

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-old`** CSS 伪元素表示视图过渡的旧视图状态——即过渡前旧视图的静态屏幕截图。

在视图过渡期间，`::view-transition-old` 包含在相关的伪元素树上，如视图过渡过程中所述，前提是有一个旧视图状态需要表示。它只能是 `::view-transition-image-pair` 的子节点，并且它不会有任何子节点。

它是一个可替换元素，因此可以使用 `object-fit` 和 `object-position` 等属性进行操作。它的自然尺寸等于内容的大小。

`::view-transition-old` 在 UA 样式表中具有以下默认样式：


```css
@keyframes -ua-view-transition-fade-out {
  to {
    opacity: 0;
  }
}

html::view-transition-old(\*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-name: -ua-view-transition-fade-out;
  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```


**备注：** 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-old`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的设置过渡伪元素和更新伪元素样式部分。

语法
--


```css
::view-transition-old(<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-old |

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

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

参见
--

* View Transitions API
* 使用 View Transitions API 实现平滑、简单的过渡
-webkit-touch-callout
=====================

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

概述
--

`-webkit-touch-callout` 这个CSS 属性禁用了默认的 callout 展示，callout 是指当触摸并按住一个元素的时候出现的提示。

当在 iOS 上一直按住一个目标元素时，Safari 会展示一个关于这个链接的 callout 信息。`webkit-touch-callout`属性允许禁用掉这一行为。

语法
--
```

Formal syntax: default | none
```



```css
-webkit-touch-callout: default; /\* displays the callout \*/
-webkit-touch-callout: none; /\* disables the callout \*/

-webkit-touch-callout: initial;
-webkit-touch-callout: inherit;
-webkit-touch-callout: unset;
```

### 可能的值

`default`

此值表示显示默认的 callout

`none`

此值表示禁用 callout

示例
--


```css
.example {
  -webkit-touch-callout: none;
}
```

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

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

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

**备注：** 使用 `:blank` 选择器被认为尚有一定风险，CSSWG 正在持续改进它。

详见 CSSWG issue #1967。

**`:blank`** CSS 伪类选择器选择用户输入为空的输入框，如 `<input>` 和 `<textarea>`)。

语法
--

Error: could not find syntax for this item规范
--

| Specification |
| --- |
| Selectors Level 4 # blank-pseudo |

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

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

参见
--

* `:empty`
* `:-moz-only-whitespace` 
非标准
 - The previous definition of `:blank`.
border
======

概览
--

CSS 的 **`border`** 属性是一个用于设置各种单独的边界属性的简写属性。`border` 可以用于设置一个或多个以下属性的值：`border-width`、`border-style`、`border-color`。

尝试一下
----

和所有的简写属性一样，如果有缺省值会被设置成对应属性的初始值。同时需要注意设置 border 对`border-image`属性的影响，虽然 border 属性不能设置这个属性，但会把该属性重置为初始值 none。这使得我们可以用 border 属性去重置整个样式表中的 border 设置。因为 W3C 计划在未来的标准中保留该属性，因此建议使用该属性重置边框设定。

**备注：** 虽然`border-width`,、`border-style`和 `border-color` 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色，但 boder 属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。

### Borders vs. outlines

边界（`border`）和轮廓（`outline`）很相似。然而轮廓在以下方面与边界不同：

* 轮廓不占据空间，他们在元素内容之外绘制。
* 根据规范，轮廓不必为矩形，尽管通常是矩形。
语法
--


```css
/\* style \*/
border: solid;

/\* width | style \*/
border: 2px dotted;

/\* style | color \*/
border: outset #f33;

/\* width | style | color \*/
border: medium dashed green;

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


可以使用下面列出的一个，两个或三个值来指定 `border` 属性。值的顺序无关紧要。

**备注：** 如果边框的样式未定义，它将不可见。这是因为样式默认为 none。

### 取值

border-width

请看 `border-width`.

border-style

请看 `border-style`.

border-color

`<color>` 可以确定 border 的颜色。如果这个值没有设置，它的默认值是元素的 `color` 属性值（是文字颜色而非背景色）。请看 `border-color`。

### 形式语法
```

border =   
  <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>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>
```


#### CSS


```css
div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # propdef-border |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
page-break-after
================

**`page-break-after`** CSS 属性调整当前元素之后的分页符。

此属性适用于生成一个盒子的块元素。它不适用于不会生成一个盒子的空 `<div>`。
```

/* Keyword values */
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

/* Global values */
page-break-after: inherit;
page-break-after: initial;
page-break-after: unset;
```


**备注：** 这个属性正在被更通用的 `break-after` 取代。这个新的属性也处理列和区域中断，并在语法上兼容 `page-break-after`。

在使用 `page-break-after` 之前，请检查是否可以使用 `break-after` 代替。在将来， `page-break-after` 将只是它的一些值的别名。

语法
--


```css
/\* Keyword values \*/
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

/\* Global values \*/
page-break-after: inherit;
page-break-after: initial;
page-break-after: unset;
```

### Values

`auto`

初始值。自动分页符（既不强制也不禁止）。

`always`

始终在元素后强制分页。

`avoid`

避免在元素后出现分页符。

`left`

在元素之后足够的分页符，一直到一张空白的左页为止。

`right`

在元素之后足够的分页符，一直到一张空白的右页为止。

`recto` 
实验性

If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.

`verso` 
实验性

If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.

### Formal syntax
```

page-break-after =   
  auto     |  
  always   |  
  avoid    |  
  left     |  
  right    |  
  inherit    
  
```

Examples
--------


```css
/\* move to a new page after footnotes \*/
div.footnotes {
  page-break-after: always;
}
```

Specification
-------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-after |

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

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

See also
--------

* `page-break-before`, `page-break-inside`
* `orphans`, `widows`
<time-percentage>
=================

CSS 数据类型`<time-percentage> 的值`可以表示为时间或百分比。

Syntax
------

有关此类型允许的各个语法的详细信息，请参阅`<time>`和`<percentage>`的文档。

Use in calc()
-------------

如果将`<time percentage>`指定为允许的类型，这意味着该百分比解析为时间，因此可以在`calc()`表达式中使用。

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
letter-spacing
==============

`CSS` 的 `letter-spacing` 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。`letter-spacing` 的正值会导致字符分布得更远，而 `letter-spacing` 的负值会使字符更接近。

尝试一下
----

语法
--


```css
/\* Keyword value \*/
letter-spacing: normal;

/\* <length> values \*/
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/\* Global values \*/
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
```

### 值

`normal`

此间距是按照当前字体的正常间距确定的。和 `0` 不同的是，`normal` 会让用户代理调整文字之间空间来对齐文字。

`<length>`

指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。

### 形式语法
```

letter-spacing =   
  normal    |  
  <length>    
  
```

示例
--

### HTML


```html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
```

### CSS


```css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}
```

### 结果

可解决的问题
------

一个很大的正或负的 `letter-spacing`值会将应用这个样式的单词变为不可读的。给文本 `letter-spacing` 属性应用了一个很大的正值，字母之间的距离会很远，以至于文本中的单词将显示为一系列单独的，无有任何关联的字母。给文本 `letter-spacing` 属性应用了一个很大的负值，字母将会互相重叠到一个点，在这个点上单词可能无法识别了。

最佳的易辨认的字母间距（letter-spacing）必须根据具体情况来确定，因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。

无障碍考量
-----

A large positive or negative `letter-spacing` value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # letter-spacing-property |

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | an optimum value consisting of either an absolute length or the keyword `normal` |
| Animation type | a length |

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

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

参见
--

* `font-kerning`
border-bottom-width
===================

CSS 属性 **`border-bottom-width`** 设置一个元素的底部边框宽度。


```css
/\* Keyword values \*/
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

/\* <length> values \*/
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

/\* Global keywords \*/
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;
```


|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | the absolute length or `0` if `border-bottom-style` is `none` or `hidden` |
| Animation type | a length |

Syntax
------

### Values

<`br-width>`

定义边框宽度，取值为非负的宽度值`<length>`或关键字。如果是关键字的话，其取值必须是以下之一：

| `thin` |  | 细边框 |
| --- | --- | --- |
| `medium` |  | 中等边框 |
| `thick` |  | 粗边框 |

**备注：** 因为规范没有具体定义每个关键字对应的宽度值，所以实际显示效果依赖于实现。但是宽度值的取值一定遵循 `thin ≤ medium ≤ thick` 的规律且在单文档中是常数。

### Formal syntax
```

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

Example
-------

### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```

### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}
```

### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-width |

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

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

See also
--------

* The other border-width-related CSS properties: `border-left-width`, `border-right-width`, `border-top-width`, and `border-width`.
* The other border-bottom-related CSS properties: `border`, `border-bottom`, `border-bottom-style`, and `border-bottom-color`.
animation-fill-mode
===================

CSS 属性 **`animation-fill-mode`** 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

尝试一下
----

使用简写属性 `animation` 一次性设置所有动画属性通常很方便。

语法
--


```css
/\* Single animation \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* Multiple animations \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
```

### 值

`none`

当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

`forwards`

目标将保留由执行期间遇到的最后一个关键帧 (en-US)计算值。最后一个关键帧取决于`animation-direction`和`animation-iteration-count`的值：

| `animation-direction` | `animation-iteration-count` | last keyframe encountered |
| --- | --- | --- |
| `normal` | even or odd | `100%` or `to` |
| `reverse` | even or odd | `0%` or `from` |
| `alternate` | even | `0%` or `from` |
| `alternate` | odd | `100%` or `to` |
| `alternate-reverse` | even | `100%` or `to` |
| `alternate-reverse` | odd | `0%` or `from` |

`backwards`

动画将在应用于目标时立即应用第一个关键帧中定义的值，并在`animation-delay`期间保留此值。第一个关键帧取决于`animation-direction`的值：

| `animation-direction` | first relevant keyframe |
| --- | --- |
| `normal` or `alternate` | `0%` or `from` |
| `reverse` or `alternate-reverse` | `100%` or `to` |

`both`

动画将遵循`forwards`和`backwards`的规则，从而在两个方向上扩展动画属性。


**备注：** 当你在`animation-*`属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 `animation-name` 属性中指定的动画。有关更多信息，请参阅设置多个动画属性值。

### 正式语法
```

animation-fill-mode =   
  <single-animation-fill-mode>#    
  
<single-animation-fill-mode> =   
  none       |  
  forwards   |  
  backwards  |  
  both         
  
```

示例
--

你可以在以下示例中看到 `animation-fill-mode` 的效果。它演示了如何对于运行无限时间的动画，可以使其保持最终状态而不是恢复到原始状态（这是默认状态）。

### HTML


```html
<p>Move your mouse over the gray box!</p>
<div class="demo">
  <div class="growsandstays">This grows and stays big.</div>
  <div class="grows">This just grows.</div>
</div>
```

### CSS


```css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
```


更多示例请查看 CSS 动画 。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-fill-mode |

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

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

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

参见
--

* Using CSS animations
* JavaScript `AnimationEvent` (en-US) API
:focus-within
=============

**`:focus-within`** CSS 伪类表示当元素或其任意后代元素被聚焦时，将匹配该元素。换言之，它表示 `:focus` 伪类匹配到该元素自身或它的后代时，该伪类生效。（这也包括 shadow 树中的后代元素。）

尝试一下
----

这个选择器非常有用，举个常见的例子，当用户聚焦于一个 `<input>` 字段时，可以用它来突出显示整个 `<form>` 容器。

语法
--


```css
:focus-within {
  /\* ... \*/
}
```

示例
--

此例子中，当表单某个文本输入框获得焦点后，表单会被设置颜色样式。

### HTML


```html
<p>试试在这个表单中输入点什么。</p>

<form>
  <label for="given\_name">给定名称：</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">家庭名称：</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS


```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

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

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

参见
--

* `:focus`
* `:focus-visible`
* 使用 focus-within 选择器吸引用户的注意力
atan()
======

CSS 函数 **`atan()`** 为三角函数，返回介于 `-∞` 和 `+∞` 之间的数的反正切值。此函数含有单个计算式，此式返回表示介于 `-90deg` 和 `90deg` 之间的 `<angle>` 的弧度数。

语法
--


```css
/\* 单个 <number> 值 \*/
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));

/\* 其他值 \*/
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));
```

### 参数

`atan(number)` 函数仅接受一值作为其参数。

`number`

解析为介于 `-∞` 和 `+∞` 之间的 `<number>` 的计算式。

### 返回值

`number` 的反正切值总将返回介于 `-90deg` 和 `90deg` 之间的 `<angle>`。

* 若 `number` 为 `0⁻`，则结果为 `0⁻`。
* 若 `number` 为 `+∞`，则结果为 `90deg`。
* 若 `number` 为 `-∞`，则结果为 `-90deg`。

即：

* `atan(-infinity)` 表示 `-90deg`。
* `atan(-1)` 表示 `-45deg`。
* `atan(0)` 表示 `0deg`。
* `atan(1)` 表示 `45deg`。
* `atan(infinity)` 表示 `90deg`。
### 形式语法
```

<atan()> =   
  atan( <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          
  
```

示例
--

### 旋转元素

由于 `atan()` 函数返回 `<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(atan(-99999));
}
div.box-2 {
  transform: rotate(atan(-1));
}
div.box-3 {
  transform: rotate(atan(0));
}
div.box-4 {
  transform: rotate(atan(1));
}
div.box-5 {
  transform: rotate(atan(99999));
}
```


#### 结果

规范
--

| 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()`
* `atan2()`
::view-transition-image-pair
============================

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-image-pair`** CSS 伪元素表示一个视图过渡的旧视图状态和新视图状态的容器——即过渡前和过渡后的状态。

在视图过渡期间，`::view-transition-image-pair` 包含在相关的伪元素树上，如视图过渡过程中所述。它只能是 `::view-transition-group` 的子节点。并且可以有一个 `::view-transition-new` 或一个 `::view-transition-old` 子节点，亦或是两者都有。

`::view-transition-image-pair` 在 UA 样式表中具有以下默认样式：


```css
html::view-transition-image-pair(\*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```


默认情况下，`::view-transition-image-pair` 在视图过渡样式表中设置了 `isolation: isolate`，以便其子元素可以使用非正常混合模式进行混合，而不会影响其他视觉输出。

语法
--


```css
::view-transition-image-pair(<pt-name-selector>) {
  /\* ... \*/
}
```


`<pt-name-selector>` 可以是以下任何值之一：

`*`

使伪元素选择器匹配所有视图过渡组。

`root`

使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 `view-transition-name` 属性分配给特定视图过渡组的元素。

`<custom-ident>`

使伪元素选择器匹配（通过 `view-transition-name` 属性将 `<custom-ident>` 分配给元素而创建的）特定视图转换组。

示例
--


```css
::view-transition-image-pair(root) {
  isolation: auto;
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |

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

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

参见
--

* View Transitions API
* 使用 View Transitions API 实现平滑、简单的过渡
::-webkit-progress-bar
======================

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

概述
--

**`::-webkit-progress-bar`** CSS 伪元素 选择 `<progress>` 元素的未完成部分。 `::-webkit-progress-value` 选择完成的部分。**`::-webkit-progress-bar`** 是`::-webkit-progress-inner-element` 伪元素的子元素，同时是 `::-webkit-progress-value` 伪元素的父元素。

**备注：** 为了能让`::-webkit-progress-value`起作用，需要添加 CSS `-webkit-appearance` (en-US) 至 `<progress>` 元素。

示例
--

### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}
```

### HTML


```html
<progress value="10" max="50"></progress>
```

### 结果

应用了上述样式的进度条样式如下：

![](/zh-CN/docs/Web/CSS/::-webkit-progress-bar/progress-bar.png)

规范
--

没有规范。这是一个 WebKit/Blink 独有的规范。

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

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

参见
--

* The pseudo-elements used by WebKit/Blink to style other parts of a `<progress>` element:
    + `::-webkit-progress-value`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`
* `::-ms-fill`
CSS 逻辑属性与逻辑值
============

**CSS 逻辑属性与逻辑值**这一 CSS 模块引入了逻辑属性和逻辑值，由此得以通过逻辑的——而不是实体的——方向与尺度映射控制布局。

此模块也为之前在 CSS 2.1 中定义的属性定义了逻辑属性和逻辑值。逻辑属性定义了在相对方向下与对应的实体属性相等价的属性。

### 块向与行向

逻辑属性和逻辑值用抽象术语*块向*和*行向*描述其流向。这些术语的实体含义取决于书写模式。

块向尺度

与行内文本流向垂直的方向上的尺度，如横排书写模式中的竖直尺度，以及竖排书写模式中的水平尺度。对于标准的英文文本，此尺度指竖直尺度。

行向尺度

与行内文本流向平行的方向上的尺度，如横排书写模式中的水平尺度，以及横排书写模式中的竖直尺度。对于标准的英文文本，此尺度指水平尺度。

参考
--

### 尺寸属性

* `block-size`
* `inline-size`
* `max-block-size` (en-US)
* `max-inline-size`
* `min-block-size`
* `min-inline-size`
### 用于外边距、边框和内边距的属性

* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-color`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-start-start-radius`
* `border-start-end-radius`
* `border-end-start-radius`
* `border-end-end-radius`
* `border-style`
* `border-width`
* `margin`（`logical` 
实验性
 关键词）
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `padding`（`logical` 
实验性
 关键词）
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
### 用于浮动和定位的属性

* `clear`（`inline-end` 和 `inline-start` 关键词）
* `float`（`inline-end` 和 `inline-start` 关键词）
* `inset`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
### 用于尺寸局限的属性

* `contain-intrinsic-block-size`
* `contain-intrinsic-inline-size`
### 其他属性

* `caption-side`（`inline-end` 和 `inline-start` 关键词）
* `overflow-block`
* `overflow-inline`
* `overscroll-behavior-block` (en-US)
* `overscroll-behavior-inline` (en-US)
* `resize`（`block` 和 `inline` 关键词）
* `text-align`（`end` 和 `start` 关键词）
### 弃用属性

* `offset-block-end` 
非标准

已弃用
（现为 `inset-block-end`）
* `offset-block-start` 
非标准

已弃用
（现为 `inset-block-start`）
* `offset-inline-end` 
非标准

已弃用
（现为 `inset-inline-end`）
* `offset-inline-start` 
非标准

已弃用
（现为 `inset-inline-start`）
指南
--

* 逻辑属性和逻辑值的基本概念
* 逻辑尺寸属性
* 用于外边距、边框和内边距的逻辑属性
* 用于浮动和定位的逻辑属性
规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |

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

完整的兼容性信息见各属性的页面。
::spelling-error
================

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

**`::spelling-error`** CSS 伪元素 表示浏览器标记为不正确拼写的文本段。


```css
::spelling-error {
  color: red;
}
```

可用的属性
-----

只有一小部分 CSS 属性可用于 `::spelling-error` 伪元素选择器：

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` and its longhands
* `text-decoration` and its associated properties
* `text-emphasis-color` (en-US)
* `text-shadow`
语法
--
```

::spelling-error
```

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-spelling-error |

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

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

参见
--

* `::grammar-error`