::part() - CSS：层叠样式表

::part()
========

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
**`::part`** CSS 伪元素表示在阴影树中任何匹配 `part` 属性的元素。

```css
custom-element::part(foo) {
  /\* 样式作用于 `foo` 部分 \*/
}
```

语法
--

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

### HTML

```html
<template id="tabbed-custom-element">
  <style type="text/css">
 \*,
 ::before,
 ::after {
 box-sizing: border-box;
 padding: 1rem;
 }
 :host {
 display: flex;
 }
 </style>
  <div part="tab active">Tab 1</div>
  <div part="tab">Tab 2</div>
  <div part="tab">Tab 3</div>
</template>

<tabbed-custom-element></tabbed-custom-element>
```

### CSS

```css
tabbed-custom-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0d19;
  border-color: #0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0d33;
}

tabbed-custom-element::part(tab):focus {
  box-shadow:
    0 0 0 1px #0a84ff inset,
    0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}
```

### JavaScript

```js
let template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
  template.id,
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(template.content);
    }
  },
);
```

### 结果

规范
--

| Specification |
| --- |
| CSS Shadow Parts # part |

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

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

相关阅读
----

* `part` 属性 - 用于定义可以被 `::part()` 选取的选择器
* `exportparts` 属性 - 用于将阴影部分从嵌套的阴影树过渡到包含显影树的传递导出。
* Explainer: CSS Shadow ::part and ::theme


:where() - CSS：层叠样式表

:where()
========

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

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

* Learn more
* See full compatibility
* Report feedback
**`:where()`** CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

```css
/\* Selects any paragraph inside a header, main
 or footer element that is being hovered \*/
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/\* The above is equivalent to the following \*/
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}
```

`:where()` 和 `:is()` 的不同之处在于，`:where()` 的优先级总是为 0，但是 `:is()` 的优先级是由它的选择器列表中优先级最高的选择器决定的。

### 可容错选择器解析

规范将 `:is()` 和 `:where()` 定义为接受一个可容错选择器列表。

在 CSS 中使用选择器列表时，如果任何选择器无效，则整个列表被视为无效。当使用 `:is()` 或 `:where()` 而不是整个选择器列表时，如果某个选择器无法解析，则被视为无效，不正确或不受支持的选择器将被忽略，其他选择器将被使用。

```css
:is(:valid, :unsupported) {
  /\* … \*/
}
```

即使在不支持 `:unsupported` 的浏览器中，仍将正确解析 `:valid`，而：

```css
:valid,
:unsupported {
  /\* … \*/
}
```

在不支持 `:unsupported` 浏览器中即使它们支持 `:valid`，仍将忽略。

示例
--

### 比较 :where() 和 :is()

该示例展示了 `:where()` 是如何起作用的，并且也阐述了 `:where()` 和 `:is()` 的区别。

跟随以下 HTML：

```html
<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>
```

在这个有点人为的例子中，我们有两篇文章，每篇文章包含一个段落、一个侧边栏和一个页脚。它们由于使用标记子元素的不同而不同。

为了使选择它们内部的链接更简单，但仍然不同，我们*可以*使用 `:is()` 或 `:where()`，方式如下：

```css
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}
```

然而，我们以后想使用一个简单选择器覆盖页脚的链接应该怎么办？

```css
footer a {
  color: blue;
}
```

这个红色的链接不起作用，因为 `:is()` 中的选择器会计入整体选择器的优先级，并且类选择器的优先级高于元素选择器。

然而，`:where()` 中的选择器的优先级是 0，所以橘色的页脚链接将被我们的简单选择器覆盖。

**备注：** 你也可以在 GitHub 上找到这个示例；参见 is-where。

语法
--
```

:where( <complex-selector-list> )
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # zero-matches |

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

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

参见
--

* `:is()`
* 选择器列表
* Web component


right - CSS：层叠样式表

right
=====

**`right`** CSS 属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。

```css
/\* <length> values \*/
right: 3px;
right: 2.4em;

/\* <percentage>s of the width of the containing block \*/
right: 10%;

/\* Keyword value \*/
right: auto;

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

`right`的效果取决于元素的`position`属性：

* 当 `position` 设置为 `absolute` 或 `fixed` 时，`right` 属性指定了定位元素右外边距边界与其包含块右边界之间的偏移。
* 当 `position` 设置为 `relative` 时，`right` 属性指定了元素的右边界离开其正常位置的偏移。
* 当 `position` 设置为 `sticky` 时，如果元素在 viewport 里面，`right` 属性的效果和 position 为 `relative` 等同；如果元素在 viewport 外面，`right` 属性的效果和 position 为 `fixed` 等同。
* 当 `position` 设置为 `static` 时，`right` 属性无效。

当 `left` 和 right 同时指定时，元素的位置会被重复指定。当容器是从左到右时，`left` 的值会被优先设定；当容器是从右到左时，`right` 的值会被优先设定。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length, percentage or calc(); |

语法
--

### 取值

`<length>`

可以是负的，正的 或者 null `<length>` 表示：

* 对于**绝对定位的元素**，元素右外边距边界与其包含块右边界之间的偏移。
* 对于**相对定位定位的元素**，元素的右边界离开其正常位置的偏移。

`<percentage>`

代表元素包含块的宽度的百分比 `<percentage>`。

`auto`

这个关键字表示：

* 对于绝对定位元素，元素将忽略此属性而以 `left` 属性为准，如果此时设置 `width: auto`，将基于内容需要的宽度设置宽度；如果 `left` 也为 `auto` 的话，元素的水平位置就是它假如作为静态（即 static）元素时该在的位置。
* 对于相对定位元素，元素相对正常位置的偏移量将基于 `left` 属性；如果 `left` 也为 `auto` 的话，元素将不会有偏移。

`inherit`

这个关键字表示该值与其父元素（可能不是它的包含块）的计算值相同。对这个计算值的处理将和它原本为 `<length>`、`<percentage>` 或 `auto` 一样。

### 形式语法
```

right =
  auto                 |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

```css
#example\_3 {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#example\_4 {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}
```

```html
<div id="example\_3">Example 3</div>
<div id="example\_4">Example 4</div>
```

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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


font-synthesis - CSS：层叠样式表

font-synthesis
==============

**`font-synthesis`** CSS 属性控制浏览器可以合成（synthesize）哪些缺失的字体，粗体或斜体。

尝试一下
----

大多数标准西方字体包含斜体和粗体变体，但许多新颖（novelty）的字体不包括这些。用于中文、日文、韩文和其他语标文字（logographic script）的字体往往不含这些变体，同时，从默认字体中生成、合成这些变体可能会妨碍文本的易读性。在这些情况下，可能最好关闭浏览器默认的 font-synthesis 字体合成特性。

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

语法
--

此属性（的值）可采用下列任意一种形式：

* 关键词 `none`
* 关键词 `weight` 或 `style`
* 关键词 `weight` 和 `style`。
### 属性值

`none`

此关键词表示不合成粗体字型（typeface）或斜体字型。

`weight`

此关键词表示，如果需要的话，可以合成粗体字型。

`style`

此关键词表示，如果需要的话，可以合成斜体字型。

### 形式化语法
```

font-synthesis =
  none                                           |
  [ weight || style || small-caps || position ]

```

示例
--

### HTML

```html
<em class="syn">Synthesize me! 站直。</em>
<br />
<em class="no-syn">Don't synthesize me! 站直。</em>
```

### CSS

```css
em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight;
}
.no-syn {
  font-synthesis: none;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis |

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

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


min-inline-size - CSS：层叠样式表

min-inline-size
===============

CSS 属性 **`min-inline-size`** 根据元素的书写模式定义了元素区块的横向或纵向最小尺寸。根据 `writing-mode` 的值，此属性对应于 `min-width` 或 `min-height` 属性。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
min-inline-size: 100px;
min-inline-size: 5em;

/\* <percentage> 值 \*/
min-inline-size: 10%;

/\* 关键词值 \*/
min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content(20em);

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

若为纵向书写模式，则 `min-inline-size` 的值对应于元素的最小高度；否则对应于元素的最小宽度。与此相关的属性为 `min-block-size`，此属性定义了元素另一方向的尺度。

### 取值

`min-inline-size` 属性的取值与 `min-width` 和 `min-height` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | same as `width` and `height` |
| 是否是继承属性 | 否 |
| Percentages | inline-size of containing block |
| 计算值 | same as `min-width` and `min-height` |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

min-inline-size =
  <'min-width'>

```

示例
--

### 为竖排文本设置最小行向尺寸

#### HTML

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

#### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

参见
--

* 对应的实体属性：`min-width` 和 `min-height`
* `writing-mode`


grid-template-rows - CSS：层叠样式表

grid-template-rows
==================

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-template-rows` 该属性是基于 网格行 的维度，去定义网格线的名称和网格轨道的尺寸大小。

尝试一下
----

语法
--

```css
/\* Keyword value \*/
grid-template-rows: none;

/\* <track-list> values \*/
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);

/\* <auto-track-list> values \*/
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-rows:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/\* Global values \*/
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;
```

该属性可能包含如下值：

* 关键字 `none`
* 或者 `<track-list>` 值
* 或者 `<auto-track-list>` 值。
### 值

`none`

这个关键字表示不明确的网格。所有的行和其大小都将由`grid-auto-rows` 属性隐式的指定。

`<length>`

非负值的长度大小。

`<percentage>`

 非负值且相对于网格容器的 `<百分比>`。如果网格容器的尺寸大小依赖网格轨道的大小（比如 inline-grid），则百分比值将被视为`auto`。
 为了遵守网格的百分比，网格轨道本身定义的大小，将自动被调整为相对网格容器大小，并且是以最小量将网格轨道调整到最终的大小。

`<flex>`

非负值，用单位 `fr` 来定义网格轨道大小的弹性系数。每个定义了 `<flex>` 的网格轨道会按比例分配剩余的可用空间。当外层用一个 `minmax()` 表示时，它将是一个自动最小值 (即 `minmax(auto, <flex>)` ) 。

`max-content`

是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。

`min-content`

是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。

`minmax(min, max)`

是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。如果 max 值小于 min 值，则该值会被视为 min 值。最大值可以设置为网格轨道系数值`<flex>` ，但最小值则不行。

Note: 该规范在将来可能会允许设置最小值为 `flex` ，也会调整网格轨道算法 (track sizing algorithm) 计算出正确的大小。

`auto`

如果该网格轨道为最大时，该属性等同于 `<max-content>` ，为最小时，则等同于 `<min-content>` 。

Note: 网格轨道大小为 `auto` (且只有为 `auto` ) 时，才可以被属性`align-content` 和 `justify-content` 拉伸。

`fit-content( [ <length> | <percentage> ] )`

相当于公式 `min(max-content, max(auto, argument))`，类似于`auto` 的计算 (即 `minmax(auto, max-content)`)，除了网格轨道大小值是确定下来的，否则该值都大于 `auto` 的最小值。

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )`

表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复行的表达式。

### 正式语法
```

grid-template-rows =
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?

<track-list> =
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>?

<line-name-list> =
  [ <line-names> | <name-repeat> ]+

<line-names> =
  '[' <custom-ident>\* ']'

<track-size> =
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

<length-percentage> =
  <length>      |
  <percentage>

<fixed-breadth> =
  <length-percentage [0,∞]>

```

示例
--

### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

### 结果

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | grid containers |
| 是否是继承属性 | 否 |
| Percentages | refer to corresponding dimension of the content area |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

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

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

参见
--

* 相关 CSS 属性：`grid-template-columns`, `grid-template-areas`, `grid-template`
* 网格布局指南：*Basic concepts of grid layout - Grid Tracks*
* 视频教程：*Defining a Grid*


overflow - CSS：层叠样式表

overflow
========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`overflow`** 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。

尝试一下
----

构成的属性
-----

这个属性是以下 CSS 属性的简写：

* `overflow-x`
* `overflow-y`
语法
--

```css
/\* Keyword values \*/
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

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

从下面列表中指定一个或者两个关键字来作为 `overflow` 属性。如果指定两个关键字，第一个关键字用于 `overflow-x`，第二个关键字用于 `overflow-y`。否则，`overflow-x` 和 `overflow-y` 设置为相同的属性值。

### 值

`visible`

内容不能被裁减并且可能渲染到边距盒（padding）的外部。

`hidden`

如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容*可以*以编程的方式滚动（例如，通过设置 `scrollLeft` 等属性的值或 `scrollTo()` 方法）, 因此该元素仍然是一个滚动的容器。

`clip`

类似于 `hidden`，内容将以元素的边距（padding）盒进行裁剪。`clip` 和 `hidden` 之间的区别是 `clip` 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 `display: flow-root` 来这样做。

`scroll`

如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。

`auto`

取决于用户代理。如果内容适应边距（padding）盒，它看起来与 `visible` 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。

`overlay`
已弃用

行为与 `auto` 相同，但是滚动条绘制在内容之上，而不是占据空间。

#### Mozilla 扩展

`-moz-scrollbars-none`
已弃用

请使用 `overflow: hidden` 代替。

`-moz-scrollbars-horizontal`
已弃用

请使用 ``overflow-x`: scroll` 和 ``overflow-y`: hidden`，或使用 `overflow: scroll hidden` 代替。

`-moz-scrollbars-vertical`
已弃用

请使用 ``overflow-x`: hidden` 和 ``overflow-y`: scroll`，或使用 `overflow: hidden scroll` 代替。

`-moz-hidden-unscrollable`
已弃用

请使用 `overflow: clip` 代替。

在 Firefox 63 中：`-moz-scrollbars-none`、`-moz-scrollbars-horizontal` 和 `-moz-scrollbars-vertical` 位于特性首选项中。即需要在 about:config 中，将 `layout.css.overflow.moz-scrollbars.enabled` 设置为 `true`。

描述
--

overflow 选项包括裁减、显示滚动条，或者显示从容器流向周围区域的内容。

指定 `visible`（默认）或 `clip` 以外的值，会创建一个新的块级格式化上下文。由于技术原因，这是必要的——如果浮动包含滚动元素，它将在每个滚动步骤后强制重新包装内容，从而导致一个缓慢的滚动体验。

为使 `overflow` 具有效果，块级水平的容器必须有一个设定的高度（`height` 或 `max-height`）或 `white-space` 设置为 `nowrap`。

设置一个轴为 `visible`（默认值），而设置另一个轴为*不同的*值时，`visible` 的行为会像 `auto` 一样。

JavaScript 的 `Element.scrollTop` 属性可用于滚动 HTML 元素，即使当 `overflow` 设置为 `hidden` 时。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `visible` |
| 适用元素 | Block-containers, flex containers, and grid containers |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `overflow-x`: as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip
* `overflow-y`: as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip
 |
| Animation type | discrete |

形式语法
----
```

overflow =
  <'overflow-block'>{1,2}

```

示例
--

### 为文本设置不同的 overflow 值

#### HTML

```html
<div>
  <code>visible</code>
  <p class="visible">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>
```

#### CSS

```css
body {
  display: flex;
  justify-content: space-around;
}

div {
  margin: 1em;
  font-size: 1.2em;
}

p {
  width: 8em;
  height: 5em;
  border: dotted;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

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

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

参见
--

* 相关 CSS 属性：`text-overflow`、`white-space`、`overflow-x`、`overflow-y`、`overflow-inline`、`overflow-block`、`clip`、`display`
* CSS Overflow (en-US) 和 Debug scrollable overflow


shape-outside - CSS：层叠样式表

shape-outside
=============

**`shape-outside`** 的 CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; `shape-outside`提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/\* 函数值 \*/
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/\* <url> 值 \*/
shape-outside: url(image.png);

/\* 渐变值 \*/
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/\* 全局值 \*/
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;
```

`shape-outside` 属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。

### 值

`none`

该浮动区域不产生影响，行内元素以默认的方式包裹着该元素的 margin box。

`<shape-box>`

根据浮动元素的边缘（通过 CSS box model 来定义）形状计算出浮动的区域。可能是 `margin-box`, `border-box`, `padding-box`, 或者 `content-box`。这个形状包括了由 `border-radius` 属性制造出来的弧度（与 `background-clip` 的表现类似）。

`margin-box`

定义一个由外边距的外边缘封闭形成的形状。这个形状的角的半径由相应的`border-radius` 和`margin` 的值决定。如果 `border-radius / margin` 的比率大于等于 `1` , 那么这个 margin box 的角的弧度就是 `border-radius + margin` ；如果比率小于 `1`，那么这个 margin box 的角的弧度就是 `border-radius + (margin * (1 + (ratio-1)^3))` 。

`border-box`

定义一个由边界的外边缘封闭形成的形状。这个形状遵循正常的边界外部圆角的形成规则。

`padding-box`

定义一个由内边距的外边缘封闭形成的形状。这个形状遵循正常的边界内部圆角的形成规则。

`content-box`

定义一个由内容区域的外边缘封闭形成的形状（译者：表述的不太好，就是被 padding 包裹的区域，在 chrome 控制台中的盒子模型图中的蓝色区域。）。每一个角的弧度取 `0` 或 `border-radius - border-width - padding` 中的较大值。

`<basic-shape>`

基于 `inset()` (en-US)、`circle()` (en-US)、`ellipse()` (en-US) 或 `polygon()` (en-US) 其中一个创造出来的形状计算出浮动区域。如果同时存在 `<shape-box>`，那么会为 `<basic-shape>` 方法定义一个参考盒，这个参考盒默认为 `margin-box`。

`<image>`

提取并且计算指定 `<image>` 的 alpha 通道得出浮动区域（译者：即根据图片的非透明区域进行包裹）。就跟通过 `shape-image-threshold`来定义一样。

**备注：** 用户代理 必须使用由 HTML5 规范定义的 CORS-enabled fetch 方法来处理 `shape-outside` 的值中的所有 URL。当捕获的时候，用户代理必须使用“匿名”模式来设置层叠样式表的 URL 的 referrer source 和设置所在文档的 URL 的 origin。如果这导致出现没有有效的备份图像这样的网络错误，产生的影响就跟指定了值 `none` 一样。

### 正式语法
```

shape-outside =
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>

<shape-box> =
  <visual-box>  |
  margin-box

<image> =
  <url>       |
  <gradient>

<visual-box> =
  content-box  |
  padding-box  |
  border-box

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

插值
--

当在两个 `<basic-shape>` 之间产生动画时，将会应用以下规则。shape 里的值将会被当成一个简单列表插入。插入列表的值的类型可能是 `<length>`，`<percentage>`，或 `calc()`。如果列表的值不是以上的几种类型，但是都相同的话（如在两个列表的相同位置找到了 `nonzero` ），那些值会插入到列表中。

* 两个形状必须使用同样的参考盒。
* 如果两个形状都是 `ellipse()` 或 `circle()`类型，并且它们的 radii 都没有使用 `closest-side` 或 `farthest-side` 关键字，则将两个形状对应值之间的值插入到 shape 方法中。
* 如果两个形状的类型都是 `inset()`，则将两个形状对应值之间的值插入到 shape 方法中。
* 如果两个形状都是 `polygon()`，两个多边形之间有相同的定点数量并且 `<fill-rule>` 相同，则将两个形状对应值之间的值插入到 shape 方法中。
* 其余所有情况都不会发生插入。
示例
--

### HTML

```html
<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be funneling your attention
    towards a spot on the page to drive you to follow a particular link.
    Sometimes you don't notice.
  </p>
</div>
```

### CSS

```css
.main {
  width: 500px;
}

.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}

.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}
```

### Result

规范
--

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-outside-property |

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

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

参见
--

* CSS Shapes
* Overview of CSS Shapes
* Shapes from Box Values (en-US)
* Basic Shapes (en-US)
* Shapes from Images (en-US)
* `<basic-shape>`
* `shape-margin`
* `shape-image-threshold`


color-scheme - CSS：层叠样式表

color-scheme
============

**`color-scheme`** CSS 属性允许元素指示它可以舒适地呈现哪些颜色方案。

操作系统颜色方案的常见选择为“亮色”和“暗色”，或“日间模式”和“夜间模式”。当用户选择其中一种颜色方案时，操作系统会对用户界面进行调整，包括表单控件、滚动条和 CSS 系统颜色的使用值。

尝试一下
----

语法
--

```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

/\* 全局值 \*/
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;
```

`color-scheme` 属性的值必须是以上关键字之一。

### 取值

`normal`

表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。

`light`

表示可以使用操作系统亮色配色方案渲染元素。

`dark`

表示可以使用操作系统深色配色方案渲染元素。

`only`

禁止用户代理覆盖元素的颜色方案。

可以使用 `color-scheme: only light;` 应用于特定的元素或 `:root`，以关闭由 Chrome 的自动深色主题引起的颜色覆盖。

形式定义
----

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

形式语法
----
```

color-scheme =
  normal                                       |
  [ light | dark | <custom-ident> ]+ && only?

```

示例
--

### 应用配色方案

要将整个页面配置为使用用户的配色方案首选项，请在 `:root` 元素上指定 `color-scheme`。

```css
:root {
  color-scheme: light dark;
}
```

规范
--

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

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

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

参见
--

* `prefers-color-scheme` 媒体查询来检测用户对配色方案的偏好。
* 使用 CSS 将颜色应用于 HTML 元素
* 其他与颜色相关的属性：`color`、`background-color`、`border-color`、`outline-color`、`text-decoration-color`、`text-emphasis-color` (en-US)、`text-shadow`、`caret-color` 和 `column-rule-color`
* `background-image`
* `print-color-adjust` (en-US)


position - CSS：层叠样式表

position
========

CSS **`position`** 属性用于指定一个元素在文档中的定位方式。`top`，`right`，`bottom` 和 `left` 属性则决定了该元素的最终位置。

尝试一下
----

### 定位类型

* **定位元素**（positioned element）是其计算后位置属性为 `relative`, `absolute`, `fixed` 或 `sticky` 的一个元素（换句话说，除`static`以外的任何东西）。
* **相对定位元素**（relatively positioned element）是计算后位置属性为 `relative`的元素。
* **绝对定位元素**（absolutely positioned element）是计算后位置属性为 `absolute` 或 `fixed` 的元素。
* **粘性定位元素**（stickily positioned element）是计算后位置属性为 `sticky` 的元素。

大多数情况下，`height`和`width` 被设定为 auto 的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过指定`top`和`bottom` ，保留`height`未指定（即`auto`），来填充可用的垂直空间。它们同样可以通过指定`left` 和 `right`并将`width` 指定为`auto`来填充可用的水平空间。

除了刚刚描述的情况（绝对定位元素填充可用空间）：

* 如果 `top` 和 `bottom` 都被指定（严格来说，这里指定的值不能为 `auto` ），`top` 优先。
* 如果指定了 `left` 和 `right` ，当 `direction`设置为 `ltr`（水平书写的中文、英语）时 `left` 优先，当`direction`设置为 `rtl`（阿拉伯语、希伯来语、波斯语由右向左书写）时 `right` 优先。
语法
--

`position` 属性被指定为从下面的值列表中选择的单个关键字。

### 取值

`static`

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 `top`, `right`, `bottom`, `left` 和 `z-index` 属性无效。

`relative`

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-\*-group, table-row, table-column, table-cell, table-caption 元素无效。

`absolute`

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

`fixed`

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。`fixed` 属性会创建新的层叠上下文。当元素祖先的 `transform`、`perspective`、`filter` 或 `backdrop-filter` 属性非 `none` 时，容器由视口改为该祖先。

`sticky`

 元素根据正常文档流进行定位，然后相对它的*最近滚动祖先*（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 `top`、`right`、`bottom` 和 `left` 的值进行偏移。偏移值不会影响任何其他元素的位置。
 该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 `overflow` 是 `hidden`、`scroll`、`auto` 或 `overlay` 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见 Github issue on W3C CSSWG）。

### 形式语法
```

position =
  static       |
  relative     |
  absolute     |
  sticky       |
  fixed        |
  <running()>

<running()> =
  running( <custom-ident> )

```

示例
--

### 相对定位

相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。下面的例子中，注意未应用定位的其他元素是按照 "Two" 在正常位置的情况下进行布局的。

HTML 内容

```html
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
```

#### CSS

```css
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
```

### 绝对定位

相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其他元素时，绝对定位元素不占据空间。绝对定位元素相对于*最近的非 `static` 祖先元素*定位。当这样的祖先元素不存在时，则相对于 ICB（initial containing block，初始包含块）。

#### HTML

```html
<h1>Absolute positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

#### CSS

```css
\* {
  box-sizing: border-box;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

#### 结果

### 固定定位

固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。在下面的示例中，"One" 元素定位在离页面顶部 80px，离页面左侧 20px 的位置。

#### HTML

```html
<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>
```

#### CSS

```css
.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}
```

当浏览页面顶部时，定位元素处于左上角。在滚动后，它相对于 viewport 视口仍处于同一位置。

### 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

```css
#one {
  position: sticky;
  top: 10px;
}
```

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

须指定 `top`, `right`, `bottom` 或 `left` 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

#### HTML 内容

```html
<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>
```

#### CSS

```css
\* {
  box-sizing: border-box;
}

dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font:
    bold 18px/21px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font:
    bold 20px/45px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #ccc;
}
```

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # position-property |

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

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

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


border-inline-start-color - CSS：层叠样式表

border-inline-start-color
=========================

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

尝试一下
----

语法
--

```css
border-inline-start-color: red;
border-inline-start-color: #ee4141;

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

与此相关的属性有 `border-block-start-color`、`border-block-end-color` 和 `border-inline-end-color`，这些属性定义了元素其他边框的颜色。

### 取值

`<'color'>`

边框颜色。见 `color`。

形式定义
----

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

形式语法
----
```

border-inline-start-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

<length-percentage> =
  <length>      |
  <percentage>

```

示例
--

### HTML

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

### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-start-color: red;
}
```

规范
--

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

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

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

参见
--

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


grid-area - CSS：层叠样式表

grid-area
=========

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
CSS 属性 **`grid-area`** 是一种对于 `grid-row-start` (en-US)、`grid-column-start` (en-US)、`grid-row-end` (en-US) 和 `grid-column-end` (en-US) 的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 grid row 中指定一个网格项的大小和位置，继而确定 grid area 的边界。

```css
/\* Keyword values \*/
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/\* <custom-ident> values \*/
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/\* <integer> && <custom-ident>? values \*/
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;

/\* span && [ <integer> || <custom-ident> ] values \*/
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

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

如果指定了 4 个 `<grid-line>` 的值，`grid-row-start` 会被设为第一个值，`grid-column-start` 为第二个值， `grid-row-end` 为第三个值，`grid-column-end` 为第四个值。

当 `grid-column-end` 被忽略时，若 `grid-column-start` 为一 `<custom-ident>`（自定义关键字数据类型）， `grid-column-end` 则为该 `<custom-ident>`；否则为 `auto`。

当 `grid-row-end` 被忽略时，若 `grid-row-start` 为一 `<custom-ident>`，`grid-row-end` 则为该 `<custom-ident>`；否则为 `auto`。

当 `grid-column-start` 被忽略时，若 `grid-row-start` 为一 `<custom-ident>`，则所有四项普通写法的属性值均为该值。否则为 `auto`。

网格面的属性亦可设为一 `<custom-ident>` 作为其名称，然后可通过 `grid-template-areas` 放置。

语法
--

```css
/\* Keyword values \*/
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/\* <custom-ident> values \*/
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/\* <integer> && <custom-ident>? values \*/
grid-area: 4 some-grid-area;
grid-area: 4 some-grid-area / 2 another-grid-area;

/\* span && [ <integer> || <custom-ident> ] values \*/
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

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

### 值

`auto`

该关键字表明该属性未指定该如何纺织网格项目。网格项目会被以默认跨度（span）`1`自动放置。

`<custom-ident>` 自定义关键字数据类型

如果存在以 '`<custom-ident>-start`'/'`<custom-ident>-end`' 命名的自定义基线，它会将第一个这样的基线贡献给网格单元以布置。

**注意：** 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 `grid-row: foo;` 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 `foo-start`/`foo-end` 命名的其他基线）。

否则，它就会被当作整数 `1` 与 `<custom-ident>` 一起指定。

`<integer> && <custom-ident>?`

 将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是 `<custom-ident>`，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。
 `<integer>` 值不能为 `0`。

`span && [ <integer> || <custom-ident> ]`

为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是

`<custom-ident>`，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。

如果忽略 <integer> ，它就默认设为 `1`。它的值也不能为 0。

### 形式语法
```

grid-area =
  <grid-line> [ / <grid-line> ]{0,3}

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

示例
--

### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}
```

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # propdef-grid-area |

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

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

参见
--

* Related CSS properties: `grid-row`, `grid-row-start` (en-US), `grid-row-end` (en-US), `grid-column`, `grid-column-start` (en-US), `grid-column-end` (en-US), `grid-template-areas`
* Grid Layout Guide: *Grid template areas*
* Video tutorial: *Grid Template Areas*


自定义属性（--*）：CSS 变量 - CSS：层叠样式表

自定义属性（--\*）：CSS 变量
==================

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

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

* Learn more
* See full compatibility
* Report feedback
带有前缀 `--` 的属性名，比如 `--example--name`，表示的是带有值的自定义属性，其可以通过 `var()` 函数在全文档范围内复用的。

CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

|  |  |
| --- | --- |
| 初始值 | see prose |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | as specified with variables substituted |
| Animation type | discrete |

语法
--

```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
```

`<declaration-value>`

这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。

**备注：** 自定义属性名区分大小写——`--my-color` 会被视为与 `--My-color` 不同的自定义属性。

示例
--

### HTML

```html
<p id="firstParagraph">此段落应有蓝色背景和黄色文本。</p>
<p id="secondParagraph">此段落应有黄色背景和蓝色文本。</p>
<div id="container">
  <p id="thirdParagraph">此段落应有绿色背景和黄色文本。</p>
</div>
```

### CSS

```css
:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables |

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

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

参见
--

* 使用 CSS 变量
* `var()` 函数


scroll-margin-inline-start - CSS：层叠样式表

scroll-margin-inline-start
==========================

**`scroll-margin-inline-start`** 属性定义了滚动吸附区域的行首外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
scroll-margin-inline-start: 10px;
scroll-margin-inline-start: 1em;

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

### 取值

`<length>`

滚动容器的行首外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-inline-start =
  <length>

```

示例
--

### 简单演示

此示例所实现的内容与上述互动示例非常相似，但此处将解释其实现方法。

此处的目标为创建四个横向滚动区块，其中第二个和第三个吸附至指定位置——靠近但不恰好位于每个区块的左侧。

#### HTML

表示这些区块的 HTML 非常简单：

```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

#### CSS

一起来过一遍 CSS。外层容器有如下样式：

```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```

与滚动吸附相关的主要部分为 `overflow-x: scroll`——确保内容可滚动且不被隐藏——以及 `scroll-snap-type: x mandatory`——要求必须沿横轴出现滚动吸附，且滚动总将止于吸附点。

子元素有如下样式：

```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```

此处最相关的部分为 `scroll-snap-align: start`——指定左侧的边（即此情形中沿 x 轴的“首侧”）为吸附点。

最后指定滚动外边距的值，为第二个和第三个子元素指定不同的值：

```css
.scroller > div:nth-child(2) {
  scroll-margin-inline-start: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-start: 2rem;
}
```

这意味着当滚动过中间的子元素后，滚动将吸附至第二个 `<div>` 行首边的 `1rem` 外处，及第三个 `<div>` 行首边的 `2rems` 外处。

#### 结果

请自行尝试：

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动


background-clip - CSS：层叠样式表

background-clip
===============

`background-clip` 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

尝试一下
----

如果没有设置背景图片（`background-image`）或背景颜色（`background-color`），那么这个属性只有在边框（ `border`）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 `border-style` 或 `border-image` 有关），否则，本属性产生的样式变化会被边框覆盖。

语法
--

```css
/\* Keyword values \*/
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/\* Global values \*/
background-clip: inherit;
background-clip: initial;
background-clip: unset;
```

### 值

`border-box`

背景延伸至边框外沿（但是在边框下层）。

`padding-box`

背景延伸至内边距（`padding`）外沿。不会绘制到边框处。

`content-box`

背景被裁剪至内容区（content box）外沿。

`text`
实验性

背景被裁剪成文字的前景色。

### 标准语法
```

background-clip =
  <visual-box>#

<visual-box> =
  content-box  |
  padding-box  |
  border-box

```

示例
--

#### HTML

```html
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>
```

#### CSS

```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}
```

#### 结果

规范
--

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

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

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

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

参见
--

* The `clip-path` property creates a clipping region that defines what part of an *entire element* should be displayed.
* Background properties: `background`, `background-color`, `background-image`
* Introduction to the CSS box model


flex-shrink - CSS：层叠样式表

flex-shrink
===========

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-shrink`** 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

```css
flex-shrink: 2;
flex-shrink: 0.6;

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

|  |  |
| --- | --- |
| 初始值 | `1` |
| 适用元素 | flex items, including in-flow pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a number |

更多属性和定义请参见使用 CSS 弹性盒子 (en-US)

语法
--

`flex-shrink` 属性只能是一个 `<number>`。

### 取值

`<number`>

负值是不被允许的。参考 `<number>`。

### Formal syntax
```

flex-shrink =
  <number [0,∞]>

```

示例
--

### HTML

```html
<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the width of D is not the same as A's</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
```

### CSS

```css
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
```

### 结果

规范
--

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

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

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

参考
--

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


text-transform - CSS：层叠样式表

text-transform
==============

**text-transform** CSS 属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。

尝试一下
----

`text-transform` 属性考虑特定于语言的案例映射规则，如：

* 在突厥语系中，如土耳其语（`tr`）、阿塞拜疆语（`az`）、克里米亚鞑靼语（`crh`）、伏尔加鞑靼语（`tt`）和巴什基尔语（`ba`），有带点和不带点的两种 `i`，以及两种情况的配对： `i`/`İ` 和 `ı`/`I`。
* 在德语中（`de`），`ß` 的大写形式为 `SS`。
* 在荷兰语中（`nl`），`ij` 双字母变为 `IJ`，即使设置了 `text-transform: capitalize`，该属性只大写单词的第一个字母。
* 在希腊语中（`el`），当整个单词是大写的时候，元音会失去重音（`ά`/`Α`），除了不连贯的 eta（`ή`/`Ή`）。另外，在第一个元音上有重音的双元音会失去重音，在第二个元音上获得重音（`άι`/`ΑΪ`）。
* 在希腊语中（`el`），小写的西格玛字符有两种形式：`σ` 和 `ς`。`ς` 只在西格玛结束一个词的时候使用。当对大写西格玛（`Σ`）应用 `text-transform: lowercase` 时，浏览器需要根据上下文选择正确的小写形式。
* 在爱尔兰语中（`ga`），某些前缀字母在基本首字母大写时仍为小写，因此，例如 `text-transform: uppercase` 会将 `ar aon tslí` 变为 `AR AON tSLÍ`，而不是像人们所期望的那样，变为 `AR AON TSLÍ`（仅在 Firefox）。在某些情况下，大写字母也会被删除：`an t-uisce` 转换为 `AN tUISCE`（并且连字符被 `text-transform: lowercase` 正确地重新插入）。

语言由 HTML `lang` 属性或 XML `xml:lang` (en-US) 属性定义。

**备注：** 特定情况的支持因浏览器而异，因此请检查浏览器兼容性表格。

语法
--

```css
/\* 关键字值 \*/
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

/\* 全局值 \*/
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;
```

`capitalize`

这个关键字强制每个单词的*首*字母转换为大写。其他的字符保留不变（它们处于元素的文本保留原始大小写）。字母是 Unicode 字符集或者数字里定义的字符
实验性
；因此单词开头的任何标点符号或者特殊符号将会被忽略。

**备注：** 作者不应期望 `capitalize` 遵循特定语言的标题大小写惯例（如跳过英文的文章）。

**备注：** 在 CSS 1 和 CSS 2.1 中，`capitalize` 关键字没有得到充分说明。这导致不同的浏览器在计算第一个字母的方式上存在差异（Firefox 认为 `-` 和 `_` 是字母，但其他浏览器不这样认为。Webkit 和 Gecko 都错误地认为基于字母的符号如 `ⓐ` 是真正的字母）。通过精确定义正确的行为，CSS Text Level 3 清除了这种混乱。浏览器兼容性表中的 `capitalize` 一行包含了不同引擎开始支持这一精确定义的行为的版本。

`uppercase`

这个关键字强制所有字符被转换为大写。

`lowercase`

这个关键字强制所有字符被转换为小写。

`none`

这个关键字阻止所有字符的大小写被转换。

`full-width`

是一个关键字，它强制将字符（主要是表意文字和拉丁文字））--写在一个正方形内，使它们能够在通常的东亚文字（如中文或日文）中对齐。

`full-size-kana`

通常用于 `<ruby>` 注释文本，该关键字将所有小假名字符转换为等效的全尺寸假名，以补偿在 ruby 中通常使用的小字体的可读性问题。

无障碍考虑
-----

大段将文字 `text-transform` 值设置为 `uppercase`，对于有认知障碍的人（比如阅读障碍）来说可能难以阅读。

* MDN：理解 WCAG，条例 1.4 的解释 (en-US)
* W3C：理解 WCAG 2.1
形式定义
----

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

形式语法
----
```

text-transform =
  none                                                |
  [ capitalize | uppercase | lowercase ] || full-width || full-size-kana  |
  math-auto

```

示例
--

### 使用“none”

```html
<p>
  原始文字
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: none
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: none;
}
strong {
  float: right;
}
```

这个示例展示了没有文字转换的情况。

### 使用“capitalize”（一般情况）

```html
<p>
  原始文字
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

这个示例展示了首字母大写的情况。

### 使用“capitalize”（标点）

```html
<p>
  原始文字
  <strong
 >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
    ?¡transform!</strong
 >
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
      ?¡transform!</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

这个示例展示了一个词的初始标点是如何被忽略的。关键字的目标是第一个字母，也就是字母或数字总类中的第一个 Unicode 字符部分。

### 使用“capitalize”（符号）

```html
<p>
  原始文字
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

这个示例展示了初始符号是如何被忽略的。关键字的目标是第一个字母，也就是字母或数字总类中的第一个 Unicode 字符部分。

### 使用“capitalize”（荷兰语 ij 双字母字符）

```html
<p>
  原始文字
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span lang="nl"
 >The Dutch word: "ijsland" starts with a digraph.</span
 ></strong
 >
</p>
```

这个示例展示了荷兰语双字母字符 *ij* 必须像一个单一的字母一样处理。

### 使用“uppercase”（一般情况）

```html
<p>
  原始文字
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: uppercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}
```

这个示例展示了如何将文本转换为大写字母。

### 使用“uppercase”（希腊语元音）

```html
<p>
  原始文字
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
 ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
 >
</p>
```

```css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}
```

这个示例展示了希腊元音除了不连读的 *eta* 之外，应该没有重音，而元音对中第一个元音的重音变成了第二个元音的重音。

### 使用“lowercase”（一般情况）

```html
<p>
  原始文字
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

这个示例展示了如何将文本转换为小写字母。

### 使用“lowercase”（希腊语 Σ）

```html
<p>
  原始文字
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span
 ></strong
 >
</p>
```

这个示例展示了希腊字母西格玛（`Σ`）是如何根据上下文转化为普通小写西格玛（`σ`）或词尾变体（`ς`）的。

### 使用“lowercase”（立陶宛语）

```html
<p>
  原始文字
  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

这个示例展示了立陶宛语字母 `Ĩ` 和 `J́` 在转换为小写时保持上方的小点。

### 使用“full-width”（一般情况）

```html
<p>
  原始文字
  <strong
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
 >
</p>
<p>
  text-transform: full-width
  <strong
 ><span
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}
```

有些字符有两种格式：正常宽度和全宽度，它们具有不同的 Unicode 编码点。全宽版本可以用来将它们与亚洲的表意文字顺利混合。

### 使用“full-width”（日语半角片假名）

```html
<p>
  原始文字
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>
```

```css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}
```

日语的半宽片假名被用来在 8 位字符编码中表示片假名。与普通的（全宽）片假名字符不同，一个带有 dakuten（声母标记）的字母被表示为两个码点，即字母的主体和 dakuten。在将这些字符转换为全宽时，`full-width` 将它们合并为一个代码点。

### 使用“full-size-kana”

```html
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
</p>
```

```css
p:nth-of-type(2) {
  text-transform: full-size-kana;
}
```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # text-transform |

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

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

参见
--

* `font-variant`


scroll-snap-stop - CSS：层叠样式表

scroll-snap-stop
================

CSS 属性 **`scroll-snap-stop`** 定义了滚动容器是否可“越过”吸附位置。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
scroll-snap-stop: normal;
scroll-snap-stop: always;

/\* 全局值 \*/
scroll-snap-stop: inherit;
scroll-snap-stop: initial;
scroll-snap-stop: revert;
scroll-snap-stop: revert-layer;
scroll-snap-stop: unset;
```

### 取值

`normal`

在滚动此元素的滚动容器的可见视口时，滚动容器可“越过”吸附位置。

`always`

滚动容器不得“越过”吸附位置，必须吸附至此元素的第一个吸附位置。

形式定义
----

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

形式语法
----
```

scroll-snap-stop =
  normal  |
  always

```

示例
--

### 设置不同的吸附定格

下列示例演示了 `scroll-snap-stop` 的值 `always` 和 `normal` 之间的对比。当 `scroll-snap-type` 属性被设置为 `mandatory` 时——即此示例所使用的设置——`scroll-snap-stop` 的两值之间的区别更为明显。

#### HTML

```html
<p>scroll-snap-stop: always（x 轴强制）</p>
<div class="x mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>在奇数位子元素上 scroll-snap-stop: always（x 轴强制）</p>
<div class="x mandatory-scroll-snapping always-stop-odd">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>在偶数位子元素上 scroll-snap-stop: always（x 轴强制）</p>
<div class="x mandatory-scroll-snapping always-stop-even">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal（x 轴强制）</p>
<div class="x mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always（y 轴强制）</p>
<div class="y mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal（y 轴强制）</p>
<div class="y mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
```

#### CSS
```

/\* 设定 \*/
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
  text-align: center;
}

div[class] {
  font-size: 3rem;
  0.
  display: flex;
  overflow: auto;
  flex: none;
}

.x {
  width: 50%;
  min-width: 15rem;
  height: 6rem;
  flex-flow: row nowrap;
}

.y {
  width: 30%;
  min-width: 12rem;
  height: 12rem;
  flex-flow: column nowrap;
}

div > div {
  flex: none;
  outline: 1px solid #333;
}

.x > div {
  width: 90%;
  height: 100%;
}

.y > div {
  width: 100%;
  height: 80%;
}

/\* 上色 \*/
div > div:nth-child(even) {
  background-color: #87ea87;
}

div > div:nth-child(odd) {
  background-color: #87ccea;
}
```

```css
/\* 在父元素上设定强制滚动吸附 \*/
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

/\* 在子元素上定义滚动吸附对齐方式 \*/
div > div {
  scroll-snap-align: center;
}

/\* 在子元素上定义滚动吸附定格 \*/
.always-stop > div {
  scroll-snap-stop: always;
}

.always-stop-odd > div:nth-of-type(odd) {
  scroll-snap-stop: always;
}

.always-stop-even > div:nth-of-type(even) {
  scroll-snap-stop: always;
}

.normal-stop > div {
  scroll-snap-stop: normal;
}
```

#### 结果

在下方的 x 轴盒和 y 轴盒中分别从左往右和从上往下滚动。在 `scroll-snap-stop` 属性被设置为 `always` 的 x 轴盒和 y 轴盒中，即使快速滚动，滚动也将被强制止于吸附点。然而在 `scroll-snap-stop` 属性被设置为 `normal` 的盒子中，吸附点在快速滚动时被跳过。

若有要求，则可在滚动容器中选择总是（`always`）止于哪些元素。下列示例通过将奇数位和偶数为的元素设为目标对此进行了演示，可根据要求选择不同的策略。在下列示例中的第二和第三个盒子中，滚动分别不会“越过”奇数位和偶数位的元素。

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-stop |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动


perspective - CSS：层叠样式表

perspective
===========

CSS 属性 **`perspective`** 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

尝试一下
----

三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于 `perspective` 属性值的部分。

默认情况下，*消失点*位于元素的中心，但是可以通过设置 `perspective-origin` 属性来改变其位置。

当该属性值不为 `0` 和 `none` 时，会创建新的 层叠上下文。在这种情况下，容器内元素的层叠关系像是使用了 `position: fixed` 一样。

语法
--

```css
/\* Keyword value \*/
perspective: none;

/\* <length> values \*/
perspective: 20px;
perspective: 3.5em;

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

### 值

`none`

没有应用 perspective 样式时的默认值。

`<length>`

`<length>` 指定观察者距离 z=0 平面的距离，为元素及其内容应用透视变换。当值为 0 或负值时，无透视变换。

### 标准语法
```

perspective =
  none            |
  <length [0,∞]>

```

举例
--

### 设置视角

此示例显示了一个立方体，其 perspective 设置为不同的值。立方体的收缩由 `perspective` 属性定义。它的值越小，视角越深。

#### Result

#### HTML

下面的 HTML 创建了同一个立方体的四个副本，perspective 设置为不同的值。

```html
<table>
  <tbody>
    <tr>
      <th><code>perspective: 250px;</code></th>
      <th><code>perspective: 350px;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers250">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers350">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>perspective: 500px;</code></th>
      <th><code>perspective: 650px;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers500">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers650">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
```

#### CSS

CSS 建立了不同透视距离的 class，还包括容器盒、立方体本身以及它的每个面的 class。

```css
/\* Shorthand classes for different perspective values \*/
.pers250 {
  perspective: 250px;
}

.pers350 {
  perspective: 350px;
}

.pers500 {
  perspective: 500px;
}

.pers650 {
  perspective: 650px;
}

/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Define each face based on direction \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/\* Make the table a little nicer \*/
th,
p,
td {
  background-color: #eeeeee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}
```

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # perspective-property |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| 计算值 | the absolute length or `none` |
| Animation type | a length |
| Creates stacking context | yes |

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

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

相关连接
----

* Using CSS Transforms


place-content - CSS：层叠样式表

place-content
=============

**`place-content`** 属性是`align-content` 和 `justify-content`的简写。使用这两个属性的值可以用于任何的布局情况。

尝试一下
----

语法
--

```css
/\* Positional alignment \*/
/\* align-content does not take left and right values \*/
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/\* Baseline alignment \*/
/\* justify-content does not take baseline values \*/
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/\* Distributed alignment \*/
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

/\* Global values \*/
place-content: inherit;
place-content: initial;
place-content: unset;
```

第一个值为 `align-content` 属性，第二个值为 `justify-content` .

**警告：** 如果没有设置第二个值，那么第二个的值与第一个相等，此前提是第一个值对两个属性都是有效的。如果设置的这个值对两个属性都无效，那么整个设置的值就是无效的。

### 参考值

`start`

所有的子元素堆叠在父元素上合适的轴线上的起点对齐。

`end`

所有的子元素堆叠在父元素上合适的轴线上的终点对齐

`flex-start`

 所有的子元素堆叠在父元素的主轴或交叉轴上起点对齐，主要取决于 flex-direction 的设置。
 仅适用于 flex 布局的子元素.。如果父元素没有设置为 flex，`flex-start` 将被视为 `start`

`flex-end`

 所有的子元素堆叠在父元素的主轴或交叉轴上终点对齐，主要取决于 flex-direction 的设置。
 仅适用于 flex 布局的子元素。如果父元素没有设置为 flex，`flex-end` 将被视为 `end`

`center`

所有的子元素堆叠在父元素的中间对齐

`left`

The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like `start`.

`right`

The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like `start`.

`space-between`

The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.

`baseline first baseline`
`last baseline`

 Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
 The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`space-around`

The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.

`space-evenly`

The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

`stretch`

If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size exactly fills the alignment container

### 形式语法
```

place-content =
  <'align-content'> <'justify-content'>?

```

示例
--

### 将内容放入弹性容器中

```html
<div id="container">
  <div class="small">Lorem</div>
  <div class="small">Lorem<br />ipsum</div>
  <div class="large">Lorem</div>
  <div class="large">Lorem<br />ipsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>
```

```
<code>writing-mode:</code
><select id="writingMode">
  <option value="horizontal-tb" selected>horizontal-tb</option>
  <option value="vertical-rl">vertical-rl</option>
  <option value="vertical-lr">vertical-lr</option>
  <option value="sideways-rl">sideways-rl</option>
  <option value="sideways-lr">sideways-lr</option></select
><code>;</code><br />

<code>direction:</code
><select id="direction">
  <option value="ltr" selected>ltr</option>
  <option value="rtl">rtl</option></select
><code>;</code><br />

<code>place-content:</code
><select id="alignContentAlignment">
  <option value="normal">normal</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="baseline">baseline</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly" selected>space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center">center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option>
</select>
<select id="justifyContentAlignment">
  <option value="normal">normal</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center" selected>center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option></select
><code>;</code>
```

```
function update() {
  document.getElementById("container").style.placeContent =
    `${document.getElementById("alignContentAlignment").value} ` +
    `${document.getElementById("justifyContentAlignment").value}`;
}

const alignContentAlignment = document.getElementById("alignContentAlignment");
alignContentAlignment.addEventListener("change", update);

const justifyContentAlignment = document.getElementById(
  "justifyContentAlignment",
);
justifyContentAlignment.addEventListener("change", update);

const writingM = document.getElementById("writingMode");
writingM.addEventListener("change", (evt) => {
  document.getElementById("container").style.writingMode = evt.target.value;
});

const direction = document.getElementById("direction");
direction.addEventListener("change", (evt) => {
  document.getElementById("container").style.direction = evt.target.value;
});
```

#### CSS

```css
#container {
  display: flex;
  height: 240px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb; /\* Can be changed in the live sample \*/
  direction: ltr; /\* Can be changed in the live sample \*/
  place-content: flex-end center; /\* Can be changed in the live sample \*/
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
}

.large {
  font-size: 14px;
  height: 50px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # place-content |

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `align-content`: `normal`
* `justify-content`: `normal`
 |
| 适用元素 | multi-line flex containers |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `align-content`: as specified
* `justify-content`: as specified
 |
| Animation type | discrete |

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

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

参见
--

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `align-content` property
* The `justify-content` property


font-variant-ligatures - CSS：层叠样式表

font-variant-ligatures
======================

**`font-variant-ligatures`** 属性控制着其所应用元素文本的 ligatures 与 contextual forms 。会使文字最终的表现形式更加统一。

尝试一下
----

Syntax
------

```css
/\* Keyword values \*/
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: no-common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: no-discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: no-historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: contextual; /\* <contextual-alt-values> \*/
font-variant-ligatures: no-contextual; /\* <contextual-alt-values> \*/

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

`font-variant-ligatures`取值为下列关键字之一。

### Values

`normal`

默认值，表示在渲染时会使用常用的连字，连字的效果取决于字体，语言和脚本。

`none`

不使用任何连字，包括常规的形式

*<common-lig-values>*

These values control the most common ligatures, like for `fi`, `ffi`, `th` or similar. They correspond to the OpenType values `liga` and `clig`. Two values are possible:

* `common-ligatures` activating these ligatures. Note that the keyword `normal` activates these ligatures.
* `no-common-ligatures` deactivating these ligatures.

*<discretionary-lig-values>*

These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values `dlig`. Two values are possible:

* `discretionary-ligatures` activating these ligatures.
* `no-discretionary-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.

*<historical-lig-values>*

These values control the ligatures used historically, in old books, like the German tz digraph being displayed as ꜩ. They correspond to the OpenType values `hlig`. Two values are possible:

* `historical-ligatures` activating these ligatures.
* `no-historical-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.

*<contextual-alt-values>*

These values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values `calt`. Two values are possible:

* `contextual` specifies that the contextual alternates are to be used. Note that the keyword `normal` usually activates these ligatures too.
* `no-contextual` prevents their use.

Formal definition
-----------------

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

Formal syntax
-------------
```

font-variant-ligatures =
  normal                                              |
  none                                                |
  [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

<common-lig-values> =
  common-ligatures     |
  no-common-ligatures

<discretionary-lig-values> =
  discretionary-ligatures     |
  no-discretionary-ligatures

<historical-lig-values> =
  historical-ligatures     |
  no-historical-ligatures

<contextual-alt-values> =
  contextual     |
  no-contextual

```

示例
--

### Setting font ligatures and contextual forms

#### HTML

```html
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<p class="normal">
  normal<br />
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br />
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
```

#### CSS

```css
p {
  font-family: Lora, serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}

.contextual {
  font-variant-ligatures: contextual;
}

.no-contextual {
  font-variant-ligatures: no-contextual;
}

.contextual {
  font-variant-ligatures: contextual;
}
```

#### 结果

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

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

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

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


column-rule-width - CSS：层叠样式表

column-rule-width
=================

CSS 特性 `column-rule-width` 让你可以设置在多列布局中被画在两列之间的规则（线条）的宽度。

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | multicol elements |
| 是否是继承属性 | 否 |
| 计算值 | the absolute length; `0` if the `column-rule-style` is `none` or `hidden` |
| Animation type | a length |

Syntax
------
```

Formal syntax:
```
column-rule-width =
  <line-width>

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

```

```
```

/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* Length values */
column-rule-width: 1px;
column-rule-width: 2.5em;

column-rule-width: inherit;
```

### Values

<br-width>

Is a `<length>` or one of the `thin`, `medium` or `thick` keyword describing the width of the rule separating two columns.

Example
-------

```css
#header {
  column-rule-width: thick;
}
```

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # crw |

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

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


scroll-margin-right - CSS：层叠样式表

scroll-margin-right
===================

**`scroll-margin-right`** 属性定义了滚动吸附区域的右外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
scroll-margin-right: 10px;
scroll-margin-right: 1em;

/\* 全局值 \*/
scroll-margin-right: inherit;
scroll-margin-right: initial;
scroll-margin-right: revert;
scroll-margin-right: revert-layer;
scroll-margin-right: unset;
```

### 取值

`<length>`

滚动容器的右外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-right =
  <length>

```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动


:nth-last-of-type - CSS：层叠样式表

:nth-last-of-type
=================

**`:nth-last-of-type()`** CSS 伪类基于元素在相同类型（标签名）的兄弟元素中相对最后一个元素的位置来匹配元素。

尝试一下
----

语法
--

`nth-last-of-type` 伪类通过单个参数来指定元素的匹配模式，从元素列表的末尾开始计数。

请参见 `:nth-last-child` 以获取更详细的语法说明。

```css
:nth-last-of-type(<an-plus-b> | even | odd) {
  /\* ... \*/
}
```

示例
--

### HTML

```html
<div>
  <span>这是一个 span。</span>
  <span>这是另一个 span。</span>
  <em>这是起强调作用的。</em>
  <span>哇，这个 span 元素变成了绿色！！！</span>
  <del>这里被删除了。</del>
  <span>这是最后一个 span。</span>
</div>
```

### CSS

```css
span:nth-last-of-type(2) {
  background-color: lime;
}
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # nth-last-of-type-pseudo |

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

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

参见
--

* `:nth-last-child`、`:nth-of-type`


scroll-padding-inline-end - CSS：层叠样式表

scroll-padding-inline-end
=========================

**`scroll-padding-inline-end`** 属性定义了滚动口的*最优视区*——用于在用户视野中放置内容的目标区域——的行末内边距。作者由此得以排除滚动口被其他内容（如固定定位的工具栏或侧边栏）所遮挡的区域，或在目标元素与滚动口的边之间留出更多余地。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
scroll-padding-inline-end: auto;

/\* <length> 值 \*/
scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;
scroll-padding-inline-end: 10%;

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

### 取值

`<length-percentage>`

滚动口的行末内边距，为有效的长度或百分比。

`auto`

此内边距由用户代理所决定。此值通常为 `0px`，但用户代理可检测非零值是否更合理并另行处理。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding-inline-end =
  auto                       |
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动


:has() - CSS：层叠样式表

:has()
======

Baseline 2023
-------------

Newly availableSince December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
CSS 函数式伪类 **`:has()`** 表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

```css
/\* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 \*/
h1:has(+ p) {
  margin-bottom: 0;
}
```

`:has()` 伪类的优先级计算方法与 `:is()` 和 `:not()` 相同：以其参数中具体的选择器进行计算。

语法
--
```

:has( <forgiving-relative-selector-list> )
```

相对选择器列表参数是可容错的。通常在 CSS 中，选择器列表中的某个选择器无效时，那么整个列表则被视为无效。当 `:has()` 选择器列表中的一个选择器无法解析时，不正确或不受支持的选择器将被忽略，而其他的则将被正常使用。

注意，如果一个浏览器中不支持 `:has()` 伪类本身，则整个选择器块将失效（除非 `:has()` 本身位于一个可容错选择器列表中，比如在 `:is()` 或 `:where()` 中）。

`:has()` 伪类不能被嵌套在另一个 `:has()` 内。另外，伪元素不是 `:has()` 内的有效选择器。这是因为许多伪元素基于其祖先的样式有条件地存在，如果允许通过 `:has()` 查询这些伪元素可能导致循环查询。虽然 `:has()` 和伪元素在 `:has()` 中是无效的选择器，但由于选择器列表是可容错的，它们将只是被忽略。选择器将不会失效。

示例
--

### 与兄弟组合器一起使用

以下示例中的 `:has()` 样式声明会调整 `H1` 标题后面的间距，如果它们后面紧跟着 `H2` 标题。

#### HTML

```html
<section>
  <article>
    <h1>Morning Times</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>
```

#### CSS
```

section {
  display: flex;
  align-items: start;
  justify-content: space-around;
}

article {
  display: inline-block;
  width: 40%;
}

h1,
h2 {
  font-size: 1.2em;
}

h2 {
  font-size: 1em;
  color: rgb(150, 149, 149);
}
```

```css
h1,
h2 {
  margin: 0 0 1rem 0;
}

h1:has(+ h2) {
  margin: 0 0 0.25rem 0;
}
```

#### 结果

该示例并排显示了两个相似的文本，以进行比较：左侧的带有 `H1` 标题，并紧跟一个段落，而右侧的带有 `H1` 标题，并紧跟一个 `H2` 标题和一个段落。该示例的右侧，`:has()` 可以帮助选择 `H1` 元素后紧跟的 `H2` 元素（由兄弟选择器 `+` 指示），并通过 CSS 规则来减少此类 `H1` 元素后的间距。若没有 `:has()` 伪类，你就无法使用 CSS 选择器来选择具有不同类型的前一个兄弟元素或父元素。

### 与 :is() 伪类一起使用

这个示例建立在前一个示例之上，展示了如何用 `:has()` 选择多个元素。

#### HTML

```html
<section>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <h3>8:00 am</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>
```

#### CSS
```

section {
  display: flex;
  align-items: start;
  justify-content: space-around;
}

article {
  display: inline-block;
  width: 40%;
}

h1 {
  font-size: 1.2em;
}

h2 {
  font-size: 1em;
  color: rgb(150, 149, 149);
}

h3 {
  font-size: 0.9em;
  color: darkgrey;
}
```

```css
h1,
h2,
h3 {
  margin: 0 0 1rem 0;
}

:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
  margin: 0 0 0.25rem 0;
}
```

#### 结果

这里，第一个 `:is()` 伪类用于选择列表中的任何标题元素。第二个 `:is()` 伪类用于将相邻的兄弟选择器的列表作为参数传递给 `:has()`。`:has()` 伪类用于选择任何一个紧跟 `H2`、`H3` 或 `H4` 的 `H1`、`H2`、`H3` 元素（使用 `+` 指示），并使用 CSS 规则来减少此类 `H1`、`H2` 或 `H3` 元素后的间距。

这个选择器也可以写作：

```css
:is(h1, h2, h3):has(+ h2, + h3, + h4) {
  margin: 0 0 0.25rem 0;
}
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # relational |

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

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

参见
--

* `:is()`、`:where()`、`:not()`
* CSS 选择器
* CSS 组合符
* 选择器列表
* 使用选择器定位 DOM 元素


@page - CSS：层叠样式表

@page
=====

**`@page`** at 规则是一种 CSS 规则，用于修改打印页面的不同方面。它的目标是修改页面的尺寸、方向和页边距。`@page` at 规则可用于针对打印输出中的所有页面，也可使用其各种伪类来针对一个子集。

语法
--

```css
/\* 针对所有页面 \*/
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/\* 针对所有偶数页面 \*/
@page :left {
  margin-top: 4in;
}

/\* 针对所有奇数页面 \*/
@page :right {
  size: 11in;
  margin-top: 4in;
}

/\* 针对所有设置了 `page: wide;` 选择器的页面 \*/
@page wide {
  size: a4 landscape;
}

@page {
  /\* 右上方的空白框显示页码 \*/
  @top-right {
    content: "Page " counter(pageNumber);
  }
}
```

### 页面属性

`@page` at 规则只能包含页面描述符和边距 at 规则。以下描述符至少已在一个浏览器中实现：

`margin`

指定页边距。也可使用部分页边距属性 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left`。

`page-orientation` (en-US)

指定文档在页面上的方向，允许它进行正常的布局和格式化或者也可以将其向左或向右旋转。

`size` (en-US)

指定页面框包含块的目标大小和方向。通常情况下，一个页面框渲染到一页纸上时，它也会指定目标页的大小。

规范中提到以下 CSS 属性可通过 @page at 规则应用于页面框。但目前还*没有*任何用户代理支持这些属性。

剩余页面属性

| 特性 | CSS 属性 |
| --- | --- |
| bidi 属性 | direction |
| background 属性 | background-color |
|  | background-image |
|  | background-repeat |
|  | background-attachment |
|  | background-position |
|  | background |
| border 属性 | border-top-width |
|  | border-right-width |
|  | border-bottom-width |
|  | border-left-width |
|  | border-width |
|  | border-top-color |
|  | border-right-color |
|  | border-bottom-color |
|  | border-left-color |
|  | border-color |
|  | border-top-style |
|  | border-right-style |
|  | border-bottom-style |
|  | border-left-style |
|  | border-short-style |
|  | border-top |
|  | border-right |
|  | border-bottom |
|  | border-left |
|  | border |
| counter 属性 | counter-reset |
|  | counter-increment |
| 颜色 | color |
| font 属性 | font-family |
|  | font-size |
|  | font-style |
|  | font-variant |
|  | font-weight |
|  | font |
| height 属性 | height |
|  | min-height |
|  | max-height |
| 行高 | line-height |
| margin 属性 | margin-top |
|  | margin-right |
|  | margin-bottom |
|  | margin-left |
|  | margin |
| outline 属性 | outline-width |
|  | outline-style |
|  | outline-color |
|  | outline |
| padding 属性 | padding-top |
|  | padding-right |
|  | padding-bottom |
|  | padding-left |
|  | padding |
| 引号 | quotes |
| text 属性 | letter-spacing |
|  | text-align |
|  | text-decoration |
|  | text-indent |
|  | text-transform |
|  | white-space |
|  | word-spacing |
| 可见性 | visibility |
| width 属性 | width |
|  | min-width |
|  | max-width |

描述
--

@page 规则定义了页面盒子的属性。可以通过 CSS 对象模型接口 `CSSPageRule` 访问 `@page` at 规则。

**备注：** W3C 正在讨论如何处理和视图窗口有关的 `<length>` 的单位：`vh`、`vm`、`vmin` 和 `vmax`。目前，请不要在 `@page` at 规则中使用它们。

### 相关属性

`@page` at 规则允许用户为规则指定一个名称，然后在声明中使用 `page` 属性调用该名称。

`page` (en-US)

允许选择器使用用户定义的**命名页面**。

形式语法
----
```

@page =
  @page <page-selector-list>? { <declaration-rule-list> }

<page-selector-list> =
  <page-selector>#

<page-selector> =
  [ <ident-token>? <pseudo-page>\* ]!

<pseudo-page> =
  ':' [ left | right | first | blank ]

```

其中 `<page-body>` 包含：

* 页面属性
* 页面边距属性

且 `<pseudo-selector>` 代表这些伪类：

* `:blank`
* `:first`
* `:left`
* `:right`
边距 at 规则
--------

**警告：** 还没有任何用户代理实现边距 at 规则（截至 2023 年 8 月）。

边距 at 规则用于 `@page` at 规则内部。它们分别针对文档打印页面的不同部分，根据样式块中设置的属性值对打印页面的区域进行样式设置：

```css
@page {
  @top-left {
    /\* 页面边距属性 \*/
  }
}
```

**`@top-left`** 以文档的左上角为目标，并根据页面边距属性设置应用更改。

其余边距 at 规则包含：

```css
@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom
```

### 页面边距属性

页面边距属性是一组可以在任何单个边距 at 规则中设置的 CSS 属性。它们包括：

页面边距属性

| 特性 | CSS 属性 |
| --- | --- |
| bidi 属性 | direction |
| background 属性 | background-color |
|  | background-image |
|  | background-repeat |
|  | background-attachment |
|  | background-position |
|  | background |
| border 属性 | border-top-width |
|  | border-right-width |
|  | border-bottom-width |
|  | border-left-width |
|  | border-width |
|  | border-top-color |
|  | border-right-color |
|  | border-bottom-color |
|  | border-left-color |
|  | border-color |
|  | border-top-style |
|  | border-right-style |
|  | border-bottom-style |
|  | border-left-style |
|  | border-short-style |
|  | border-top |
|  | border-right |
|  | border-bottom |
|  | border-left |
|  | border |
| counter 属性 | counter-reset |
|  | counter-increment |
| 内容 | content |
| 颜色 | color |
| font 属性 | font-family |
|  | font-size |
|  | font-style |
|  | font-variant |
|  | font-weight |
|  | font |
| height 属性 | height |
|  | min-height |
|  | max-height |
| 行高 | line-height |
| margin 属性 | margin-top |
|  | margin-right |
|  | margin-bottom |
|  | margin-left |
|  | margin |
| outline 属性 | outline-width |
|  | outline-style |
|  | outline-color |
|  | outline |
| padding 属性 | padding-top |
|  | padding-right |
|  | padding-bottom |
|  | padding-left |
|  | padding |
| 引号 | quotes |
| text 属性 | letter-spacing |
|  | text-align |
|  | text-decoration |
|  | text-indent |
|  | text-transform |
|  | white-space |
|  | word-spacing |
| 竖直对齐 | vertical-align |
| 可见性 | visibility |
| width 属性 | width |
|  | min-width |
|  | max-width |
| z-index | z-index |

具名页面
----

具名页面可以在打印时以声明方式执行每页布局和添加页面分隔符。

可使用 `page` (en-US) 属性应用命名页面。这样，用户就可以创建不同的页面配置，用于打印布局。

在 `page` (en-US) 示例中可以找到这方面的例子。

示例
--

### 使用 size 属性更改页面方向

本例显示了如何以 `landscape` 格式将多个 `<section>` 分割成单个页面，每页打印时有 20% 的页边距。

#### HTML

```html
<button>打印该页面</button>
<article>
  <section>
    <h2>标题</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>标题</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>标题</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
</article>
```

#### CSS

```css
@page {
  size: landscape;
  margin: 20%;
}

section {
  page-break-after: always;
  break-after: page;
}

@media print {
  button {
    display: none;
  }
}
```

```
body {
  font-family: "Helvetica", sans-serif;
  background-color: silver;
}

article {
  width: 100%;
}

section {
  display: grid;
  background-color: white;
  border-radius: 0.6rem;
  justify-items: center;
  padding: 1rem;
  width: 50%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 0 auto;
  margin-block-end: 1.5rem;
  border: 1px dashed;
}
```

#### JavaScript

```js
const button = document.querySelector("button");

button.addEventListener("click", () => {
  window.print();
});
```

#### 结果

单击打印按钮将启动一个打印对话框，其中的 HTML 部分被分割成单独的页面。

### @page 伪类示例

请参考 `@page` 的各种伪类以获取示例。

* `:blank`
* `:first`
* `:left`
* `:right`
规范
--

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

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

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

参见
--

* `@page` `size` (en-US) 描述符
* `page` (en-US) 属性
* 参阅 Bugzilla 中的 [META] CSS Paged Media Module Level 3 工单，以追踪该主题（例如：基于页面的计数器，等等）的进展
* CSS 分页媒体模块
* Paged.js：W3C 分页媒体 polyfill


CSS Scrollbars - CSS：层叠样式表

CSS Scrollbars
==============

**CSS Scrollbars** 标准化了由 ie5 引入的废弃的滚动条颜色属性

示例
--

在这个例子里 我们选择使用一个比较细的 滚动轨道为绿色，滚动块为紫色的滚动条

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
```

### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### 结果

参考
--

### CSS 属性

* `scrollbar-width`
* `scrollbar-color`
规范
--

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1  |

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

### css.properties.scrollbar-color

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

### css.properties.scrollbar-width

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


::view-transition-group - CSS：层叠样式表

::view-transition-group
=======================

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-group`** CSS 伪元素表示单个视图过渡组。

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

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

```css
html::view-transition-group(\*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}
```

默认情况下，该元素最初会镜像表示 `::view-transition-old` 伪元素的大小和位置，即旧视图状态。如果没有旧视图状态，则会镜像表示 `::view-transition-new` 伪元素的大小和位置，即新视图状态。

如果同时存在新旧两种视图状态，则视图过渡样式表中的样式会将该伪元素的 `width` 和 `height` 从旧视图状态的边框盒大小动画到新视图状态的边框盒大小。

**备注：** 视图过渡样式表中的样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的设置过渡伪元素和更新伪元素样式部分。

此外，元素的变换是从旧视图状态的屏幕空间，变换到新视图状态的屏幕空间。由于动画属性的值是在过渡开始时确定的，因此此样式是动态生成的。

语法
--

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

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

`*`

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

`root`

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

`<custom-ident>`

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

示例
--

```css
view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}
```

规范
--

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

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

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

参见
--

* View Transitions API
* 使用 View Transitions API 实现平滑、简单的过渡


overscroll-behavior-x - CSS：层叠样式表

overscroll-behavior-x
=====================

**`overscroll-behavior-x`** 这个 CSS 属性用来控制当滚动到区域的水平边界时的浏览器行为。

**备注：** 详细的解释请访问 `overscroll-behavior`

```css
/\* Keyword values \*/
overscroll-behavior: auto; /\* default \*/
overscroll-behavior: contain;
overscroll-behavior: none;

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

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | non-replaced block-level elements and non-replaced inline-block elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

语法
--

`overscroll-behavior-x` 属性可以选用下列值。

### 值

`auto`

默认的滚动溢出行为表现的和正常一样。

`contain`

默认的滚动溢出行为将被内部的元素观察到，(例如：“bounce”效果或者刷新)，但是相邻的区域不会产生连续滚动效果，例如：在下面的元素不会被滚动。

`none`

相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止。

### 正式语法
```

overscroll-behavior-x =
  contain  |
  none     |
  auto

```

示例
--

在这个简单的例子中 (源代码), 有两个块级别的盒子，一个在另一个的里面。外部的盒子设置有一个大的 `width` 所以整个页面会水平滚动。内部的盒子设置有一个小的宽度 (和 `height`) 所以他位于观察点内合适的地方，但是他的内容被设置了一个大的 `width`, 所以它会水平的滚动。

默认情况下，当内部的盒子被滚动达到边界的时候，整个页面将开始滚动，这个行为有可能不是我们期望的。为了避便这个行为，你可以设置 `overscroll-behavior-x: contain` 在里面的盒子上：

```css
main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}
```

规范
--

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

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

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

See also
--------

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