recursal/MDN huggingface dataset:
flex-direction
==============

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-direction`** 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
```

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
```


请注意，值 `row` 和 `row-reverse` 受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

|  |  |
| --- | --- |
| 初始值 | `row` |
| 适用元素 | flex containers |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

查看 使用 CSS 弹性盒子 (en-US) 以了解更多的属性和信息。

语法
--

### 取值

接受以下取值：

`row`

flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。

`row-reverse`

表现和 row 相同，但是置换了主轴起点和主轴终点

`column`

flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

`column-reverse`

表现和`column`相同，但是置换了主轴起点和主轴终点

### 语法格式
```

flex-direction =   
  row             |  
  row-reverse     |  
  column          |  
  column-reverse    
  
```

示例
--

### HTML


```html
<h4>This is a Column-Reverse</h4>
<div id="content">
  <div id="box" style="background-color:red;">A</div>
  <div id="box" style="background-color:lightblue;">B</div>
  <div id="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
  <div id="box1" style="background-color:red;">A</div>
  <div id="box1" style="background-color:lightblue;">B</div>
  <div id="box1" style="background-color:yellow;">C</div>
</div>
```

### CSS


```css
#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

#box {
  width: 50px;
  height: 50px;
}

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  display: flex;
  flex-direction: row-reverse;
}

#box1 {
  width: 50px;
  height: 50px;
}
```

### 结果

规范
--

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

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

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

参考
--

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

**`font-stretch`** 属性为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如`font-feature-settings`和`font-variant`属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。

![The two 'e' belong to the same fonts. One is condensed, the other normal and can be selected by 'font-stretch'.](/files/4321/Character_in_same_font_but_one_condensed.png)

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

Syntax
------


```css
/\* Keyword values \*/
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

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

### Values

`normal`

指定默认字体

`semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`

小于默认字体，其中 ultra-condensed 是缩的最小的字体

`semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`

大于默认字体的值

### Interpolation

Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.

### Formal syntax
```

font-stretch =   
  normal              |  
  <percentage [0,∞]>  |  
  ultra-condensed     |  
  extra-condensed     |  
  condensed           |  
  semi-condensed      |  
  semi-expanded       |  
  expanded            |  
  extra-expanded      |  
  ultra-expanded        
  
```

示例
--

### HTML


```html
<div class="ultra stretch">This is text with the font extremely expanded</div>
<div class="stretch">This is text with the font stretched</div>
<div class="normal">This is text without font stretching</div>
<div class="condensed">This is text with the font condensed</div>
<div class="ultra condensed">
  This is text with the font extremely condensed
</div>
```

### CSS


```css
.ultra.stretch {
  font-stretch: ultra-expanded;
}
.stretch {
  font-stretch: expanded;
}
.normal {
  font-stretch: normal;
}
.condensed {
  font-stretch: condensed;
}
.ultra.condensed {
  font-stretch: ultra-condensed;
}
```

### Result

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

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

The CSS property `font-stretch` was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:nth-last-child
===============

**`:nth-last-child()`** 这个CSS 伪类 从兄弟节点中从后往前匹配处于某些位置的元素


```css
/\* 在所有兄弟节点中，从后往前
 选择所有 4 的倍数的节点 \*/
:nth-last-child(4n) {
  color: lime;
}
```


**备注：** 这个伪类和 `:nth-child` 基本一致，但它是从*结尾*计数，而不是从开始计数。

语法
--

`nth-last-child`伪类接受一个参数，用来作为一个模式，从后往前匹配元素。

### Keyword values

`odd`

代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是奇数，比如：1, 3, 5 等。

`even`

代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是偶数，比如：2, 4, 6 等。

### Functional notation

`<An+B>`

代表一些元素，它们在所在兄弟节点中的数字位置满足模式 `An+B`, `n`是 0 或者任意的正整数。从结尾开始计算的第一个元素的索引值是`1`. `A` 和 `B` 必须都是 `<integer>`.

### Formal syntax

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

### 选择器示例

`tr:nth-last-child(odd)` or `tr:nth-last-child(2n+1)`

表示 HTML 表的倒数的奇数行:1、3、5 等。

`tr:nth-last-child(even)` or `tr:nth-last-child(2n)`

表示 HTML 表的倒数的偶数行:2、4、6 等。

`:nth-last-child(7)`

表示倒数第 7 个元素。

`:nth-last-child(5n)`

表示倒数的第 5、10、15 等元素。

`:nth-last-child(3n+4)`

表示倒数的第 4、7、10、13 等元素。

`:nth-last-child(-n+3)`

表示一组兄弟节点中的最后三个元素。

`p:nth-last-child(n)` or `p:nth-last-child(n+1)`

表示一组兄弟节点中的每个`<p>`元素。这与一个简单的`p`选择器相同。(由于`n`从 0 开始，而最后一个元素从 1 开始，`n`和`n+1`都会选择相同的元素。)

`p:nth-last-child(1)` or `p:nth-last-child(0n+1)`

表示所有处于兄弟节点中倒数第一位的元素`<p>`。这与`:last-child`选择器相同。

### Table example

#### HTML


```html
<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>
```


#### CSS


```css
table {
  border: 1px solid blue;
}

/\* Selects the last three elements \*/
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/\* Selects every element starting from the second to last item \*/
tr:nth-last-child(n + 2) {
  color: blue;
}

/\* Select only the last second element \*/
tr:nth-last-child(2) {
  font-weight: 600;
}
```


#### 结果

### Quantity query

数量查询样式元素取决于它们的数量。在本例中，当给定列表中至少有三个列表项时，列表项变为红色。这是通过组合`nth-last-child`和 通用兄弟选择器.的功能来实现的

#### HTML


```html
<h4>A list of four items (styled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>A list of two items (unstyled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>
```


#### CSS


```css
/\* If there are at least three list items,
 style them all \*/
li:nth-last-child(n + 3),
li:nth-last-child(n + 3) ~ li {
  color: red;
}
```


#### Result

规范
--

| Specification |
| --- |
| Selectors Level 4 # nth-last-child-pseudo |

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

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

参见
--

* `:nth-child`
* Quantity Queries for CSS
padding-inline
==============

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

尝试一下
----

属性构成
----

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

* `padding-inline-end`
* `padding-inline-start`
语法
--


```css
/\* <length> 值 \*/
padding-inline: 10px 20px; /\* 绝对长度 \*/
padding-inline: 1em 2em; /\* 相对于文本尺寸 \*/
padding-inline: 10px; /\* 同时设置行首和行末值 \*/

/\* <percentage> 值 \*/
padding-inline: 5% 2%; /\* 相对于最近包含区块的宽度 \*/

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


`padding-inline` 属性可用一个或两个值指定。若给一值，则此值同时用于 `padding-inline-start` 和 `padding-inline-end`。若给两值，则第一个用于 `padding-inline-start` 而第二个用于 `padding-inline-end`。

### 取值

`<length>`

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

`<percentage>`

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

描述
--

根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性的值对应于 `padding-top` 和 `padding-bottom`，或者 `padding-right` 和 `padding-left` 属性。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `padding-inline-start`: `0`
* `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 each of the properties of the shorthand:* `padding-inline-start`: as `length`
* `padding-inline-end`: as `length`
 |
| Animation type | a length |

形式语法
----
```

padding-inline =   
  <'padding-top'>{1,2}    
  
```

示例
--

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

#### HTML


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


#### CSS


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

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


#### 结果

规范
--

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

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

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`
border-inline-style
===================

CSS 属性 **`border-inline-style`** 定义了元素的逻辑行向的边框线型，并根据元素的书写模式、行内方向和文本朝向对应至实体边框线型。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top-style` 和 `border-bottom-style`，或者 `border-left-style` 和 `border-right-style` 属性。

尝试一下
----

另一方向的边框线型可用 `border-block-style` 设置，此属性会设置 `border-block-start-style` 和 `border-block-end-style`。

语法
--


```css
/\* 边框线型值 \*/
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: groove;

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

### 取值

`<'border-style'>`

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

形式定义
----

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

形式语法
----
```

border-inline-style =   
  <'border-top-style'>{1,2}    
  
```

示例
--

### 设置 border-inline-style

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-style: dashed;
}
```

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-style |

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

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

参见
--

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

CSS 动画模块（CSS Animation）可以让你通过使用关键帧对 CSS 属性的值进行动画处理，例如背景位置和变换。每个关键帧都描述了动画元素在动画序列中的某个特定时间应该如何呈现。你可以使用动画模块中的属性来控制动画的持续时间、重复次数、延迟启动等方面。

### 正在运行的动画

要查看下面方框中的动画，请点击复选框“Play the animation”或将光标悬停在方框上。当动画激活时，顶部的云会改变形状，雪花会落下，底部的雪量会上升。要暂停动画，请取消复选框或将你的光标从盒子上移开。

这个动画示例使用 `animation-iteration-count` 来使雪片反复落下，`animation-direction` 使云层来回移动，`animation-fill-mode` 根据云层的移动来提高雪层，以及`animation-play-state`来暂停动画。

要查看这个动画示例的源码，请查看 GitHub 仓库上的源码。

参考
--

### 属性

* `animation` 简写属性
* `animation-composition` (en-US) 
实验性
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
* `animation-timeline` (en-US)
### At 规则

* `@keyframes`
### 函数

* `scroll()` (en-US)
### 事件

所有动画，包括时间长度为 0 的动画，都会触发动画事件。

* `animationstart`
* `animationend`
* `animationcancel`
* `animationiteration`
### 接口

* Web Animations API
* `AnimationEvent` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
指南
--

使用 CSS 动画

关于如何使用 CSS 创建动画的分步教程，本文介绍每个相关的 CSS 属性和规则，并解释它们如何交互。

CSS 动画提示和技巧

帮助你充分利用 CSS 动画的技巧和窍门。

相关概念
----

* `will-change` CSS 属性
* `<easing-function>` 数据类型
* `prefers-reduced-motion` 媒体查询
* 术语贝塞尔曲线
规范
--

| Specification |
| --- |
| CSS Animations Level 2  |
| CSS Animations Level 1  |

参见
--

* 实验性
 CSS 滚动时间线 `scroll-timeline-name` (en-US) 和 `scroll-timeline-axis` (en-US) 属性，以及 `scroll-timeline` (en-US) 简写属性，创建与滚动容器的滚动偏移相关的动画。
* CSS 变换模块中的属性根据用户的动作触发动画。
* HTML `<canvas>` 元素与 canvas API 和 WebGL API一起用来绘制图形和动画。
* 所有动画相关元素的 `SVGAnimationElement` (en-US) 接口，包括 `SVGAnimateElement`、`SVGSetElement` (en-US)、`SVGAnimateColorElement` (en-US)、`SVGAnimateMotionElement` (en-US) 以及 `SVGAnimateTransformElement` (en-US)。
asin()
======

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

语法
--


```css
/\* 单个 <number> 值 \*/
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));

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

### 参数

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

`number`

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

### 返回值

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

* 若 `number` 小于 `-1` 或大于 `1`，则结果为 `NaN`。
* 若 `number` 为 `0⁻`，则结果为 `0⁻`。
### 形式语法
```

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

示例
--

### 旋转元素

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


#### 结果

规范
--

| 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()`
* `acos()`
* `atan()`
* `atan2()`
::after (:after)
================

CSS伪元素`::after`用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合`content`属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

尝试一下
----

语法
--


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


**备注：** CSS 引入 `::after` 表示法（两个冒号）是用来区分伪类和伪元素的。同时为了向后兼容，浏览器也支持前文介绍的 `:after`。

示例
--

### 简单用法

让我们创建两个类：一个无趣的和一个有趣的。我们可以在每个段尾添加伪元素来标记他们。


```html
<p class="boring-text">这是些无聊的文字</p>
<p>这是不无聊也不有趣的文字</p>
<p class="exciting-text">
  在 MDN 上做贡献简单又轻松。按右上角的编辑按钮添加新示例或改进旧示例！
</p>
```



```css
.exciting-text::after {
  content: "<- 让人兴兴兴奋！";
  color: green;
}

.boring-text::after {
  content: "<- 无聊！";
  color: red;
}
```


#### 结果

### 装饰用法

我们几乎可以用想要的任何方法给 `content` 属性里的文字和图片的加上样式。


```html
<span class="ribbon">Notice where the orange box is.</span>
```



```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "Look at this orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```


#### 结果

### 提示用法

接下来的示例展示了用`::after`伪元素，`attr()`CSS 表达式和一个自定义数据属性 `data-descr` 创建一个纯 CSS，词汇表提示工具。在单独页面看这个例子。


```html
<p>
  这是上面代码的实现<br />
  我们有一些
  <span data-descr="collection of words and punctuation">文字</span> 有一些
  <span data-descr="small popups which also hide again">提示</span>。<br />
  把鼠标放上去<span data-descr="not to be taken literally">看看</span>。
</p>
```



```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

参见
--

`::before`, `content`### 高级用法

getComputedStyle

getPropertyValue

setProperty
animation-direction
===================

**`animation-direction`** CSS 属性设置动画是应正向播放、反向播放还是在正向和反向之间交替播放。

尝试一下
----

使用 `animation` 的简写属性通常非常方便，可以一次性设置所有动画属性。

语法
--


```css
/\* 单个动画 \*/
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/\* 多个动画 \*/
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

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

### 值

`normal`

动画在每个循环中*正向*播放。换句话说，每次动画循环时，动画将重置为起始状态并重新开始。这是默认值。

`reverse`

动画在每个循环中*反向*播放。换句话说，每次动画循环时，动画将重置为结束状态并重新开始。动画步骤将反向执行，并且时间函数也将被反转。例如，`ease-in` 时间函数变为 `ease-out`。

`alternate`

动画在每个循环中正反交替播放，第一次迭代是*正向*播放。确定循环是奇数还是偶数的计数从 1 开始。

`alternate-reverse`

动画在每个循环中正反交替播放，第一次迭代是*反向*播放。确定循环是奇数还是偶数的计数从 1 开始。


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

形式定义
----

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

形式语法
----
```

animation-direction =   
  <single-animation-direction>#    
  
<single-animation-direction> =   
  normal             |  
  reverse            |  
  alternate          |  
  alternate-reverse    
  
```

示例
--

### 反转动画方向

#### HTML


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


#### CSS


```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-direction: reverse;
}

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


#### 结果

参见 CSS 动画以获取示例。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-direction |

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

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

参见
--

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

CSS **`text-decoration-skip`** 属性定义了元素哪些部分的内容需要被文本修饰所跳过。它可以控制所有该元素或该元素的祖先所绘制的文本修饰线。


```css
/\* 关键字 \*/
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/\* 使用多个关键字 \*/
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

/\* 全局值 \*/
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;
```


**备注：** `ink` 值被移动至 `text-decoration-skip-ink` (en-US) 属性。

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

语法
--

### 取值

`none`

没有任何内容被跳过。因此，文本修饰会为所有文本内容和行内元素进行绘制。

`objects`

拥有完整盒模型的原子行内元素会被跳过，例如图片和行内块元素。

`spaces`

所有的空格会被跳过，包括：所有的 Unicode 空白字符 和所有的分词符，以及任意相邻的 `letter-spacing` 或 `word-spacing`。

`leading-spaces`

除了只跳过开始的空格外，与 `spaces` 相同。

`trailing-spaces`

除了只跳过结尾的空格外，与 `spaces` 相同。

`edges`

 文本修饰的开始与结束会比原有的装饰范围向内收缩（例如半个线宽）。这样，相邻的元素的下划线就可以分开。（这对于中文很重要，因为在中文中，下划线也是一种形式的标点符号。）

 ![An example of "text-decoration-skip: edges;".](/zh-CN/docs/Web/CSS/text-decoration-skip/decoration-skip-edges.png)

`box-decoration`

文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰；修饰的盒不会渲染本身的盒修饰。

### 形式语法
```

text-decoration-skip =   
  none  |  
  auto    
  
```

示例
--

### HTML


```html
<p><em>Hey,</em> <em>grab a cup of coffee!</em></p>
```

### CSS


```css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skipping |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
mask-border-width
=================

**`mask-border-width`** CSS 属性设置元素的 mask border的宽度

语法
--


```css
/\* Keyword value \*/
mask-border-width: auto;

/\* <length> value \*/
mask-border-width: 1rem;

/\* <percentage> value \*/
mask-border-width: 25%;

/\* <number> value \*/
mask-border-width: 3;

/\* vertical | horizontal \*/
mask-border-width: 2em 3em;

/\* top | horizontal | bottom \*/
mask-border-width: 5% 15% 10%;

/\* top | right | bottom | left \*/
mask-border-width: 5% 2em 10% auto;

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


可以使用从下面的值列表中选择的一个，两个，三个或四个值来指定`mask-border-width`属性。

* 指定一个值时，即对应四条边的宽度；
* 指定两个值时，第一个值对应上下边框的宽度，第二个值对应左右边框的宽度；
* 指定三个值时，第一个值对应上边框的宽度，第二个值对应左右边框的宽度，第三个值对应底部边框的宽度；
* 指定四个值时，按顺时针方向，分别对应上，右，下，左边框的宽度。
### 值

`<length-percentage>`

`mask`边框宽度指定一个值或者百分比，设定百分比时，是相对于`mask`的长度和宽度。不能为负数。

<number>

mask 边框宽度为元素`border-width`的倍数。不能为负数。

`auto`

使`mask-border`的宽度等于相应`mask-border-slice`的固有宽度或高度（以适用者为准），如果图像没有所需的固有尺寸，则使用相应的边框宽度。

### Formal syntax
```

mask-border-width =   
  [ <length-percentage> | <number> | auto ]{1,4}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| Percentages | relative to width/height of the mask border image area |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |

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

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