recursal/MDN huggingface dataset:
@counter-style
==============

概要
--

`@counter-style` 是一个 CSS at-rule ，它让开发者可以自定义 counter 的样式。一个 `@counter-style` 规则定义了如何把一个计数器的值转化为字符串表示。

最初版的 CSS 定义了一系列很好用的计数器样式，尽管近几年又添加了很多样式，但是这种限制方式被证明已经不能满足全球化的排版了。`@counter-style` 规则用一种开放的方式弥补了这一缺点，在预定义的样式不能满足需求时，它可以使开发者自定义他们自己的计数器样式。

语法
--
```

@counter-style <counter-style-name> {
    system: <counter system>
    symbols: <counter symbols>
    additive-symbols: <additive-symbols>
    negative: <negative symbol>
    prefix: <prefix>
    suffix: <suffix>
    range: <range>
    pad: <padding>
    speak-as: <speak-as>
    fallback: <counter-style-name>
}
```

### 描述

每个 `@counter-style` 由一个名称标识并具有一组描述符

`system` (en-US)

指定一个算法，用于将计数器的整数值转化为字符串表示。

`negative` (en-US)

指定一个符号，当计数器表示的值为负的时候，把这个符号加在值的前面或后面

`prefix` (en-US)

指定一个符号，加在标记表示符的前面。前缀在最后阶段才会被加上，所以在计数器的最终表示中，它在`negative` (en-US)前。

`suffix` (en-US)

与`prefix` (en-US)类似，suffix 指定一个符号，加在标记表示符的后面。

`range` (en-US)

指定一个 counter-style 生效的范围，如果计数器的值不再这个范围内，那么自定义的 counter-style 不会生效，counter-style 会后退到`fallback` (en-US)的 style。

`pad` (en-US)

在你想要给标记表示符最小值时使用。比如说，你想要计数器从 01 开始，经过 02，03，04，那么这时可以使用 pad 了。对于大于 pad 指定值的表示符，标记会恢复为 normal。

`fallback` (en-US)

定义一个备用的系统，当自定义的系统不能使用或者计数器的值超过了定义的范围时使用。如果备用系统也不能表示计数器的值，那么备用系统的备用系统（如果有的话）将会启用。如果没有指定备用系统，或者备用系统链不能够正确表示一个值，那么最终会降为十进制样式表示。

`symbols` (en-US)

定义一个符号，用于标记的表示。符号可以包含字符串，图片或自定义的识别码。这个符号怎样构建标记呢？这依赖于 system 描述符里面所定义的算法。举个例子，如果 system 的值是 fixed，那么 symbols 属性指定的固定的 N 个符号，将被用来表示计数器的前 N 个值。用完了前 N 个符号后，列表里剩下的值将使用 fallback 定义的样式来表示。

下面的 @counter-style 规则使用图片而不是字符标记。


```css
@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}
```


`additive-symbols` (en-US)

尽管 symbols 属性中指定的符号可以被 system 中定义的大部分算法所使用，但是一些 system 属性的值，比如 additive，依赖于本描述符所描述的加性元组。Each additive tuple consists of a counter symbol and a non negative integer weight. 每个加性元组包含一个可数的符号和一个非负证书的权重。The additive tuples must be specified in the descending order of their weights.

`speak-as` (en-US)

定义如何在语音识别器中读出计数器样式，比如屏幕阅读器。例如基于该描述符的值，标记符号的值可以作为有序列表的数字或者字幕作为无序列表的音频提示读出。

例子
--


```css
@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
```


上面的 counter style 规则在列表中可以如下使用：


```css
.items {
  list-style: circled-alpha;
}
```


会产生如下列表：

 Ⓐ One
 Ⓑ Two
 Ⓒ Three
 Ⓓ Four
 Ⓔ FIve
 ....
 ...
 Ⓨ Twenty Five
 Ⓩ Twenty Six

 27 Twenty Seven
 28 Twenty Eight
 29 Twenty Nine
 30 Thirty

查看更多例子 demo page.

规范
--

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-counter-style-rule |

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

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

相关阅读
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()` (en-US), the functional notation creating anonymous counter styles.
<display-legacy>
================

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 2 为 `display` 属性使用单关键字的语法，对于相同布局模式的块级和行级变体要求使用各自的关键字。本文详述这些关键字。

语法
--

有效的 `<display-legacy>` 值：

`inline-block`

元素将生成块级元素盒，将被视为单个行级盒（表现为替换元素）与周围内容构成内容流。

等同于 `inline flow-root`。

`inline-table`

`inline-table` 在 HTML 中没有直接的对应关系。此值表现为 HTML `<table>` 元素，但是为行级盒而非块级盒。表格盒内部为块级上下文。

等同于 `inline table`。

`inline-flex`

元素表现为行级元素，并按弹性盒模型对其内容进行布局。

等同于 `inline flex`。

`inline-grid`

元素表现为行级元素，并按网格模型对其内容进行布局。

等同于 `inline grid`。

### 形式语法
```

<display-legacy> =   
  inline-block  |  
  inline-table  |  
  inline-flex   |  
  inline-grid     
  
```

示例
--

在以下示例中，我们将用旧式关键字 inline-flex 创建行级弹性容器。

### HTML


```html
<div class="container">
  <div>弹性元素</div>
  <div>弹性元素</div>
</div>

非弹性元素
```

### CSS


```css
.container {
  display: inline-flex;
}
```

### 结果

在新的语法中，将使用两个值创建行级弹性容器，inline 用于外侧显示类型，flex 用于内侧显示类型。


```css
.container {
  display: inline flex;
}
```

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

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

参见
--

* `display`
    + `<display-outside>`
    + `<display-inside>` (en-US)
    + `<display-listitem>` (en-US)
    + `<display-internal>`
    + `<display-box>`
border-start-start-radius
=========================

CSS 属性 **`border-start-start-radius`** 定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径。此属性便于构建适应各种文本朝向和书写模式的样式。

尝试一下
----

此属性影响元素块首与行首之间的拐角。例如在 `horizontal-tb` 书写模式和 `ltr` 行内方向下，此属性对应于 `border-top-left-radius` 属性。

语法
--


```css
/\* 长度值 \*/
/\* 使用一个值所得拐角为圆形 \*/
border-start-start-radius: 10px;
border-start-start-radius: 1em;

/\* 使用两个值所得拐角为椭圆形 \*/
border-start-start-radius: 1em 2em;

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

### 取值

`<length-percentage>`

表示圆的半径或者椭圆半长轴和半短轴的尺寸。表示绝对尺寸可用 CSS `<length>` 数据类型所允许的任意单位。水平轴的百分比参照盒的宽度，竖直轴的百分比参照盒的高度。负值无效。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the corresponding dimension of the border box |
| 计算值 | two absolute `length`s or `percentage`s |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

border-start-start-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 竖排文本的边框半径

#### HTML


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


#### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-start-radius: 10px;
}
```


#### 结果

规范
--

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

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`border-top-left-radius`
* `writing-mode`、`direction`、`text-orientation`
gap (grid-gap)
==============

CSS **`gap`** 属性是用来设置网格行与列之间的间隙（gutters），该属性是 `row-gap` 和 `column-gap` 的简写形式。

尝试一下
----

语法
--


```css
/\* One <length> value \*/
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/\* One <percentage> value \*/
gap: 16%;
gap: 100%;

/\* Two <length> values \*/
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/\* One or two <percentage> values \*/
gap: 16% 100%;
gap: 21px 82%;

/\* calc() values \*/
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

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


该属性用来表示 `<'row-gap'>` 和 `<'column-gap'>` 的值（`<'column-gap'>` 是可选的）。假如 `<'column-gap'>` 缺失的话，则会被设置成跟 `<'row-gap'>` 一样的的值。

`<'row-gap'>` 和 `<'column-gap'>` 都可以用 `<length>` 或者 `<percentage>` 来表示。

### 值

`<length>`

网格线之间的间隙宽度。

`<percentage>`

网格线直接的间隙宽度，相对网格容器的百分比。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `row-gap`: `normal`
* `column-gap`: `normal`
 |
| 适用元素 | multi-column elements, flex containers, grid containers |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `row-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `column-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | as each of the properties of the shorthand:* `row-gap`: a length, percentage or calc();
* `column-gap`: a length, percentage or calc();
 |

形式语法
----
```

gap =   
  <'row-gap'> <'column-gap'>?    
  
```

示例
--

### Flex 布局

#### HTML


```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```


#### 结果

### Grid 布局

#### HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```


#### 结果

### 多列布局

#### HTML


```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>
```


#### CSS


```css
.content-box {
  column-count: 3;
  gap: 40px;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # gap-shorthand |

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

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

参见
--

* 相关 CSS 属性：`row-gap`、`column-gap`
* 网格布局指南：*网格布局基本概念 - 网格间距*
font-variant-numeric
====================

**`font-variant-numeric`** CSS 属性控制数字、分数和序号标记的替代字形的使用。

尝试一下
----

语法
--


```css
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: oldstyle-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: proportional-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: tabular-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: diagonal-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: stacked-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: oldstyle-nums stacked-fractions;

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


此属性以以下两种方式之一指定：

* 关键字值 `normal`
* 或下列的一个或多个其他值，按任意顺序排列并以空格分隔。
### 值

`normal`

下列特性均不启用。

`ordinal`

启用序数形式显示。对序号标记强制启用特殊字形，如英文中的 1st，2nd，3rd，4th，意大利文中的 1a。等同于 OpenType 特性 `ordn`。

`slashed-zero`

启用区分零显示。强制使用带有斜杠的 0；常用于区分 O 和 0。等同于 OpenType 特性 zero。

*<numeric-figure-values>*

下列值用于控制数字样式，可用值如下：

* `lining-nums` 启用内衬数字显示。使数字全部对齐到基线。等同于 OpenType 特性 `lnum`。
* `oldstyle-nums` 启用旧式数字显示。部分数字如 3、4、7、9 会有下沉。等同于 OpenType 特性 `onum`。

*<numeric-spacing-values>*

下列值用于控制数字宽度，可用值如下：

* `proportional-nums` 启用比例数字显示。使数字变成基于字形本身形状下的特定宽度表现。等同于 OpenType 特性 `pnum`。
* `tabular-nums` 启用表格数字显示。使数字等宽，易于像表格那样对齐。等同于 OpenType 特性 `tnum`。

*<numeric-fraction-values>*

下列值用于控制分数字形，可用值如下：

* `diagonal-fractions` 启用斜角分数显示。使分子和分母变成像下标字，并用变长的斜线分隔。等同于 OpenType 特性 frac。
* `stacked-fractions` 启用标准分数显示。使分子在上，分母在下，并用水平线分隔。等同于 OpenType 特性 afrc。

形式定义
----

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

形式语法
----
```

font-variant-numeric =   
  normal                                              |  
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]    
  
<numeric-figure-values> =   
  lining-nums    |  
  oldstyle-nums    
  
<numeric-spacing-values> =   
  proportional-nums  |  
  tabular-nums         
  
<numeric-fraction-values> =   
  diagonal-fractions  |  
  stacked-fractions     
  
```

示例
--

### 设置序数形式

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
row-gap (grid-row-gap)
======================

**`row-gap`** 该 CSS 属性用来设置行元素之间的间隙（gutter）大小。

尝试一下
----

语法
--


```css
/\* <length> values \*/
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/\* <percentage> value \*/
row-gap: 10%;

/\* Global values \*/
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;
```

### 值

`<length-percentage>`

表示行之间的间隔宽度。`<percentage>` 表示相对栅格容器的百分比。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | multi-column elements, flex containers, grid containers |
| 是否是继承属性 | 否 |
| Percentages | refer to corresponding dimension of the content area |
| 计算值 | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

row-gap =   
  normal                     |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### Flex 布局

#### HTML


```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```


#### 结果

### Grid 布局

#### HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |

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

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

参见
--

* 相关 CSS 属性：`column-gap`、`gap`
* 网格布局指南：*网格布局基本概念 - 网格间距*
dimension
=========

**`<dimension>`** CSS 数据类型是一个带有单位的`<number>`，例如：`10px`

CSS 使用度量值来描述距离 (`<length>`)，时间 (`<time>`)，频率 (`<frequency>`)，分辨率 (`<resolution>`) 以及其他量。

格式
--

`<dimension>` 的格式是一个`<number>`后紧随一个是标记符的单位，单位大小写不敏感。

Examples
--------

### 合法的度量值
```

12px      12 像素
1rem      1 rem
1.2pt     1.2 点
2200ms    2200 毫秒
200hz     200 赫兹
200Hz     200 赫兹 (单位大小写不敏感)
```

### 非法的度量值
```

12 px       单位必须紧随数字，不能有空格
12"px"      单位是标识符，不能加引号
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # dimensions |

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

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

Summary
-------

![The effect of the CSS margin-bottom property on the element box](/zh-CN/docs/Web/CSS/margin-bottom/margin-bottom_explained.svg)

CSS 的 `margin-bottom` 属性用于设置元素的底部外边距，允许设置负数值。一个正数值将让它相对于正常流与邻近块更远，而负数值将使得更近。

该属性对于\*不可替代 (non-replaced 元素在规范中有概念，请自行搜索)\*的行级元素没有效果，比如： `<tt>` 或者 `<span>`.

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

语法
--


```css
/\* <length> values \*/
margin-bottom: 10px; /\* 一个绝对的长度值 \*/
margin-bottom: 1em; /\* A length relative to the text size \*/
margin-bottom: 5%; /\* A margin relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-bottom: auto;

/\* Global values \*/
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;
```

### 值

`<length>`

定义了一个确定的宽度值，参见 `<length>` 以了解更多可能的值。

`<percentage>`

`<percentage>` 始终与包含该元素的**容器宽度**有关。

`auto`

由浏览器自己选择一个合适的值。参见 `margin`。

### 形式语法
```

margin-bottom =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### HTML


```html
<div class="container">
  <div class="box0">Box 0</div>
  <div class="box1">Box 1</div>
  <div class="box2">Box one's negative margin pulls me up</div>
</div>
```

### CSS

用于设置 `div` 的 `margin-bottom` 和 `height` 的 CSS 代码


```css
.box0 {
  margin-bottom: 1em;
  height: 3em;
}
.box1 {
  margin-bottom: -1.5em;
  height: 4em;
}
.box2 {
  border: 1px dashed black;
  border-width: 1px 0;
  margin-bottom: 2em;
}
```


为了使 `margin` 产生的影响更明显，添加了一些 `container` 和 `div` 的样式定义


```css
.container {
  background-color: orange;
  width: 320px;
  border: 1px solid black;
}
div {
  width: 320px;
  background-color: gold;
}
```

规范
--

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

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

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

**`background-attachment`** CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

尝试一下
----

语法
--


```css
/\* 关键 属性值 \*/
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/\* 全局 属性值 \*/
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;
```

### 取值

`fixed`

此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

`local`

此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

`scroll`

此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。

### 标准语法
```

background-attachment =   
  <attachment>#    
  
<attachment> =   
  scroll  |  
  fixed   |  
  local     
  
```

例子
--

### 简单的例子

#### CSS 样式表


```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```


#### HTML 源码


```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```


#### 效果

### 多背景图支持

此属性支持多张背景图片。你可以用逗号分隔来为每一张背景图片指定不同的`<attachment>属性值。`每一张背景图片顺序对应相应的 attachment 属性。

#### CSS 样式表


```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```


#### HTML 源码


```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```


#### 效果

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-attachment |

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

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

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

参见
--

* 更多背景图 (en-US)
:valid
======

`:valid` CSS 伪类表示内容验证正确的`<input>` 或其他 `<form>` 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。


```css
/\* Selects any valid <input> \*/
input:valid {
  background-color: powderblue;
}
```


该伪类对于高亮正确字段是很有用的。

语法
--

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

参见 `:invalid`。

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

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

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

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

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

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

参见
--

* `:invalid`, `:required`, `:optional`
* Form data validation (en-US)
animation-iteration-count
=========================

**`animation-iteration-count`** CSS 属性设置动画序列在停止前应播放的次数

尝试一下
----

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

语法
--


```css
/\* 关键字值 \*/
animation-iteration-count: infinite;

/\* 数字值 \*/
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/\* 多个值 \*/
animation-iteration-count: 2, 0, infinite;

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


`animation-iteration-count` 属性可以指定一个或多个以逗号分隔的值。

### 值

`infinite`

无限循环播放动画。

``<number>``

动画重复的次数；默认为 `1`。你可以指定非整数值以播放动画循环的一部分：例如，`0.5` 将播放动画循环的一半。负值是无效的。


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

形式定义
----

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

### 形式语法
```

animation-iteration-count =   
  <single-animation-iteration-count>#    
  
<single-animation-iteration-count> =   
  infinite        |  
  <number [0,∞]>    
  
```

示例
--

### 设置迭代次数

该动画将会播放 10 次。

#### 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-iteration-count: 10;
}

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


#### 结果

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

参见 CSS 动画示例。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-iteration-count |

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

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`