recursal/MDN huggingface dataset:
:lang()
=======

**`:lang()`** CSS 伪类基于元素语言来匹配页面元素。

尝试一下
----

**备注：** 在 HTML 中，语言是通过 `lang` 属性和 `<meta>` 元素的组合来决定的，也可能是通过协议的信息来确定（例如 HTTP 标头）。对于其他文档类型，也可能存在其他用于确定语言的方法。

语法
--

### 形式语法


```css
:lang(<language-code>) {
  /\* ... \*/
}
```

### 参数

`<language-code>`

`<string>` 代表了你想定位的语言。可接受的值是 HTML 规范中指定的值。

示例
--

在这个例子中，`:lang()` 伪类使用子组合器来匹配引用元素 (`<q>`) 的父元素。需要注意的是，此处演示的方法并不是唯一的，最好的方法需要依据文档类型来确定。还需要注意的是，Unicode 值用于指定一些特殊字符的引用。

### HTML


```html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>
```

### CSS


```css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}
```

### 结果

规范
--

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

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

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

参见
--

* 语言相关伪类：`:lang`、`:dir`
* HTML `lang` 属性
* HTML `translate` 属性
* RFC 5646: 用于标识语言的标签（也称为 BCP 47）
counter-increment
=================

概要
--

`counter-increment`属性用于将CSS Counters (en-US)的值增加给定值。可以使用 `counter-reset` 属性重置计数器的值。

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

语法
--


```css
/\* Increment counter-name by 1 \*/
counter-increment: counter-name;

/\* Decrement counter-name by 1 \*/
counter-increment: counter-name -1;

/\* Increment counter1 by 1, and decrement counter2 by 4 \*/
counter-increment: counter 1 counter2 -4;

/\* Do not increment/decrement anything: used to hide less specific values \*/
counter-increment: none;

/\* Global values \*/
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;
```

### 可选值

`<custom-ident>`

递增的计数器的名称。该标识符由不区分大小写的字母 a 到 z，数字 0 到 9，下划线（\_）和/或短划线（ - ）的组合组成。第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号。）此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是 none，unset，initial 或 inherit。

`<integer>`

计数器的值。如果没有给出，默认为 1。

`none`

不得增加计数器。用作默认值，或取消更具体规则的增量。

你可以根据需要指定要递增的计数器，每个计数器用空格分隔。

### 语法形式
```

counter-increment =   
  [ <counter-name> <integer>? ]+  |  
  none                              
  
```

示例
--


```css
h1 {
  counter-increment: chapter section 2 page;
  /\* Increases the value of the chapter and page counters by 1
 and the section counter by 2. \*/
}
```

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # increment-set |

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

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

参考
--

* CSS Counters (en-US), `counter-reset`
list-style
==========

**`list-style`** CSS 属性是一个简写对属性集合，包括`list-style-type`, `list-style-image`, 和 `list-style-position`。

概要
--

CSS list-style 属性是设置`list-style-type`, `list-style-image` 和 `list-style-position` 的简写属性。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `list-style-type`: `disc`
* `list-style-position`: `outside`
* `list-style-image`: `none`
 |
| 适用元素 | list items |
| 是否是继承属性 | yes |
| 计算值 | as each of the properties of the shorthand:* `list-style-image`: The keyword `none` or the computed <image>
* `list-style-position`: as specified
* `list-style-type`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `list-style-image`: discrete
* `list-style-position`: discrete
* `list-style-type`: discrete
 |

语法
--
```

Formal syntax: 
```
list-style =   
  <'list-style-position'>  ||  
  <'list-style-image'>     ||  
  <'list-style-type'>        
  
```


```
### 值

以任何顺序接受一个，二个或者三个关键词

`<'list-style-type'>`

参看 `list-style-type`

`<'list-style-image'>`

参看 `list-style-image`

`<'list-style-position'>`

参看 `list-style-position`

示例
--

### HTML


```html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>
```

### CSS


```css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}
```

### Result

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-property |

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

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

另参见
---

* `list-style-type`, `list-style-image`, `list-style-position`
grid-auto-flow
==============

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-auto-flow`** 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

尝试一下
----

语法
--


```css
/\* Keyword values \*/
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/\* Global values \*/
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;
```


此属性有两种形式：

* 单个关键字：`row`、`column`，或 `dense` 中的一个。
* 两个关键字：`row dense` 或 `column dense`。
### 取值

`row`

该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定 `row` 也没有 `column`，则默认为 `row`。

`column`

该关键字指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。

`dense`

该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。

### 正式语法
```

grid-auto-flow =   
  [ row | column ]  ||  
  dense               
  
```

示例
--

### HTML


```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()" />
<label for="dense">dense</label>
```

### CSS


```css
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column; /\* or 'row', 'row dense', 'column dense' \*/
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}
```


```
function changeGridAutoFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("direction");
  var dense = document.getElementById("dense");
  var gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}
```

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |

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

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

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

参见
--

* Related CSS properties: `grid-auto-rows`, `grid-auto-columns`, `grid`
* Grid Layout Guide: *Auto-placement in grid layout*
* Video tutorial: *Introducing Grid auto-placement and order*
border-image
============

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image`** CSS 属性允许在元素的边框上绘制图像`。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉``border-style` 属性所设置的边框样式。虽然规范要求使用 `border-image 时`边框样式必须存在，但一些浏览器可能没有实现这一点。

特别注意，若 `border-image-source`（此值可用 border-image-source 或 border-image 简写设置) 的值为 none 或者图片不能显示，则将应用 border-style。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-image-source`: `none`
* `border-image-slice`: `100%`
* `border-image-width`: `1`
* `border-image-outset`: `0`
* `border-image-repeat`: `stretch`
 |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `border-image-slice`: refer to the size of the border image
* `border-image-width`: refer to the width or height of the border image area
 |
| 计算值 | as each of the properties of the shorthand:* `border-image-outset`: as specified, but with relative lengths converted into absolute lengths
* `border-image-repeat`: as specified
* `border-image-slice`: one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
* `border-image-source`: `none` or the image with its URI made absolute
* `border-image-width`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `border-image-outset`: by computed value type
* `border-image-repeat`: discrete
* `border-image-slice`: by computed value type
* `border-image-source`: discrete
* `border-image-width`: by computed value type
 |

语法
--


```css
/\* border-image: image-source image-height image-width image-repeat \*/
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
```

### 值

参考各属性对应的值。

### 正式语法
```

border-image =   
  <'border-image-source'>                             ||  
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||  
  <'border-image-repeat'>                               
  
```

示例
--

### 位图

#### HTML 内容


```html
<div id="bitmap">The image is stretched to fill the area.</div>
```


#### CSS 内容


```css
#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("border.png") 30;
}
```

### 渐变

#### HTML 内容


```html
<div id="gradient">The image is stretched to fill the area.</div>
```


#### CSS 内容


```css
#gradient {
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}
```

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:first-of-type
==============

CSS 伪类 **`:first-of-type`** 表示一组兄弟元素中其类型的第一个元素。

尝试一下
----

语法
--


```css
:first-of-type {
  /\* ... \*/
}
```

示例
--

### 装饰第一个段落

#### HTML


```html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 1</p>
```


#### CSS


```css
p:first-of-type {
  color: red;
  font-style: italic;
}
```


#### 结果

### 嵌套元素

下面这个例子展示了如何选中多层嵌套元素。注意当不存在简单选择器时，通配符（`*`）是默认应用的。

#### HTML


```html
<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`.</div>
</article>
```


#### CSS


```css
article :first-of-type {
  background-color: pink;
}
```


#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

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

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

参见
--

* `:first-child`, `:last-of-type`, `:nth-of-type`
padding-right
=============

CSS 属性 **padding-right** 是指一个元素在内边距区域（padding area）中右边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。


```css
/\* <length> values \*/
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/\* <percentage> value \*/
padding-right: 10%;

/\* Global values \*/
padding-right: inherit;
padding-right: initial;
padding-right: unset;
```


|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

Syntax
------

### Values

`<length>`

当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。

`<percentage>`

当内边距（padding）是一个百分比的时候，百分比是和本身包含的元素的宽度有关的，同样一定不能为负数。

### Formal syntax
```

padding-right =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------


```css
.content {
  padding-right: 5%;
}
.sidebox {
  padding-right: 10px;
}
```

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

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

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

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

See also
--------

* CSS Box Model
* The `padding` shorthand property can be used to set paddings on all four sides of an element with a single declaration: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
column-gap
==========

CSS **`column-gap`** 属性用来设置元素列之间的间隔（gutter）大小。

尝试一下
----

`column-gap` 一开始是 Multi-column 布局下的特有属性，后来在其他布局中也使用这个属性。如 CSS 盒子对齐中的表述，该属性已经可以在 Multi-column（多列布局）、Flexible Box（弹性盒子）以及 Grid layout（网格布局）中使用。

语法
--


```css
/\* Keyword value \*/
column-gap: normal;

/\* <length> values \*/
column-gap: 3px;
column-gap: 2.5em;

/\* <percentage> value \*/
column-gap: 3%;

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


`column-gap` 属性可以用以下值来表示。

### 取值

`normal`

表示列之间的间隔宽度。在 `多列布局` 时默认间隔为 `1em`，其他类型布局默认间隔为 0。

`<length>`

用 `<length>` 来定义列之间的间隔大小。而且 `<length>` 值必须是非负数的。

`<percentage>`

用 `<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(); |

形式语法
----
```

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

示例
--

### Flex 布局

#### HTML


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


#### CSS


```css
#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

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


#### 结果

### Grid 布局

#### HTML


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


#### CSS


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

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


#### 结果

### Multi-column 布局

#### HTML


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


#### CSS


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


#### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |
| CSS Grid Layout Module Level 2 # gutters |
| CSS Multi-column Layout Module Level 1 # column-gap |

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

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

参见
--

* 相关 CSS 属性：`row-gap`、`gap`
* 网格布局指南：*网格布局基本概念 - 网格间距*
* Multi-column 布局指南：*Styling Columns*
:paused
=======

**`:paused`** CSS 伪类选择器表示一个处于“暂停”状态（即非“播放”状态）的可播放的元素，如 `<audio>` 或 `<video>`。

如果用户明确将资源暂停，或者资源处于非激活状态或其他非播放状态，如“已加载但尚未激活”，则该资源将被视为已暂停。

语法
--


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

示例
--

### CSS


```css
:paused {
  border: 5px solid orange;
}
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # selectordef-paused |

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

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

参见
--

* `:playing`
At 规则
=====

**At 规则**是一个 CSS 语句，用来指示 CSS 如何运行。以 at 符号开头，'`@`'（`U+0040 COMMERCIAL AT`），后跟一个标识符，并包括直到下一个分号的所有内容，'`;`'（`U+003B SEMICOLON`），或下一个 CSS 块，以先到者为准。

语法
--

### 规则


```css
/\* 一般结构 \*/
@identifier (RULE);

/\* 示例：通知浏览器使用 UTF-8 字符集 \*/
@charset "utf-8";
```


下面是一些 at 规则，由它们的标示符指定，每种规则都有不同的语法：

* `@charset`——定义样式表使用的字符集。
* `@import`——告诉 CSS 引擎引入一个外部样式表。
* `@namespace`——告诉 CSS 引擎必须考虑 XML 命名空间。
### 嵌套


```css
@identifier (RULE) {
}
```


嵌套 at 规则，是嵌套语句的子集，不仅可以作为样式表里的一个语句，也可以用在条件规则组里：

* `@media`——如果满足媒介查询的条件则条件规则组里的规则生效。
* `@supports`——如果满足给定条件则条件规则组里的规则生效。
实验性
* `@document`——如果文档样式表满足给定条件则条件规则组里的规则生效。*（推迟至 CSS Level 4 规范）*
* `@page`——描述打印文档时布局的变化。
* `@font-face`——描述将下载的外部的字体。
实验性
* `@keyframes`——描述 CSS 动画的中间步骤。
实验性
* `@counter-style`——定义不属于预定义样式集的特定计数器样式。*（在候选推荐阶段，仅在 Gecko 中实现）*
* `@font-feature-values`（加上 `@swash`、`@ornaments`、`@annotation`、`@stylistic`、`@styleset` 和 `@character-variant`）——在 `font-variant-alternates` 中定义通用名称，以便在 OpenType 中以不同方式激活功能。*（在候选推荐阶段，仅在 Gecko 中实现）*
* `@property` 
实验性
——描述自定义属性和变量。*（目前处于工作草案阶段）*
* `@layer`——声明一个级联层，并在有多个级联层时定义优先顺序。
条件规则组
-----

就像属性值那样，每条 at 规则都有不同的语法。不过一些 @规则可以归为一个特殊的分类：**条件规则组**。这些语句使用相同的语法。它们都可以包括 *嵌套语句*——*规则集*或者是*嵌套 at 规则*。它们都表达：它们所指的条件 (类型不同) 总等效于 **true** 或者 **false**，如果为 **true** 那么它们之中的语句生效。

条件规则组由 CSS Conditionals Level 3 定义：

* `@media`
* `@supports`
* `@document`*（推迟至 CSS Level 4 规范）*

既然条件规则组可以嵌套语句，那么嵌套层级不定。

使用 CSS 嵌套来嵌套 @layer
-------------------

级联层可以嵌套以创建嵌套层。它们用 `.`（点）连接。这也可以使用 CSS 嵌套 (en-US)来实现。

索引
--

* `@charset`
* `@color-profile` (en-US)
* `@container` (en-US)
* `@counter-style`
* `@document` 
已弃用
* `@font-face`
* `@font-feature-values`
* `@font-palette-values` (en-US)
* `@import`
* `@keyframes`
* `@layer`
* `@media`
* `@namespace`
* `@page`
* `@property` 
实验性
* `@supports`
规范
--

| Specification |
| --- |
| CSS Conditional Rules Module Level 3  |
| Compatibility Standard # css-at-rules |

参见
--

* CSS 关键概念
    + CSS 语法
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距重叠
    + 值
        - 初始值
        - 计算值
        - 应用值
        - 实际值
    + 值定义语法
    + 简写属性
    + 可替换元素
    + CSS 嵌套模块 (en-US)
transition-property
===================

**`transition-property`** 指定应用过渡属性的名称。

尝试一下
----

如果指定简写属性（比如 `background`），那么其完整版中所有可以动画的属性都会被应用过渡。

语法
--


```css
/\* Keyword values \*/
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property:
  all,
  -moz-specific,
  sliding;

/\* Global values \*/
transition-property: inherit;
transition-property: initial;
transition-property: unset;
```

### 取值

`none`

没有过渡动画。

`all`

所有可被动画的属性都表现出过渡动画。

`IDENT`

属性名称。由小写字母 `a` 到 `z`，数字 `0` 到 `9`，下划线（`_`）和破折号（`-`）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

形式定义
----

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

### 形式语法
```

transition-property =   
  none                           |  
  <single-transition-property>#    
  
<single-transition-property> =   
  all             |  
  <custom-ident>    
  
```

示例
--

在 CSS 过渡中有几个示例可以参考。

规范
--

| Specification |
| --- |
| CSS Transitions # transition-property-property |

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

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

参见
--

* 使用 CSS 过渡
* `TransitionEvent`
overscroll-behavior
===================

**`overscroll-behavior`** CSS 属性是 `overscroll-behavior-x` 和 `overscroll-behavior-y` 属性的合并写法，让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。


```css
/\* 关键字的值 \*/
overscroll-behavior: auto; /\* 默认 \*/
overscroll-behavior: contain;
overscroll-behavior: none;

/\* 使用 2 个值 \*/
overscroll-behavior: auto contain;

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


默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

在某些情况下我们不想要这些表现，使用 `overscroll-behavior` 来去除不需要的滚动链，以及类似 QQ 一类的应用下拉刷新效果。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | non-replaced block-level elements and non-replaced inline-block elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `overscroll-behavior-x`: as specified
* `overscroll-behavior-y`: as specified
 |
| Animation type | discrete |

语法
--

`overscroll-behavior` 属性可以使用下面列表中的一或两个关键字指定。

使用两个关键字来指定 `overscroll-behavior` 分别在 `x` 和 `y` 轴的值。只用一个值的话，x 和 y 轴都被指定为该值。

### 值

`auto`

默认效果

`contain`

设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。

`none`

临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止。

### Formal syntax
```

overscroll-behavior =   
  [ contain | none | auto ]{1,2}    
  
```

Examples
--------

在我们 滚动行为示例 (也可以看该 源代码) 我们展现一个虚构的联系人全页列表，和一个包含聊天窗口的对话框。

![](/zh-CN/docs/Web/CSS/overscroll-behavior/example.png)

正常情况下在聊天窗口边界之前都可以使用滚动条，但是当滚动到边界之后，其后的联系人窗口也将开始滚动，这并不是我们满意的效果。可以在聊天窗口中使用 `overscroll-behavior-y` (`overscroll-behavior` 也可以) 就像如下：


```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```


我们也希望移除标准的滚动至顶部或底部的滚动特效（例如 Android 上的 Chrome 当滚动超过顶部边界时会刷新页面），可以通过在 `<body>` 元素设置 `overscroll-behavior: none` 来阻止这个行为：


```css
body {
  margin: 0;
  overscroll-behavior: none;
}
```

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

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-properties |

在 CSSWG 发布自己的草案之前，该规范只能在它的 WICG Github Repository 中找到。

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

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

See also
--------

* Take control of your scroll: customizing pull-to-refresh and overflow effects
* `-ms-scroll-chaining`