object-position - CSS：层叠样式表

object-position
===============

CSS 属性 **`object-position`** 规定了可替换元素的内容，在这里我们称其为对象（即 **`object-position`** 中的 **`object`**）在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分，则会显示该元素的背景。

你还可以使用 `object-fit` 属性来改变可替换元素的对象的内在的大小（即它看上去的大小）的调整方式，借助拉伸与缩放等使对象更好地适应元素的内容框。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/\* <percentage> 值 \*/
object-position: 25% 75%;

/\* <length> 值 \*/
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/\* 边缘偏移值 \*/
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/\* 全局关键字 \*/
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;
```

### 取值

`<position>`

使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。

**备注：** 这些定位方式允许被替换元素的对象被定位到内容框外部。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `50% 50%` |
| 适用元素 | replaced elements |
| 是否是继承属性 | yes |
| Percentages | refer to width and height of element itself |
| 计算值 | as specified |
| Animation type | a repeatable list |

形式语法
----
```

object-position =
  <position>

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

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

```

示例
--

### 定位图像内容

#### HTML

HTML 包含两个 `<img>` 元素，分别展示了 MDN 的 logo。

```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```

#### CSS

CSS 包括 `<img>` 元素本身的默认样式，以及两个图像各自的样式。

```css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}
```

第一个图像的左边缘距元素框左边缘 10 个像素。第二个图像的右边缘与元素框的右边缘齐平，并位于元素框高度下方 10% 处。

#### 结果

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-position |

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

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

参见
--

* 其他与图像相关的 CSS 属性：`object-fit`，`image-orientation`，`image-rendering`，`image-resolution` (en-US)。


媒体查询 - CSS：层叠样式表

媒体查询
====

**CSS 媒体查询**（media query）是响应式设计的关键组成部分，你可以根据各种设备特征和参数是否存在以及对应的值来应用 CSS 样式。

通常根据视口大小来应用媒体查询，以便可以为不同屏幕大小的设备做出布局调整。例如，你可以为小屏设备设置较小的字体，在纵向模式下查看页面时增加段落间的边距，或者增加触摸屏上按钮的大小。

![笔记本电脑和移动设备具有不同的视口大小，可以使用媒体查询进行查询，我们可以看到内容布局的不同。](/zh-CN/docs/Web/CSS/CSS_media_queries/media-queries.svg)

在 CSS 中，可以使用 `@media` at 规则根据媒体查询的结果有条件地应用样式表的一部分。要有条件地应用整个样式表，请使用 `@import`。

在设置可重用的 HTML 组件时，你还可以使用容器查询，它允许你根据容器元素的大小而非视口或者其他设备特征来应用样式。

### 在 HTML 中使用媒体查询

在 HTML 中，媒体查询可以应用于各种元素：

* 在 `<link>` 元素的 `media` 属性中，其定义待应用链接资源（通常是 CSS）的媒体。
* 在 `<source>` 元素的 `media` 属性中，其定义待应用源的媒体。（这仅在 `<picture>` 元素内有效。）
* 在 `<style>` 元素的 `media` 属性中，其定义待应用样式的媒体。
### 在 JavaScript 中使用媒体查询

在 JavaScript 中，你可以使用 `Window.matchMedia()` 方法根据媒体查询测试窗口。你还可以使用 `MediaQueryList.addListener()` 在查询状态发生变化时收到通知。借助此功能，你的站点或应用可以响应设备配置、方向或状态的更改。

你可以在测试媒体查询中学到更多通过编程方式使用媒体查询的知识。

参考
--

### At 规则

* `@import`
* `@media`
指南
--

使用媒体查询

介绍媒体查询及其语法，以及用于构造媒体查询表达式的运算符和媒体特性。

通过编程方式使用媒体查询

描述如何在 JavaScript 代码中使用媒体查询来确定设备的状态，以及设置在媒体查询结果发生更改时（例如，当用户旋转屏幕或调整浏览器大小时）通知代码的监听器。

使用媒体查询增强无障碍 (en-US)

了解媒体查询如何帮助用户更好地了解你的网站。

打印

帮助改进 Web 内容打印输出的技巧和技术。

规范
--

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |

参见
--

* 容器查询
* 使用 `@supports` 来根据浏览器支持的 CSS 技术应用样式。


:fullscreen - CSS：层叠样式表

:fullscreen
===========

**`:fullscreen`** CSS 伪类匹配当前处于全屏模式的所有元素。如果有多个元素被放置在全屏模式下，则此选择器将匹配所有这些元素。

语法
--

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

使用说明
----

当元素在全屏模式和正常模式之间切换时，`:fullscreen` 伪类允许你配置样式表以自动调整内容的大小、样式或布局。

示例
--

在这个示例中，按钮的颜色根据文档是否处于全屏模式而改变。这是在不需要使用 JavaScript 显式应用样式更改的情况下完成的。

### HTML

该页面的 HTML 如下所示：

```html
<h1>MDN Web 文档演示：:fullscreen 伪类</h1>

<p>
  此演示使用 <code>:fullscreen</code> 伪类完全使用 CSS
  来实现自动更改用于开启和关闭全屏模式的按钮的样式。
</p>

<button id="fs-toggle">切换全屏</button>
```

ID 为 `"fs-toggle"` 的 `<button>` 将根据文档是否处于全屏模式而在淡红色和淡绿色之间切换。

### CSS

CSS 中实现这一功能的关键在于两条规则。第一条规则用于在元素不处于全屏状态时设置“切换全屏模式”按钮的背景颜色。这里使用了 `:not(:fullscreen)` 伪类，以查找未应用 `:fullscreen` 伪类的元素。

```css
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}
```

当文档*处于*全屏模式时，将应用以下 CSS，将背景颜色设置为淡红色。

```css
#fs-toggle:fullscreen {
  background-color: #faa;
}
```

规范
--

| Specification |
| --- |
| Fullscreen API Standard # :fullscreen-pseudo-class |

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

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

参见
--

* Fullscreen API
* Fullscreen API 指南
* `:not`
* `::backdrop`
* DOM API：`Element.requestFullscreen()`、`Document.exitFullscreen()` 和 `Document.fullscreenElement`
* `allowfullscreen` 属性


::marker - CSS：层叠样式表

::marker
========

**`::marker`** CSS 伪元素匹配列表的标记框（通常为一个符号或数字）。它作用在任何设置了 `display: list-item` 的元素或伪元素上，例如 `<li>` 和 `<summary>` 元素。

尝试一下
----

允许的属性值
------

在将 `::marker` 作为选择器的规则中，只能使用某些 CSS 属性：

* 所有的字体属性
* `white-space` 属性
* `color` 属性
* `text-combine-upright` (en-US)、`unicode-bidi` 和 `direction` 属性
* `content` 属性
* 所有的 animation 和 transition 属性

**备注：** 规范指出，将来可能会支持其他 CSS 属性。

语法
--

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

示例
--

### HTML

```html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
```

### CSS

```css
ul li::marker {
  color: red;
  font-size: 1.5em;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |

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

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

参见
--

* 默认拥有标记框的 HTML 元素：`<ol>`、`<li>`、`<summary>`


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

scroll-margin-bottom
====================

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

尝试一下
----

语法
--

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

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

### 取值

`<length>`

滚动容器的下外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-bottom =
  <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 滚动吸附明确控制滚动


Column combinator - CSS：层叠样式表

Column combinator
=================

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

通过**列合并符** (`||`) 链接两个元素时，它只会匹配被第二个 CSS 选择器匹配的元素，且此元素属于被第一个 CSS 选择器匹配的列元素。

```css
/\* 属于"被选择"列的表单元格 \*/
col.selected||td {
  background: gray;
}
```

语法
--
```

column-selector || cell-selector {
  /* style properties */
}
```

示例
--

### HTML

```html
<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </colgroup>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>
```

### CSS

```css
col.selected||td {
  background: gray;
  color: white;
  font-weight: bold;
}
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-column-combinator |

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

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

参见
--

* `<col>`
* `<colgroup>`
* `grid`


<gradient> - CSS：层叠样式表

<gradient>
==========

**`<gradient>`** CSS 数据类型 是 `<image>` 的一种特殊类型，包含两种或多种颜色的过渡转变。

尝试一下
----

CSS 渐变没有内在尺寸，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。

语法
--

`<gradient>` 数据类型是由下面列出的函数类型中的一个定义的。

### 线性渐变

线性渐变会在一个假想的直线上过渡颜色。线性渐变是由 `linear-gradient()` 函数产生的。

### 径向渐变

径向渐变从一个中间点（原点）开始过渡颜色。径向渐变是由 `radial-gradient()` 函数产生的。

### 重复渐变

重复渐变可根据需要复制渐变，以填充指定区域。重复渐变是使用 `repeating-linear-gradient()` 和 `repeating-radial-gradient()` 函数生成的。

### 锥形渐变

锥形渐变会沿着一个圆过渡颜色。锥形渐变是由 `conic-gradient()` 函数产生的。

插值
--

就像很多包含颜色的插值一样，渐变是在 alpha 预乘的颜色空间中插值的。这会避免在颜色和不透明度都在改变时出现未预料的灰色阴影。（注意旧的浏览器可能在使用 transparent 关键字 时不使用此行为。）

形式语法
----
```

<gradient> =
  <linear-gradient()>            |
  <repeating-linear-gradient()>  |
  <radial-gradient()>            |
  <repeating-radial-gradient()>

<linear-gradient()> =
  linear-gradient( [ <linear-gradient-syntax> ] )

<repeating-linear-gradient()> =
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )

<radial-gradient()> =
  radial-gradient( [ <radial-gradient-syntax> ] )

<repeating-radial-gradient()> =
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )

<linear-gradient-syntax> =
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>

<radial-gradient-syntax> =
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

<side-or-corner> =
  [ left | right ]  ||
  [ top | bottom ]

<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<radial-shape> =
  circle   |
  ellipse

<radial-size> =
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<linear-color-stop> =
  <color> <length-percentage>?

<linear-color-hint> =
  <length-percentage>

<radial-extent> =
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side

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

```

示例
--

### 线性渐变示例

简单的线性渐变示例。
```

<div class="linear-gradient">线性渐变</div>
```

```
div {
  width: 240px;
  height: 80px;
}
```

```css
.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}
```

### 径向渐变示例

简单的径向渐变。
```

<div class="radial-gradient">径向渐变</div>
```

```
div {
  width: 240px;
  height: 80px;
}
```

```css
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
```

### 重复渐变示例

简单的重复线性和径向渐变示例。
```

<div class="linear-repeat">重复的线性渐变</div>
<br />
<div class="radial-repeat">重复的径向渐变</div>
```

```
div {
  width: 240px;
  height: 80px;
}
```

```css
.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}
```

### 锥形渐变示例

简单的锥形渐变示例。注意这目前并非在浏览器中广泛支持。
```

<div class="conic-gradient">锥形渐变</div>
```

```
div {
  width: 200px;
  height: 200px;
}
```

```css
.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}
```

规范
--

| Specification |
| --- |
| CSS Images Module Level 4 # gradients |

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

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

参见
--

* 使用 CSS 渐变
* 渐变函数：`linear-gradient()`、`repeating-linear-gradient()`、`radial-gradient()`、`repeating-radial-gradient()`、`conic-gradient()`、`repeating-conic-gradient()` (en-US)
* CSS 基本数据类型
* CSS 单位和值
* CSS 介绍：值和单位


border-block-color - CSS：层叠样式表

border-block-color
==================

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

尝试一下
----

另一方向的边框颜色可用 `border-inline-color` 设置，此属性会设置 `border-inline-start-color` 和 `border-inline-end-color`。

语法
--

```css
border-block-color: yellow;
border-block-color: #f5f6f7;

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

### 取值

`<'color'>`

边框颜色。见 `color`。

形式定义
----

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

形式语法
----
```

border-block-color =
  <'border-top-color'>{1,2}

```

示例
--

### 竖排文本的边框

#### 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-block-color: red;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-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`


CSS 字体 - CSS：层叠样式表

CSS 字体
======

**CSS 字体**是一个 CSS 模块，它定义了字体相关的属性和字体资源是如何加载的。它允许定义一个字体的样式，如字体家族、尺寸或字重、行高，以及对于一个字符有几个字形的字体时要使用的字形。

基础示例
----

以下示例展示了使用基本字体属性来对段落文本添加样式的方法。

```css
p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}
```

```html
<p>
  Three hundred years ago<br />
  I thought I might get some sleep<br />
  I stretched myself out on an antique bed<br />
  An' my spirit did a midnite creep
</p>
```

它的结果如下所示：

可变字体示例
------

你可以在 v-fonts.com 和 axis-praxis.org 找到可变字体示例；参见可变字体指南以获取更多信息。

参考文献
----

### 属性

* `font`
* `font-family`
* `font-feature-settings`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing` (en-US)
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-style`
* `font-synthesis`
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian` (en-US)
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-weight`
* `line-height`
### @ 规则

* `@font-face`
* `@font-feature-values`
指南
--

文本和字体样式基础

在这篇面向初学者的文章中，我们详细介绍了文本和字体样式的基础知识，包括设置字重、字体家族和样式、字体简写、文本对齐和其他效果，以及行和字母间距。

OpenType 字体特性指南

字体特性（font feature）或变体（variant）指的是在同一个 OpenType 字体中包含的不同的字形或字符风格。它包括了连字（ligature，由字符组合而成的特殊字形，如“ﬁ”或“ﬄ” ）、字偶距（kerning，调整特定字母组合的间距）、分数形式、数字风格，和一票其他内容。这些都被称为 OpenType 特性，而且可以通过特定属性和一种底层属性指定（见 `font-feature-settings`）来控制。本文将介绍在 CSS 中使用 OpenType 字体特性的全部内容。

可变字体指南

**可变字体指南**是 OpenType 字体规范上的演进，它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。本文将介绍你需要知道的有关使用可变字体的所有内容。

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4  |


CSS Counter Styles - CSS：层叠样式表

CSS Counter Styles
==================

**CSS 计数器样式** is 是一个让你自定义计数器样式的 CSS 模块。

参考
--

### 属性

* `counter-increment`
* `counter-reset`
### At-rules

* `@counter-style`
    + `system` (en-US)
    + `additive-symbols`
    + `negative` (en-US)
    + `prefix` (en-US)
    + `suffix` (en-US)
    + `range` (en-US)
    + `pad`
    + `speak-as`
    + `fallback` (en-US)
指南
--

使用 CSS 计数器

描述如何使用计数器来给 HTML 元素计数，或者执行复杂的计数

规范
--

| Specification |
| --- |
| CSS Counter Styles Level 3  |

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

{{Compat}}


border-collapse - CSS：层叠样式表

border-collapse
===============

**`border-collapse`** CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

尝试一下
----

合并（*collapsed*）模式下，表格中相邻单元格共享边框。在这种模式下，CSS 属性`border-style` 的值 inset 表现为槽，值 outset 表现为脊。

分隔（\*separated）\*模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过 CSS 属性 `border-spacing` 来确定的。

语法
--

```css
/\* Keyword values \*/
border-collapse: collapse;
border-collapse: separate;

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

`border-collapse` 的属性值被定义为一个单独的关键词，可为下面两个值中的一个。

### 值

`collapse`

相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。

`separate`

默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。

### 正式语法
```

border-collapse =
  separate  |
  collapse

```

示例
--

### 各个浏览器引擎的多彩表格

#### HTML

```html
<table class="separate">
  <caption>
    <code>border-collapse: separate</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption>
    <code>border-collapse: collapse</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
.collapse {
  border-collapse: collapse;
}
.separate {
  border-collapse: separate;
}
table {
  display: inline-table;
  margin: 1em;
  border: dashed 6px;
  border-width: 6px;
}
table th,
table td {
  border: solid 3px;
}
.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ie {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-border-collapse |

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

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

参见
--

* `border-spacing`、`border-style`
* The `border-collapse` property alters the appearance of the `<table>` HTML element.


:nth-child() - CSS：层叠样式表

:nth-child()
============

CSS **`:nth-child()`** 伪类根据元素在父元素的子元素列表中的索引来选择元素。换言之，`:nth-child()` 选择器根据父元素内的所有兄弟元素的位置来选择子元素。

尝试一下
----

**备注：** 在 `element:nth-child()` 的语法中，子元素的计数包括任何元素类型的兄弟子元素；但是只有当*该子元素位置上的*元素与选择器的其他组件匹配时，才被视为匹配。

语法
--

`:nth-child()` 以一个参数来描述匹配兄弟元素列表中元素索引的模式。元素索引从 1 开始。

```css
:nth-child(<nth> [of <complex-selector-list>]?) {
  /\* ... \*/
}
```

### 关键字值

`odd`

表示元素在兄弟元素列表中的位置是奇数：1、3、5……。

`even`

表示元素在兄弟元素列表中的位置是偶数：2、4、6……。

### 函数符号

`<An+B>`

表示元素在兄弟元素列表中的位置是 `An+B` 模式的元素，其中 `n` 为正整数或 0，`A` 和 `B` 为整数，且 `A` 不为 0。其中：

* `A` 是整数步长，
* `B` 是整数偏移量，
* `n` 是从 0 开始的所有非负整数。

它可以被理解为列表中的第 `An+B` 个元素。`A` 和 `B` 必须都是 `<integer>` 值。

### `of <selector>` 语法

通过传递一个选择器参数，我们可以选择与该选择器匹配的第 **n** 个元素。例如，下面的选择器匹配前三个设置了 `class="important"` 的列表项。

```css
:nth-child(-n + 3 of li.important) {
}
```

这与将选择器移到函数之外不同，如：

```css
li.important:nth-child(-n + 3) {
}
```

该选择器会匹配属于前三个子元素，且与选择器 `li.important` 匹配的列表项。

示例
--

### 选择器示例

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

表示 HTML 表格中的奇数行：1、3、5……。

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

表示 HTML 表格中的偶数行：2、4、6……。

`:nth-child(7)`

表示第 7 个元素。

`:nth-child(5n)`

表示第 5、10、15……个元素。第一个匹配的元素是 **0** [=5x0]，但由于元素的索引是从 1 开始的而 `n` 从 0 开始，所以不会匹配任何元素。这乍一看可能有点奇怪，但是当公式中的 `B` 部分为 `>0` 的值时，就会变得更有意义，就像下面的示例一样。

`:nth-child(n+7)`

表示第七个及其之后的元素：**7** [=0+7]、**8** [=1+7]、**9** [=2+7]，**等等**。

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

表示第 **4** [=(3×0)+4]、**7** [=(3×1)+4]、**10** [=(3×2)+4]、**13** [=(3×3)+4]……个元素。

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

表示前三个元素。[=-0+3、-1+3、-2+3]

`p:nth-child(n)`

表示兄弟元素列表中的每个 `<p>` 元素。这与简单的 `p` 选择器选择的元素相同（尽管具有更高的优先级）。

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

表示每一个兄弟元素列表中的第一个 `<p>` 元素。这与 `:first-child` 选择器相同（并且具有相同的优先级）。

`p:nth-child(n+8):nth-child(-n+15)`

表示兄弟元素列表中的第 8 到第 15 个，且为 `<p>` 元素的元素。

### 详细示例

#### HTML

```html
<h3>
  <code>span:nth-child(2n+1)</code>，元素间不插入 <code><em></code> 元素。
</h3>
<p>第 1、3、5、7 个子节点被选中。</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>，元素间插入 <code><em></code> 元素。
</h3>
<p>
  第 1、5、7 个子节点被选中。<br />
  3 会被计数，因为它是一个子节点，但是它不会被选中，因为它不是
  <code><span></code>。
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>这是一个 `em`。</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>，元素间插入 <code><em></code> 元素。
</h3>
<p>
  第 1、4、6、8 个子节点被选中。<br />
  3 不会被计数或选中，因为它是 <code><em></code> 而不是
  <code><span></code>，而 <code>nth-of-type</code> 只选择该类型的子节点。
  <code><em></code> 被完全跳过和忽略。
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>这是一个 `em`。</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>
```

#### CSS
```

\* {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid tomato;
  display: inline-block;
  margin-bottom: 3px;
}
```

```css
.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: tomato;
}
```

#### 结果

### 使用 `of <selector>`

在这个示例中有一个无序列表，其中一些名字已经使用 `class="noted"` 将其标记为**标注项**。已使用粗底边框将它们高亮显示。

#### HTML

```html
<ul>
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
  <li>Aylin</li>
  <li>Leo</li>
  <li>Leyla</li>
  <li class="noted">Bruce</li>
  <li>Aisha</li>
  <li>Veronica</li>
  <li class="noted">Kyouko</li>
  <li>Shireen</li>
  <li>Tanya</li>
  <li class="noted">Marlene</li>
</ul>
```

#### CSS
```

\* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}
```

在下面的 CSS 中，我们选中标记了 `class="noted"` 的第**偶数**个列表项。

```css
li:nth-child(even of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}
```

#### 结果

带有 `class="noted"` 的项具有粗底边框，而第 3、10 和 17 项具有纯色背景，因为它们是带有 `class="noted"` 的第*偶数*个列表项。

### `of <selector>` 语法与 `<selector> nth-child`

在这个示例中，有两个无序列表，其中第一个列表显示了 `li:nth-child(-n + 3 of .noted)` 的效果，第二个列表显示了 `li.noted:nth-child(-n + 3)` 的效果。

#### HTML

```html
<ul class="one">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
<ul class="two">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
```

#### CSS
```

\* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}
```

```css
ul.one > li:nth-child(-n + 3 of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

ul.two > li.noted:nth-child(-n + 3) {
  background-color: tomato;
  border-bottom-color: seagreen;
}
```

#### 结果

第一个示例将样式应用于前三个带有 `class="noted"` 的列表项，无论它们是否是列表中的前三项。

第二个示例仅将样式应用于列表中的前三个项目中带有 `class="noted"` 的列表项。

### 使用 `of <selector>` 修复条纹表格

表格通常会使用*斑马条纹*，即在行之间交替使用浅色和深色背景颜色，使表格更易于阅读和无障碍。如果某一行被隐藏，条纹将会被合并，从而改变了预期的效果。在这个示例中，你可以看到两个带有 `hidden` 行的表格。第二个表格使用 `of :not([hidden])` 处理隐藏的行。

#### HTML
```

<div class="wrapper">
```

```html
<table class="broken">
  <thead>
    <tr><th>姓名</th><th>年龄</th><th>国家</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>马达加斯加</td></tr>
    <tr><td>Yuki</td><td>48</td><td>日本</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>墨西哥</td></tr>
    <tr><td>Adilah</td><td>27</td><td>摩洛哥</td></tr>
    <tr><td>Vieno</td><td>55</td><td>芬兰</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>巴西</td></tr>
  </tbody>
</table>
<table class="fixed">
  <thead>
    <tr><th>姓名</th><th>年龄</th><th>国家</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>马达加斯加</td></tr>
    <tr><td>Yuki</td><td>48</td><td>日本</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>墨西哥</td></tr>
    <tr><td>Adilah</td><td>27</td><td>摩洛哥</td></tr>
    <tr><td>Vieno</td><td>55</td><td>芬兰</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>巴西</td></tr>
  </tbody>
</table>
```

```
</div>
```

#### CSS
```

.wrapper {
  display: flex;
  justify-content: space-around;
}
td {
  padding: 0.125rem 0.5rem;
}
```

```css
.broken > tbody > tr:nth-child(even) {
  background-color: silver;
}
```

```css
.fixed > tbody > tr:nth-child(even of :not([hidden])) {
  background-color: silver;
}
```

#### 结果

第一个表格直接使用了 `:nth-child(even)`，且在第三行应用了 `hidden` 属性。因此，在这种情况下，第三行是不可见的，第二行和第四行会被计为偶数项，尽管从技术上讲它们是偶数项，但从视觉上讲它们不是。

第二个表格使用了 *of 语法*，使用 `:nth-child(even of :not([hidden]))` 以只选择**不**隐藏的 `tr`。

规范
--

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

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

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

参见
--

* `:nth-of-type()`
* `:nth-last-child()`
* `:has()`：用于选择父元素的伪类
* 树结构的伪类
* CSS 选择器模块


scroll-padding-block - CSS：层叠样式表

scroll-padding-block
====================

简写属性 **`scroll-padding-block`** 设置了元素的块向滚动内边距。

尝试一下
----

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

属性构成
----

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

* `scroll-padding-block-end`
* `scroll-padding-block-start`
语法
--

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

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

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

### 取值

`<length-percentage>`

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

`auto`

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `scroll-padding-block-start`: `auto`
* `scroll-padding-block-end`: `auto`
 |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as each of the properties of the shorthand:* `scroll-padding-block-start`: as specified
* `scroll-padding-block-end`: as specified
 |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding-block =
  [ auto | <length-percentage [0,∞]> ]{1,2}

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

```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-block |

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

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

参见
--

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


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

column-rule-style
=================

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

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

Syntax
------
```

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

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

```
```

column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

column-rule-style: inherit;
```

### Values

<br-style>

Is a keyword defined by `border-style` describing the style of the rule. The styling must be interpreted as in the collapsing border model.

Example
-------

```css
#header {
  -moz-column-rule-style: inset;
}
```

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

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

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

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


:-moz-drag-over - CSS：层叠样式表

:-moz-drag-over
===============

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

**`:-moz-drag-over`** CSS 伪类是一个 Mozilla 扩展 (en-US)，用于在调用 `dragover` 事件时匹配一个元素。

语法
--

```css
:-moz-drag-over {
  /\* ... \*/
}
```

示例
--

### HTML

```html
<table border="1">
  <tr>
    <td width="100px" height="100px">Drag Over</td>
  </tr>
</table>
```

### CSS

```css
td:-moz-drag-over {
  color: red;
}
```

### 结果

规范
--

不属于任何标准。

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

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

参见
--

* Mozilla CSS 扩展 (en-US)
* HTML 拖放


text-decoration-color - CSS：层叠样式表

text-decoration-color
=====================

CSS 属性 **`text-decoration-color`** 用于设置文本修饰线的颜色，文本修饰线是通过 `text-decoration-line` 属性指定的。

修饰线包括下划线、上划线、删除线和波浪线，波浪线的典型用途是标明内容拼写错误（仅举例）。被指定的颜色会作用到该属性值有效范围内的所有修饰线上。

尝试一下
----

CSS 没有直接的机制为每种线型指定唯一的颜色，不过可以通过嵌套元素的方法来实现这种效果：用 `text-decoration-line` 属性为每个元素应用一种线型，再用 `text-decoration-color` 指定线的颜色。

语法
--

```css
/\* <color> values \*/
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/\* Global values \*/
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;
```

### 值

`<color>`

修饰文本的线的颜色。

### 形式语法
```

text-decoration-color =
  <color>

```

示例
--

```html
<p>
  This paragraph has <s>some erroneous text</s> inside it that I want to call
  attention to.
</p>
```

```css
p {
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
```

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

It is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminosity of the text and background color values.

Color alone should not be used to convey meaning. For example, change of text and text-decoration-color alone is not enouch to indicate a link has focus.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-color-property |

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

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

参见
--

* 当要设置多个线修饰属性时，用 `text-decoration` 简写属性会比分别写多个属性更方便。
* `<color>` 数据类型
* 其他与颜色相关的属性：`background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color` (en-US), `text-shadow`, `caret-color`, 和 `column-rule-color`
* 使用 CSS 为 HTML 设置颜色


line-break - CSS：层叠样式表

line-break
==========

设置 CSS 属性 **`line-break`** 可以用来处理如何断开（break lines）带有标点符号的中文、日文或韩文（CJK）文本的行。

```css
/\* Keyword values \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

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

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

语法
--

### 值

`auto`

使用默认的断行规则分解文本。

`loose`

使用尽可能松散（least restrictive）的断行规则分解文本。一般用于短行的情况，如报纸。

`normal`

使用最一般（common）的断行规则分解文本。

`strict`

使用最严格（stringent）的断行原则分解文本。

`anywhere`

在每个印刷字符单元（typographic character unit）的周围，都有一个自动换行（soft wrap）的机会，包括任何标点符号（punctuation character）或是保留的空白字符（preserved white spaces），或是单词之间。但忽略任何用于阻止换行的字符，即使是来自 GL、WJ 或 ZWJ 字符集的字符，或是由 word-break 属性强制的字符。不同的换行机会拥有相同的优先级。也不应用断字符（hyphenation，可能是 "-"）。

英文原文：There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

### 正式语法
```

line-break =
  auto      |
  loose     |
  normal    |
  strict    |
  anywhere

```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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


::first-line (:first-line) - CSS：层叠样式表

::first-line (:first-line)
==========================

**`::first-line`** CSS pseudo-element （CSS 伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。

::first-line 伪元素只能在块容器中，所以，`::first-line`伪元素只能在一个 display 值为 block, `inline-block`, `table-cell` 或者 `table-caption`中有用.。在其他的类型中，`::first-line` 是不起作用的。

允许的属性值
------

在一个使用了 `::first-line` 伪元素的选择器中，只有很小的一部分 css 属性能被使用：

* 所有和字体有关的属性：`font`, `font-kerning`, `font-style`, `font-variant`, `font-variant-numeric`, `font-variant-position`, `font-variant-east-asian` (en-US), `font-variant-caps`, `font-variant-alternates`, `font-variant-ligatures`, `font-synthesis`, `font-feature-settings`, `font-language-override`, `font-weight`, `font-size`, `font-size-adjust`, `font-stretch`, and `font-family`
* `color`
* 所有和背景有关的属性： `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, and `background-blend-mode`
* `word-spacing`, `letter-spacing`, `text-decoration`, `text-transform`, and `line-height`
* `text-shadow`, `text-decoration`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, and `vertical-align`.

这个列表将来可能会被扩展，但是推荐的是，你不要使用任何上述没有提到的属性。

**备注：** 在 CSS 2 中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。

因为过去的浏览器都实现过 CSS 2 的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。

如果需要支持老旧的浏览器，那么 `:first-line` 是唯一的选择，反之，更推荐使用 `::first-line`。

语法
--

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

### text-transform

将每个段落中的第一行字母转换成大写

#### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>
```

#### CSS

```css
p::first-line {
  text-transform: uppercase;
}
```

#### 输出

### margin-left

`margin-left` 在 first-line 伪元素上无效

#### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>
```

#### CSS

```css
p::first-line {
  margin-left: 20px;
}
```

#### 输出

### text-indent

`text-indent` 在 first-line 伪元素上无效

#### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>
```

#### CSS

```css
p::first-line {
  text-indent: 20px;
}
```

#### 输出

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |

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

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

参见
--

* The `::first-letter` pseudo-element.


object-fit - CSS：层叠样式表

object-fit
==========

**`object-fit`** CSS 属性指定可替换元素（例如：`<img>` 或 `<video>`）的内容应该如何适应到其使用高度和宽度确定的框。

你可以通过使用 `object-position` 属性来切换被替换元素的内容对象在元素框内的对齐方式。

尝试一下
----

语法
--

```css
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
/\* Global values \*/
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;
```

object-fit 属性由下列的值中的单独一个关键字来指定。

### 取值

`contain`

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

`cover`

被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

`fill`

被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

`none`

被替换的内容将保持其原有的尺寸。

`scale-down`

内容的尺寸与 `none` 或 `contain` 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

形式定义
----

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

形式语法
----
```

object-fit =
  fill        |
  contain     |
  cover       |
  none        |
  scale-down

```

示例
--

### 为图像设置 object-fit

#### HTML

```html
<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />
</section>
```

#### CSS

```css
h2 {
  font-family:
    Courier New,
    monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-fit |

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

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

参见
--

* 其他与图像相关的 CSS 属性：`object-position`、`image-orientation`、`image-rendering`、`image-resolution` (en-US)。
* `background-size`


border-bottom - CSS：层叠样式表

border-bottom
=============

border-bottom 简写属性把下边框的所有属性：`border-bottom-color`，`border-bottom-style` 与 `border-bottom-width` 设置到了一个声明中。这些属性描述了元素的下边框样式。

尝试一下
----

与所有的简记属性相同， `border-bottom` 定义了它所有可以定义的属性，即使他们并没有被显式地定义。它把所有未被显式定义的参数都设置为了默认值，这意味着这些值将被定义为：

```css
border-bottom-style: dotted;
border-bottom: thick green;
```

它和以下的代码是等价的：

```css
border-bottom-style: dotted;
border-bottom: none thick green;
```

顺便一提，在 `border-bottom` 之前定义的 `border-bottom-style` 的值因此被忽略了。由于 `border-bottom-style` 并没有默认值，未被定义的 `border-style` 参数的值将被设置为 `none`，也就是无底边框。

语法
--

```css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;
```

### 值

`<br-width>`

见 `border-bottom-width`。

`<br-style>`

见 `border-bottom-style`。

`<color>`

见 `border-bottom-color`。

### 形式语法
```

border-bottom =
  <line-width>  ||
  <line-style>  ||
  <color>

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

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

示例
--

```html
<div>This box has a border on the bottom side.</div>
```

```css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

规范
--

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

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

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


:in-range - CSS：层叠样式表

:in-range
=========

**`in-range`** CSS 伪类代表一个 `<input>` 元素，其当前值处于属性 `min` 和 `max` 限定的范围之内。

尝试一下
----

这个伪类很有用，可以给用户提供一个视觉提示，让他们知道字段的当前值是否在允许的范围内。

**备注：** 该伪类仅适用于具有（且可以接受）范围限制的元素。如果没有这样的限制，元素值就无所谓“in-range”和“out-of-range”。

语法
--

```css
:in-range {
  /\* ... \*/
}
```

示例
--

### HTML

```html
<form action="" id="form1">
  <ul>
    Values between 1 and 10 are valid.
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12"
 required />
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>
```

### CSS

```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}
```

### 结果

**备注：** 内容为空的 `<input>` 不算作超出范围，因此不会被 `:out-of-range` 伪类选择器应用。虽然目前 `:blank` 伪类可用于选择空白输入，但该伪类仍处于实验性阶段且得到的支持有限。建议你使用 `required` 属性和 `:invalid` 伪类来提供更为通用的逻辑和样式以使输入变为必填项（`:invalid` 伪类将为空白*和*超出范围的输入提供样式）。

规范
--

| Specification |
| --- |
| HTML Standard # selector-in-range |
| Selectors Level 4 # in-range-pseudo |

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

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

参见
--

* `:out-of-range`
* 表单数据校验


CSS Shapes - CSS：层叠样式表

CSS Shapes
==========

**CSS Shapes** 是一个 CSS 模块，用于定义在 CSS 值中使用的几何形状。

**备注：** ### CSS3 Shapes & CSS3 Regionshttps://www.w3.org/TR/css-shapes-1/ > https://www.w3.org/TR/css-regions-1/

Reference
---------

### Properties

* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
### Data types

* `<basic-shape>`
Guides
------

*None.*

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

| Specification |
| --- |
| CSS Shapes Module Level 1  |


order - CSS：层叠样式表

order
=====

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 **`order`** 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 `order` 属性的值的增序进行布局。拥有相同 `order` 属性值的元素按照它们在源代码中出现的顺序进行布局。

**备注：** `order` 仅仅对元素的视觉顺序 (**visual order**) 产生作用，并不会影响元素的逻辑或 tab 顺序。 **`order`** 不可以用于非视觉媒体，例如 speech。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | Flex items, grid items, and absolutely-positioned flex and grid container children |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | an integer |

参考 使用 CSS 弹性盒子 (en-US) 获取更多信息。

语法
--

```css
/\* Numerical value including negative numbers \*/
order: 5;
order: -5;

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

### 取值

`<integer>`

表示此可伸缩项目所在的次序组。

### Formal syntax
```

order =
  [ <'layout-order'> <'reading-order'>? ]  |
  [ [ reading || layout ] && <integer> ]

```

例子
--

这里是一个基本的 HTML 代码片段：

```html
<!doctype html>
<header>…</header>
<div id="main">
  <article>…</article>
  <nav>…</nav>
  <aside>…</aside>
</div>
<footer>…</footer>
```

下面的 CSS 代码会创建一个经典的双 sidebar 围绕一个中央内容块的布局。Flexible Box 布局模块会自动地创建三个具有相同高度的内容块，也会使用所有可用的水平空间。

```css
#main {
  display: flex;
}
#main > article {
  flex: 1;
  order: 2;
}
#main > nav {
  width: 200px;
  order: 1;
}
#main > aside {
  width: 200px;
  order: 3;
}
```

规范
--

| Specification |
| --- |
| CSS Display Module Level 3 # order-property |

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

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

参考
--

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


flex-grow - CSS：层叠样式表

flex-grow
=========

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-grow`** CSS 设置 flex 项 主尺寸 的 flex 增长系数。

尝试一下
----

语法
--

满足CSS 属性值定义语法
```

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

```

。

```css
/\* <number> 值 \*/
flex-grow: 3;
flex-grow: 0.6;

/\* 全局值 \*/
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: unset;
```

`flex-grow` 的属性规定为一个 `<number>`。

### 值

`<number>`

参见 `<number>`。负值无效，默认为 0。

描述
--

 这个属性规定了 `flex-grow` 项在 flex 容器中分配剩余空间的相对比例。
 主尺寸是项的宽度或高度，这取决于`flex-direction`值。

剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。

`flex-grow` 与其他的 flex 属性`flex-shrink`和`flex-basis`一起使用，通常使用`flex` 速记来定义，以确保所有的值都被设置。

正式定义
----

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

正式语法
----
```

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

```

样例
--

### 设置 flex 项目增长因子

#### HTML

```html
<h4>这展示了 flex 增长</h4>
<h5>A,B,C 和 F 具有 flex-grow:1。D 和 E 具有 flex-grow:2 .</h5>
<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 class="box" style="background-color:brown;">F</div>
</div>
```

#### CSS

```css
#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
```

#### 结果

规范
--

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

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

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

参见
--

* 使用 CSS 弹性盒子 (en-US)
* CSS Flexbox 指南：弹性盒子的基本概念
* CSS Flexbox 指南：控制 Flex 子元素在主轴上的比例
* `flex-grow` is weird. Or is it? Manuel Matuzovic 在 CSS-Tricks 上的文章，说明了 flex-grow 的工作原理


CSS 选择器 - CSS：层叠样式表

CSS 选择器
=======

**CSS 选择器**规定了 CSS 规则会被应用到哪些元素上。

**备注：** 暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素 的选择器或者组合器。

基本选择器
-----

通用选择器

选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。

**语法：**`*` `ns|*` `*|*`

**例子：**`*` 将匹配文档的所有元素。

元素选择器

按照给定的节点名称，选择所有匹配的元素。

**语法：**`elementname`

**例子：**`input` 匹配任何 `<input>` 元素。

类选择器

按照给定的 `class` 属性的值，选择所有匹配的元素。

**语法：**`.classname`

**例子：**`.index` 匹配任何 `class` 属性中含有 "index" 类的元素。

ID 选择器

按照 `id` 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。

**语法：**`#idname`

**例子：**`#toc` 匹配 ID 为 "toc" 的元素。

属性选择器

按照给定的属性，选择所有匹配的元素。

**语法：**`[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`

**例子：**`[autoplay]` 选择所有具有 `autoplay` 属性的元素（不论这个属性的值是什么）。

分组选择器（Grouping selector）
------------------------

选择器列表

`,` 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。

**语法：**`A, B`

**示例：**`div, span` 会同时匹配 `<span>` 元素和 `<div>` 元素。

组合器（Combinator）
---------------

后代组合器

“ ”（空格）组合器选择前一个元素的后代节点。

**语法：**`A B`

**例子：**`div span` 匹配所有位于任意 `<div>` 元素之内的 `<span>` 元素。

直接子代组合器

`>` 组合器选择前一个元素的直接子代的节点。

**语法：**`A > B`

**例子：**`ul > li` 匹配直接嵌套在 `<ul>` 元素内的所有 `<li>` 元素。

一般兄弟组合器

`~` 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

**语法：**`A ~ B`

**例子：**`p ~ span` 匹配同一父元素下，`<p>` 元素后的所有 `<span>` 元素。

紧邻兄弟组合器

`+` 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

**语法：**`A + B`

**例子：**`h2 + p` 会匹配*紧*邻在 h2 元素后的第一个 `<p>` 元素。

列组合器
实验性

`||` 组合器选择属于某个表格行的节点。

**语法：**`A || B`

**例子：**`col || td` 会匹配所有 `<col>` 作用域内的 `<td>` (en-US) 元素。

伪选择器（Pseudo）
------------

伪类

`:` 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。

**例子：**`a:visited` 匹配所有曾被访问过的 `<a>` 元素。

伪元素

`::` 伪选择器用于表示无法用 HTML 语义表达的实体。

**例子：**`p::first-line` 匹配所有 `<p>` 元素的第一行。

规范
--

| Specification |
| --- |
| Selectors Level 4  |

伪类和伪元素的规范位于各自的页面中。

参见
--

* CSS 优先级


transform-function - CSS：层叠样式表

transform-function
==================

**`<transform-function>`** CSS 数据类型用于对元素的显示做变换。通常，这种变换可以由矩阵表示，并且可以使用每个点上的矩阵乘法来确定所得到的图像。

2D 图形 的坐标系统
-----------

目前有多种用来描述转换坐标模型，最常用的是 笛卡尔坐标系统 和 齐次坐标。

### 笛卡尔坐标

在笛卡尔坐标系中，每个 欧氏空间 里的点都由横坐标和纵坐标这两个值来确定。在 CSS（和大部分的计算机图形学）中，原点 `(0, 0)` 在元素的左上角。每个点都使用数学上的向量符号 (x,y) 来描述。

![A cartesian plane showing the negative Y and positive X axis starting from origin with three points P1, P2 and P3 with corresponding X and Y values](/zh-CN/docs/Web/CSS/transform-function/coord_in_r2.png)

示例
--

### 变换函数对比

以下示例提供了一个由 DOM 元素和变换创建的 3D 立方体，以及一个选择菜单，允许你选择不同的变换函数来变换立方体。因此，你可以比较不同变换类型的效果。

选择一个选项，将变换应用到立方体上；2 秒后，立方体会恢复到初始状态。立方体的初始状态使用了 `transform3d()` 以进行略微的旋转，以便你查看每一个变换的效果。

#### HTML

```html
<main>
  <section id="example-element">
    <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>
  </section>

  <div class="select-form">
    <label for="transfunction">选择变换函数</label>
    <select id="transfunction">
      <option selected>选择函数</option>
      <option>rotate(360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateZ(360deg)</option>
      <option>rotate3d(1, 1, 1, 90deg)</option>
      <option>scale(1.5)</option>
      <option>scaleX(1.5)</option>
      <option>scaleY(1.5)</option>
      <option>scaleZ(1.5)</option>
      <option>scale3d(1, 1.5, 1.5)</option>
      <option>skew(17deg, 13deg)</option>
      <option>skewX(17deg)</option>
      <option>skewY(17deg)</option>
      <option>translate(100px, 100px)</option>
      <option>translateX(100px)</option>
      <option>translateY(100px)</option>
      <option>translateZ(100px)</option>
      <option>translate3d(50px, 50px, 50px)</option>
      <option>perspective(200px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
    </select>
  </div>
</main>
```

#### CSS

```css
main {
  width: 400px;
  height: 200px;
  padding: 50px;
  background-image: linear-gradient(135deg, white, cyan, white);
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

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

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

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

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

.select-form {
  margin-top: 50px;
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const example = document.querySelector("#example-element");

selectElem.addEventListener("change", () => {
  if (selectElem.value === "Choose a function") {
    return;
  } else {
    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
    setTimeout(() => {
      example.style.transform = "rotate3d(1, 1, 1, 30deg)";
    }, 2000);
  }
});
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-functions |
| CSS Transforms Module Level 2 # transform-functions |

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

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

参见
--

* CSS `transform` 属性
* 单独的变换属性：
    + `translate`
    + `scale`
    + `rotate`


::-webkit-progress-value - CSS：层叠样式表

::-webkit-progress-value
========================

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

**`::-webkit-progress-value`** CSS 伪元素 代表的是`<progress>` 元素中进度条未完成的部分。它是`::-webkit-progress-bar` 伪元素的子元素。

**备注：** 为了使 `::-webkit-progress-value` 生效， `<progress>` 元素的`-webkit-appearance` (en-US) 需要设置为 `none`。

示例
--

### HTML

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

### CSS

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

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

### 结果

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

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

规范
--

不属于任何规范。这是 WebKit/Blink 专有的一个伪元素。

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

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

参见
--

* WebKit/Blink 使用的用来修改`<progress>`元素其他部分样式的伪元素：
    + `::-webkit-progress-bar`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`
* `::-ms-fill`


font - CSS：层叠样式表

font
====

概述
--

`font` 属性可以用来作为 `font-style`, `font-variant`, `font-weight`, `font-size`, `line-height` 和 `font-family` 属性的简写，或将元素的字体设置为系统字体。

尝试一下
----

与任何简写属性一样，任何未指定的值都将设置为其对应的初始值（可能覆盖先前使用非简写属性设置的值）。虽然不能通过 font 直接设置，但是`font-stretch`，`font-size-adjust` 和 `font-kerning` 也会重置为初始值。

语法
--

可以将`font`属性指定为单个关键字，它将选择系统字体，或者作为字体相关的属性的简写。

如果将 `font` 指定为系统关键字，则它必须是以下之一：`caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar`。

如果 `font` 字体相关的属性的简写：

* 必须包含以下值：
    + `<font-size>`
    + `<font-family>`
* 可以选择性包含以下值：
    + `<font-style>`
    + `<font-variant>`
    + `<font-weight>`
    + `<line-height>`
* `font-style`, `font-variant` 和 `font-weight` 必须在 `font-size` 之前
* 在 CSS 2.1 中 `font-variant` 只可以是 `normal` 和 `small-caps`
* `line-height` 必须跟在 `font-size` 后面，由 "/" 分隔，例如 "`16px/3`"
* `font-family` 必须最后指定
### 值

`<'font-style'>`

见 `font-style` 属性。

`<'font-variant'>`

见 `font-variant` 属性。

`<'font-weight'>`

见 `font-weight` 属性。

`<'font-size'>`

见 `font-size` 属性。

`<'line-height'>`

见 `line-height` 属性。

`<'font-family'>`

见 `font-family` 属性。

#### 系统字体

`caption`

用于标题控件（如按钮，下拉列表等）的系统字体。

`icon`

用于标签图标的系统字体。

`menu`

菜单中（如下拉菜单和菜单列表）使用的系统字体。

`message-box`

用于对话框的系统字体。

`small-caption`

用于小标题控件的系统字体。

`status-bar`

用于窗口状态栏的系统字体。

系统关键字前缀

浏览器经常会多实现几个带前缀的关键字；Gecko 实现了 `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, 和 `-moz-field`.

### 形式语法
```

font =
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]  |
  <system-family-name>

<font-variant-css2> =
  normal      |
  small-caps

<font-stretch-css3> =
  normal           |
  ultra-condensed  |
  extra-condensed  |
  condensed        |
  semi-condensed   |
  semi-expanded    |
  expanded         |
  extra-expanded   |
  ultra-expanded

<system-family-name> =
  caption        |
  icon           |
  menu           |
  message-box    |
  small-caption  |
  status-bar

```

示例
--

### 设置字体属性

```css
/\* Set the font size to 12px and the line height to 14px.
 Set the font family to sans-serif \*/
p {
  font: 12px/14px sans-serif;
}

/\* Set the font size to 80% of the parent element
 or default value (if no parent element present).
 Set the font family to sans-serif \*/
p {
  font: 80% sans-serif;
}

/\* Set the font weight to bold,
 the font-style to italic,
 the font size to large,
 and the font family to serif. \*/
p {
  font: bold italic large serif;
}

/\* Use the same font as the status bar of the window \*/
p {
  font: status-bar;
}
```

### 运行实例
```

<p>
  Change the radio buttons below to see the generated shorthand and its effect.
</p>
<form action="createShortHand()">
  <div class="cf">
    <div class="setPropCont">
      font-style<br />
      <input
 type="radio"
 id="font-style-none"
 name="font\_style"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="font-style-none">none</label><br />
      <input
 type="radio"
 id="font-style-normal"
 name="font\_style"
 value="normal"
 onchange="setCss()" />
      <label for="font-style-normal">normal</label><br />
      <input
 type="radio"
 id="font-style-italic"
 name="font\_style"
 value="italic"
 onchange="setCss()" />
      <label for="font-style-italic">italic</label><br />
      <input
 type="radio"
 id="font-style-oblique"
 name="font\_style"
 value="oblique"
 onchange="setCss()" />
      <label for="font-style-oblique">oblique</label>
    </div>

    <div class="setPropCont">
      font-variant<br />
      <input
 type="radio"
 id="font-variant-none"
 name="font\_variant"
 checked=""
 value=" "
 onchange="setCss()" />
      <label for="font-variant-none">none</label><br />
      <input
 type="radio"
 id="font-variant-normal"
 name="font\_variant"
 value="normal"
 onchange="setCss()" />
      <label for="font-variant-normal">normal</label><br />
      <input
 type="radio"
 id="font-variant-small-caps"
 name="font\_variant"
 value="small-caps"
 onchange="setCss()" />
      <label for="font-variant-small-caps">small-caps</label>
    </div>

    <div class="setPropCont">
      font-weight<br />
      <input
 type="radio"
 id="font-weight-none"
 name="font\_weight"
 value=""
 onchange="setCss()" />
      <label for="font-weight-none">none</label><br />
      <input
 type="radio"
 id="font-weight-normal"
 checked=""
 name="font\_weight"
 value="400"
 onchange="setCss()" />
      <label for="font-weight-normal">normal</label><br />
      <input
 type="radio"
 id="font-weight-bold"
 name="font\_weight"
 value="700"
 onchange="setCss()" />
      <label for="font-weight-bold">bold</label>
    </div>

    <div class="setPropCont">
      font-size<br />
      <input
 type="radio"
 id="font-size-12px"
 name="font\_size"
 value="12px"
 onchange="setCss()" />
      <label for="font-size-12px">12px</label><br />
      <input
 type="radio"
 id="font-size-16px"
 name="font\_size"
 value="16px"
 checked=""
 onchange="setCss()" />
      <label for="font-size-16px">16px</label><br />
      <input
 type="radio"
 id="font-size-24px"
 name="font\_size"
 value="24px"
 onchange="setCss()" />
      <label for="font-size-24px">24px</label>
    </div>

    <div class="setPropCont">
      line-height<br />
      <input
 type="radio"
 id="line-height-none"
 name="line\_height"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="line-height-none">none</label><br />
      <input
 type="radio"
 id="line-height-1.2"
 name="line\_height"
 value="/1.2"
 onchange="setCss()" />
      <label for="line-height-1.2">1.2</label><br />
      <input
 type="radio"
 id="line-height-3"
 name="line\_height"
 value="/3"
 onchange="setCss()" />
      <label for="line-height-3">3</label>
    </div>
    <br />

    <div class="setPropCont fontfamily">
      font-family<br />
      <input
 type="radio"
 id="font-family-courier"
 name="font\_family"
 checked=""
 value="courier"
 onchange="setCss(5,'courier')" />
      <label for="font-family-courier">courier</label><br />
      <input
 type="radio"
 id="font-family-serif"
 name="font\_family"
 value="serif"
 onchange="setCss()" />
      <label for="font-family-serif">serif</label><br />
      <input
 type="radio"
 id="font-family-sans-serif"
 name="font\_family"
 value="sans-serif"
 onchange="setCss()" />
      <label for="font-family-sans-serif">sans-serif</label><br />
      <input
 type="radio"
 id="font-family-arial"
 name="font\_family"
 value="arial"
 onchange="setCss()" />
      <label for="font-family-arial">Arial</label><br />
      <input
 type="radio"
 id="font-family-monospace"
 name="font\_family"
 value="monospace"
 onchange="setCss()" />
      <label for="font-family-monospace">monospace</label><br />
      <input
 type="radio"
 id="font-family-cursive"
 name="font\_family"
 value="cursive"
 onchange="setCss()" />
      <label for="font-family-cursive">cursive</label><br />
      <input
 type="radio"
 id="font-family-fantasy"
 name="font\_family"
 value="fantasy"
 onchange="setCss()" />
      <label for="font-family-fantasy">fantasy</label><br />
      <input
 type="radio"
 id="font-family-system-ui"
 name="font\_family"
 value="system-ui"
 onchange="setCss()" />
      <label for="font-family-system-ui">system-ui</label><br />
    </div>
  </div>

  <div class="cf propInputs">
    <div class="propInputCont tar">font :</div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_style" /><br />
      font-style <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_variant" /> <br />
      font-variant <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_weight" /> <br />
      font-weight <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_size" /> <br />
      font-size <br />
      mandatory
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_line\_height" /> <br />
      line-height <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_family" />
      <br />
      font-family <br />
      mandatory
    </div>
  </div>
</form>

<div class="fontShortHand">This is some sample text.</div>
<br /><br /><br /><br /><br /><br />
```

```
body,
input {
  font: 14px arial;
  overflow: hidden;
}

.propInputCont {
  float: left;
  text-align: center;
  margin-right: 5px;
  width: 80px;
}

.setPropCont {
  float: left;
  margin-right: 5px;
  width: 120px;
}

.propInputs,
.setPropCont {
  margin-bottom: 1em;
}

.curCss {
  border: none;
  border-bottom: 1px solid black;
  text-align: center;
  width: 80px;
}

.mandatory {
  border-bottom-color: red;
}

.cf::before,
.cf::after {
  content: " ";
  display: table;
}

.cf::after {
  clear: both;
}

.tar {
  width: 40px;
  text-align: right;
}
.fontfamily {
  display: inline-block;
}
```

```
const textAreas = document.getElementsByClassName("curCss");

function getProperties() {
  return (
    `${getCheckedValue("font\_style")} ` +
    `${getCheckedValue("font\_variant")} ` +
    `${getCheckedValue("font\_weight")} ` +
    `${getCheckedValue("font\_size")}` +
    `${getCheckedValue("line\_height")} ` +
    `${getCheckedValue("font\_family")}`
  );
}

function getCheckedValue(radioName) {
  const radios = document.forms[0].elements[radioName];
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      const curElemName = `input\_${radioName}`;
      const curElem = document.getElementById(curElemName);
      curElem.value = radios[i].value;

      return radios[i].value;
    }
  }
}

function setCss() {
  getProperties();
  injectCss(shortText);
}

function injectCss(cssFragment) {
  const old = document.body.getElementsByTagName("style");
  if (old.length > 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.textContent = `.fontShortHand{font: ${cssFragment}}`;
  document.body.appendChild(css);
}

setCss();
```

规范
--

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

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

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


margin - CSS：层叠样式表

margin
======

**`margin`** 属性为给定元素设置所有四个（上右下左）方向的外边距属性。也就是 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left` 四个外边距属性设置的简写。

尝试一下
----

上、下外边框的设置对\*不可替换\*内联元素，如 `<span>` 和 `<code>`，无效。

**备注：** 外边距控制的是元素外部空出的空间。相反，`padding` 操作元素*内部*空出的空间。

语法
--

```css
/\* 应用于所有边 \*/
margin: 1em;
margin: -3px;

/\* 上边下边 | 左边右边 \*/
margin: 5% auto;

/\* 上边 | 左边右边 | 下边 \*/
margin: 1em auto 2em;

/\* 上边 | 右边 | 下边 | 左边 \*/
margin: 2px 1em 0 auto;

/\* 全局值 \*/
margin: inherit;
margin: initial;
margin: unset;
```

`margin` 属性接受 1~4 个值。每个值可以是 `<length>`，`<percentage>`，或 `auto`。取值为负时元素会比原来更接近临近元素。

* 当只指定**一个**值时，该值会统一应用到**全部四个边**的外边距上。
* 指定**两个**值时，第一个值会应用于**上边和下边**的外边距，第二个值应用于**左边和右边**。
* 指定**三个**值时，第一个值应用于**上边**，第二个值应用于**右边和左边**，第三个则应用于**下边**的外边距。
* 指定**四个**值时，依次（顺时针方向）作为**上边**，**右边**，**下边**，和**左边**的外边距。
### 可取值

**`<length>`**

以固定值为外边距。

`<percentage>`

相对于包含块的*宽度*，以百分比值为外边距。

`auto`

让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

### 语法格式
```

margin =
  <'margin-top'>{1,4}

```

示例
--

### 简单的例子

#### HTML

```html
<div class="center">此元素会被居中。</div>

<div class="outside">此元素会显示在包含块之外。</div>
```

#### CSS

```css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}
```

### 更多的例子

```css
margin: 5%; /\* 所有边：5% 的外边距 \*/

margin: 10px; /\* 所有边：10px 的外边距 \*/

margin: 1.6em 20px; /\* 上边和下边：1.6em 的外边距 \*/
/\* 左边和右边：20px 的外边距 \*/

margin: 10px 3% -1em; /\* 上边：10px 的外边距 \*/
/\* 左边和右边：3% 的外边距 \*/
/\* 下边： -1em 的外边距 \*/

margin: 10px 3px 30px 5px; /\* 上边：10px 的外边距 \*/
/\* 右边：3px 的外边距 \*/
/\* 下边：30px 的外边距 \*/
/\* 左边：5px 的外边距 \*/

margin: 2em auto; /\* 上边和下边：2em 的外边距 \*/
/\* 水平方向居中 \*/

margin: auto; /\* 上边和下边：无外边距 \*/
/\* 水平方向居中 \*/
```

贴士
--

### 水平居中

在现代浏览器中实现水平居中，可以使用 `display``: flex;` `justify-content``: center;`。

不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 `margin: 0 auto;`。

### 外边距重叠

上下元素的下上外边距有时会重叠，实际空出的空间长度变为两外边距中的较长值。查看外边距重叠可找到更多信息。

规范
--

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

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

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

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

参阅
--

* CSS 基础框盒模型介绍
* 外边距重叠
* `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* 逻辑相关的属性：`margin-block-start`, `margin-block-end`, `margin-inline-start`，和 `margin-inline-end` 与其简称 `margin-block` 和 `margin-inline`


background-position-x - CSS：层叠样式表

background-position-x
=====================

概要
--

**`background-position-x`** CSS 属性设置水平方向的位置，与每个背景图片等位置层设置属性 `background-origin`相关。更多信息请查看`background-position`属性，这个用的比较普遍。

**备注：** 这个属性的值会被后面声明的属性覆盖掉，如`background`和`background-position`等简写的属性。

|  |  |
| --- | --- |
| 初始值 | `0%` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to width of background positioning area minus width of background image |
| 计算值 | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | a repeatable list |

语法
--

```css
/\* Keyword values \*/
background-position-x: left;
background-position-x: center;
background-position-x: right;

/\* <percentage> values \*/
background-position-x: 25%;

/\* <length> values \*/
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/\* side-relative values \*/
background-position-x: right 3px;
background-position-x: left 25%;

/\* Multiple values \*/
background-position-x: 0px, center;

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

### 值

`left`

在位置层上相对于左边的位置。

`center`

在位置层上相对于中间点的位置。

`right`

在位置层上相对于右边的位置。

`<length>`

`<length>`值是定义相对于位置层边缘的距离，边缘默认为左边。

`<percentage>`

`<percentage>`值是定义相对于位置层边缘的距离百分比，边缘默认为左边。

### 正规语法
```

background-position-x =
  [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#

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

```

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

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

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

更多
--

* `background-position`
* `background-position-y`
* `background-position-inline`
* `background-position-block`
* Multiple backgrounds (en-US)


:only-of-type - CSS：层叠样式表

:only-of-type
=============

**`:only-of-type`** CSS 伪类代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

尝试一下
----

**备注：** 根据原来的定义，被选择的元素必须具有父元素。直到 Selectors Level 4 开始，这个要求就不是必须的了。

语法
--

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

示例
--

### 为没有同类型兄弟元素的元素设置样式

#### HTML

```html
<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>
```

#### CSS

```css
main :only-of-type {
  color: red;
}
```

#### 结果

规范
--

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

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

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

参见
--

* `:only-child`
* `:first-of-type`
* `:last-of-type`
* `:nth-of-type`


-webkit-line-clamp - CSS：层叠样式表

-webkit-line-clamp
==================

**`-webkit-line-clamp`** CSS 属性可以把块容器中的内容限制为指定的行数。

它只有在 `display` 属性设置成 `-webkit-box` 或者 `-webkit-inline-box` 并且 `box-orient` 属性设置成 `vertical`时才有效果。

在大部分情况下，也需要设置 `overflow` 属性为 `hidden`，否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号。

当应用于锚（anchor）元素时，截断可以发生在文本中间，而不必在末尾。

**备注：** 该属性最初在 WebKit 中实现的，但存在一些问题。由于需要支持旧版本的浏览器，该属性已在 CSS Overflow Module Level 4 中被标准化。CSS Overflow Module Level 4 规范还定义了一个 `line-clamp` 属性，用来代替此属性并避免一些问题。

语法
--

```css
/\* 关键词值 \*/
-webkit-line-clamp: none;

/\* 整数值 \*/
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/\* 全局值 \*/
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;
```

`none`

这个值表明内容显示不会被限制。

`<integer>`

这个值表明内容显示了多少行之后会被限制。必须大于 0。

形式定义
----

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

形式语法
----
```

-webkit-line-clamp =
  none             |
  <integer [1,∞]>

```

示例
--

### 截断段落

#### HTML

```html
<p>
  在此示例中，<code>-webkit-line-clamp</code> 属性设置为
  <code>2</code>，即文本在超过两行后将被截断。文本截断处将显示省略号。
</p>
```

#### CSS

```css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 4 # propdef--webkit-line-clamp |

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

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

参见
--

* Line Clampin' (Truncating Multiple Line Text)
* `line-clamp`


fit-content - CSS：层叠样式表

fit-content
===========

`fit-content` 行为类似于 `fit-content(stretch)`，实际上这意味着盒子会使用可用的空间，但永远不会超过 `max-content`。

`fit-content` 属性可以用于设置元素的 `width`、`height`、`min-width`、`min-height`、`max-width` 和 `max-height`，此时最大和最小尺寸将基于元素的内容尺寸计算。

**备注：** CSS 尺寸规范另外还定义了 `fit-content()` (en-US) 函数。本页详细介绍了该关键字的用法。

语法
--

```css
width: fit-content;
block-size: fit-content;
```

示例
--

### 使用 fit-content 调整盒子大小

#### HTML

```html
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
  </div>
</div>
```

#### CSS

```css
.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: -moz-fit-content;
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |

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

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

参见
--

* 其他尺寸关键字：`min-content`、`max-content`


mask-image - CSS：层叠样式表

mask-image
==========

**`mask-image`** CSS 属性设置了用作元素蒙版层的图像。默认情况下，这意味着蒙版图像的 alpha 通道将与元素的 alpha 通道相乘。可以使用 `mask-mode` 属性对此进行控制。

```css
/\* 关键字值 \*/
mask-image: none;

/\* <mask-source> 值 \*/
mask-image: url(masks.svg#mask1);

/\* <image> 值 \*/
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);

/\* 多个属性值 \*/
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);

/\* 全局属性值 \*/
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;
```

语法
--

### 值

`none`

默认值，透明的黑色图像层，也就是没有遮罩层。

`<mask-source>`

对 `<mask>` 或 CSS 图像的 `url()` 引用

`<image>`

用作蒙版图像层的图像值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified, but with `url` values made absolute |
| Animation type | discrete |

形式语法
----
```

mask-image =
  <mask-reference>#

<mask-reference> =
  none           |
  <image>        |
  <mask-source>

<image> =
  <url>       |
  <gradient>

<mask-source> =
  <url>

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

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

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

```

示例
--

### 使用 URL 设置蒙版图像

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-image |

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

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

参见
--

* CSS 中的裁剪和遮罩
* 使用 CSS 的 mask-image 属性对图像应用效果


element - CSS：层叠样式表

element
=======

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

CSS 函数 **`element()`** 定义了一个从任意的 HTML 元素中生成的图像 `<image>` 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，the CSS properties using the resulting value are automatically updated.

一个特别实用的应用场景是，在某个 HTML `<canvas>` 元素中渲染图像，然后将其用作背景。

在使用 Gecko 渲染引擎的浏览器中，可以使用非标准的 `document.mozSetImageElement()` (en-US) 方法，将某个元素指定为其他元素的背景图像。

语法
--
```

element(id)
```

其中：

*id*

The ID of an element to use as the background, specified using the HTML attribute #*id* on the element.

示例
--

在支持 `-moz-element()` 的 Firefox 中，可以实地考察这些例子。

### 一个比较现实的例子

这个例子将文档中另一个隐藏的 `<div>` 元素作为背景。被隐藏的元素本身使用了渐变背景，也包含了一些文字，渐变背景和文字都成为了第一个元素的背景。

```html
<div
 style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div
 id="myBackground1"
 style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; rotate: 45deg; color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>
```

The `<div>` element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

### 页面预览

这个基于 Vincent De Oliveira 的示例在 `<div id="css-result">` 之中创建了 `<div id="css-source">` 的预览。

#### HTML

```html
<div id="css-source">
  <h1>Page Preview</h1>
</div>
<div id="css-result"></div>
```

#### CSS

```css
#css-result {
  background: -moz-element(#css-source) no-repeat;
  width: 256px;
  height: 32px;
  background-size: 80%;
  border: dashed;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Images Module Level 4 # element-notation |

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

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

参见
--

* `image()` (en-US)
* `image-set()` (en-US)
* `<image>`
* `<gradient>`
* `element()`
* `cross-fade()` (en-US)
* `document.mozSetImageElement()` (en-US)


counters() - CSS：层叠样式表

counters()
==========

CSS 函数 **`counters()`** 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。`counters()` 函数有两种形式：`counters(name, string)` 或 `counters(name, string, style)`。它通常和伪元素搭配使用，但是理论上可以在支持`<string>`值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。

```css
/\* Simple usage - style defaults to decimal \*/
counters(countername, '-');

/\* changing the counter display \*/
counters(countername, '.', upper-roman)
```

一个计数器本身没有可见的效果，而是通过 `counter()` 函数（和 `counters()` 函数）返回开发人员定义的字符串（或图像）从而使计数器拥有很棒的作用。

**备注：** `counter()` 函数可以与任何 CSS 属性一起使用，但是对`"content"`以外的属性的支持是试验性的，对 type-or-unit 参数的支持很少。

在使用此功能之前，请仔细检查浏览器兼容性表 。

语法
--

### Values

`<custom-ident> 自定义标识`

一个标识计数器的名称，区分大小写，并且与`counter-reset`和`counter-increment`中的“名称”相同。名称不能以两个破折号开头，并且不能为`none`, `unset`, `initial`, 或 `inherit`。

`<counter-style> 计数器样式`

计数器样式名称或 `symbols()` (en-US) 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。

`<string> 字符串`

任意数量的文本字符。非拉丁字符必须使用其 Unicode 转义序列进行编码：例如，`\ 000A9`表示版权符号。

### 形式语法
```

counters( <custom-ident>, <string>, <counter-style>? )

where
<counter-style> = <counter-style-name> | symbols()

where
<counter-style-name> = <custom-ident>
```

示例
--

### default value compared to upper Roman

#### HTML

```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content: counters(listCounter, ".") " == " counters(
      listCounter,
      ".",
      lower-roman
    );
}
```

#### 结果

### *decimal-leading-zero* compared to lower-alpha

#### HTML

```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content: counters(count, ".", upper-alpha) ") ";
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(
      count,
      ".",
      lower-alpha
    );
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-functions |

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

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

参见
--

* Using CSS Counters
* `counter-set`
* `counter-reset`
* `counter-increment`
* `@counter-style`
* CSS `counter()` (en-US) function
* `::marker`


border-image-repeat - CSS：层叠样式表

border-image-repeat
===================

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

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

* Learn more
* See full compatibility
* Report feedback
`border-image-repeat` 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

|  |  |
| --- | --- |
| 初始值 | `stretch` |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

Syntax
------
```

Formal syntax:
```
border-image-repeat =
  [ stretch | repeat | round | space ]{1,2}

```

```
```

border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;

border-image-repeat: inherit
```

### Values

*type*

`stretch`, `repeat`, `round`, `space` 选一。属于单个值的情况。

*horizontal*

`stretch`, `repeat`, `round`, `space` 选一。属于两个值的情况。

*vertical*

`stretch`, `repeat`, `round`, `space` 选一。属于两个值的情况。

`stretch`

拉伸图片以填充边框。

`repeat`

平铺图片以填充边框。

`round`

平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。

`space`

平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

`inherit`

继承父级元素的计算值。

Examples
--------

不同的取值，查看 `border-image` 的示例。

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

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

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

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


解析值 - CSS：层叠样式表

解析值
===

CSS 属性的解析值（**resolved value** ）是 `getComputedStyle()`返回的值。对于大多数属性，它是计算值`computed value`，但对于一些旧属性（包括宽度和高度），它是使用值`used value`。有关详细信息，请参阅下面的规范链接。

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

参考
--

* CSS Reference
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素
* `window.getComputedStyle`


scroll-padding-block-start - CSS：层叠样式表

scroll-padding-block-start
==========================

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

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
scroll-padding-block-start: auto;

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

/\* 全局值 \*/
scroll-padding-block-start: inherit;
scroll-padding-block-start: initial;
scroll-padding-block-start: revert;
scroll-padding-block-start: revert-layer;
scroll-padding-block-start: 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-block-start =
  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 滚动吸附明确控制滚动


background - CSS：层叠样式表

background
==========

**`background`** 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

尝试一下
----

此属性是一个 简写属性，可以在一次声明中定义一个或多个属性：`background-clip`、`background-color`、`background-image`、`background-origin`、`background-position`、`background-repeat`、`background-size`，和 `background-attachment`。

对于所有简写属性，任何没有被指定的值都会被设定为它们的 初始值。

语法
--

```css
/\* 使用 <background-color> \*/
background: green;

/\* 使用 <bg-image> 和 <repeat-style> \*/
background: url("test.jpg") repeat-y;

/\* 使用 <box> 和 <background-color> \*/
background: border-box red;

/\* 将背景设为一张居中放大的图片 \*/
background: no-repeat center/80% url("../img/image.png");
```

`background` 属性被指定多个背景层时，使用逗号分隔每个背景层。

每一层的语法如下：

* 在每一层中，下列的值可以出现 0 次或 1 次：
    + `<attachment>`
    + `<bg-image>`
    + `<position>`
    + `<bg-size>`
    + `<repeat-style>`
* `<bg-size>` 只能紧接着 `<position>` 出现，以"/"分割，如： "`center/80%`".
* `<box>` 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定 `background-origin` 和 `background-clip`。如果出现 2 次，第一次的出现设置 `background-origin`，第二次的出现设置 `background-clip`。
* `<background-color>` 只能被包含在最后一层。

**备注：** `background-color` 只能在 background 的最后一个属性上定义，因为整个元素只有一种背景颜色。

值
-

下面的一个或多个值，可以按任意顺序放置：

`<attachment>`

参见 `background-attachment`

`<box>`

参见 `background-clip` 和 `background-origin`

`<background-color>`

参见 `background-color`

`<bg-image>`

参见 `background-image`

`<position>`

参见 `background-position`

`<repeat-style>`

参见 `background-repeat`

`<bg-size>`

参见 `background-size`。

### 标准语法
```

background =
  <bg-layer>#? , <final-bg-layer>

<bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>

<final-bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>                    ||
  <'background-color'>

<bg-image> =
  <image>  |
  none

<bg-position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

<attachment> =
  scroll  |
  fixed   |
  local

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

<image> =
  <url>       |
  <gradient>

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

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

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

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

```

示例
--

### HTML

```html
<p class="topbanner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>
```

### CSS

```css
.warning {
  background: red;
}

.topbanner {
  background: url("starsolid.gif") #99f repeat-y fixed;
}
```

### 结果

规范
--

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

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

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

参见
--

* `-moz-background-size` (en-US), `-moz-background-inline-policy` (en-US)
* 使用渐变背景 (en-US)
* 多重背景 (en-US)


animation-delay - CSS：层叠样式表

animation-delay
===============

**`animation-delay`** CSS 属性指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。

尝试一下
----

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

语法
--

```css
/\* 单个动画 \*/
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/\* 多个动画 \*/
animation-delay: 2.1s, 480ms;

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

### 值

`<time>`

动画应该开始的时间偏移量，从应用动画到元素的时刻开始计算。可以用秒（`s`）或毫秒（`ms`）指定。单位是必需的。

正值表示动画应在指定的时间量过去后开始。默认值为 `0s`，表示动画应立即开始。

负值会导致动画立即开始，但是从动画循环的某个时间点开始。例如，如果你将 `-1s` 作为动画延迟时间，则动画将立即开始，但是将在动画序列的第 1 秒开始。如果你为动画延迟指定负值，但起始值是隐含的，则起始值取自应用动画到元素的时刻。

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

形式定义
----

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

形式语法
----
```

animation-delay =
  <time>#

```

示例
--

### 设置动画延迟

这个动画有 2 秒的延迟。

#### HTML

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

#### CSS

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

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-delay: 2s;
}

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

#### 结果

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

参见 CSS 动画以获取示例。

规范
--

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

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

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

参见
--

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


<flex> - CSS：层叠样式表

<flex>
======

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
**`<flex>`** CSS 数据类型 表示了网格（grid）容器中的一段可变长度。于 `grid-template-columns`、`grid-template-rows` 及相关属性中使用。

语法
--

`<flex>` 数据类型为一 `<number>` 后加单位 `fr`。与所有 CSS 尺寸相同，单位与数字间无空格。

示例
--

```css
1fr    /\* 使用整型 \*/
2.5fr  /\* 使用浮点 \*/
```

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # fr-unit |

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

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

参见
--

* CSS 网格布局


CSS 片段 - CSS：层叠样式表

CSS 片段
======

**CSS 片段**模块定义了当内容被分割（fragmented）到多个页面、区域或列时的显示方式。

当行向盒子被分割为多行时，就会出现分片。当一个块在列布局容器内跨越多列，或在打印时跨越分页符时，也会出现这种情况。元素的每一个渲染的部分都称为*片段*（fragment）。

参考
--

### 属性

* `box-decoration-break`
* `break-after`
* `break-before` (en-US)
* `break-inside`
* `orphans` (en-US)
* `widows`
规范
--

| Specification |
| --- |
| CSS Fragmentation Module Level 3  |


caption-side - CSS：层叠样式表

caption-side
============

CSS 中 **`caption-side`** 属性会将表格的标题（`<caption>`）放到规定的位置。但是具体显示的位置与表格的 `writing-mode` 属性值有关。

尝试一下
----

语法
--

```css
/\* 方向值 \*/
caption-side: top;
caption-side: bottom;

/\* 逻辑值 \*/
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

/\* 全局值 \*/
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;
```

`caption-side` 属性的取值必须是下面所列值中的一个。

### 取值

`top`

标题盒应置于表格上方。

`bottom`

标题盒应置于表格下方。

`block-start`

标题盒应置于表格的块首一侧。

`block-end`

标题盒应置于表格的块末一侧。

`inline-start`

标题盒应置于表格的行首一侧。

`inline-end`

标题盒应置于表格的行末一侧。

形式定义
----

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

形式语法
----
```

caption-side =
  top     |
  bottom

```

示例
--

### 在上方和下方设置标题

#### HTML

```html
<table class="top">
  <caption>
    表格上方的标题
  </caption>
  <tr>
    <td>一些数据</td>
    <td>又一些数据</td>
  </tr>
</table>

<br />

<table class="bottom">
  <caption>
    表格下方的标题
  </caption>
  <tr>
    <td>一些数据</td>
    <td>又一些数据</td>
  </tr>
</table>
```

#### CSS

```css
.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-caption-side |
| CSS Logical Properties and Values Level 1 # caption-side |

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

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


text-shadow - CSS：层叠样式表

text-shadow
===========

**`text-shadow`** 为文字添加阴影。可以为文字与 `decoration` 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

尝试一下
----

语法
--

```css
/\* offset-x | offset-y | blur-radius | color \*/
text-shadow: 1px 1px 2px black;

/\* color | offset-x | offset-y | blur-radius \*/
text-shadow: #fc0 1px 0 10px;

/\* offset-x | offset-y | color \*/
text-shadow: 5px 5px #558abb;

/\* color | offset-x | offset-y \*/
text-shadow: white 2px 5px;

/\* offset-x | offset-y
/\* Use defaults for color and blur-radius \*/
text-shadow: 5px 10px;

/\* Global values \*/
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
```

当阴影大于一个时要用逗号区别开阴影之间的参数。

每个阴影都有两到三个 `<length>` 参数，以及一个与阴影颜色相关的 `<color>` 参数。前两个 `<length>` 参数，是以“文字中心”为原点的坐标轴，分别为 x 轴 `<offset-x>` 和 y 轴 `<offset-y>` 的值；如果有第三个 `<length>` 参数，则第三个数值为形成阴影效果的半径的数值 `<blur-radius>`。

当所给的阴影大于一个时，阴影应用的顺序为从前到后，第一个指定的阴影在顶部。

这个属性同时适用于 `::first-line` 以及 `::first-letter` 伪元素。

### 值

`<color>`

可选。阴影的颜色。可以在偏移量之前或之后指定。如果没有指定颜色，则使用用户代理自行选择的颜色，因此需要跨浏览器的一致性时，应该明确定义它。

`<offset-x> <offset-y>`

必选。这些 `<length>` 值指定阴影相对文字的偏移量。`<offset-x>` 指定水平偏移量，若是负值则阴影位于文字左侧。`<offset-y>` 指定垂直偏移量，若是负值则阴影位于文字上方。如果两者均为 `0`，则阴影位于文字正后方，如果设置了 `<blur-radius>` 则会产生模糊效果。

`<blur-radius>`

可选。这是 `<length>` 值。如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | a color plus three absolute lengths |
| Animation type | a shadow list |

形式语法
----
```

text-shadow =
  none                            |
  [ <color>? && <length>{2,3} ]#

```

示例
--

### 简单的阴影

```css
.red-text-shadow {
  text-shadow: red 0 -2px;
}
```

```html
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```

### 多重阴影

```css
.white-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    "Bitstream Charter",
    "URW Bookman L",
    "Century Schoolbook L",
    serif;
}
```

```html
<p class="white-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-shadow-property |

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

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

参见
--

* `box-shadow`
* The `<color>` data type (for specifying the shadow color)
* 使用 CSS 为 HTML 元素应用颜色


column-rule - CSS：层叠样式表

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

CSS `column-rule` 简写属性可以在多列布局中设定分割线的宽度、样式和颜色。

尝试一下
----

该简写属性使用简单方便的声明形式将各个 `column-rule-*` 属性放在了一起：`column-rule-width`、`column-rule-style` 和 `column-rule-color`。

**备注：** 和所有简写属性一样，任何没有指定的单独值会设置为相应初始值（可能会覆盖非简写属性设置的值）。

语法
--

```css
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

/\* 全局值 \*/
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: revert-layer;
column-rule: unset;
```

### 取值

`column-rule` 属性可以按任何顺序指定为下面列出的一个、两个或三个值。

`<'column-rule-width'>`

定义为 `<length>` 或是 `thin`、`medium`、`thick` 关键字的其中一个。请参阅 `border-width`。

`<'column-rule-style'>`

请参阅 `border-style` 以获取可能的值和详细信息。

`<'column-rule-color'>`

一个 `<color>` 值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `column-rule-width`: `medium`
* `column-rule-style`: `none`
* `column-rule-color`: `currentcolor`
 |
| 适用元素 | multicol elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `column-rule-color`: computed color
* `column-rule-style`: as specified
* `column-rule-width`: the absolute length; `0` if the `column-rule-style` is `none` or `hidden`
 |
| Animation type | as each of the properties of the shorthand:* `column-rule-color`: a color
* `column-rule-style`: discrete
* `column-rule-width`: a length
 |

形式语法
----
```

column-rule =
  <'column-rule-width'>  ||
  <'column-rule-style'>  ||
  <'column-rule-color'>

```

### 示例

### 示例一

```css
/\* 与 "medium dotted currentcolor" 相同 \*/
p.foo {
  column-rule: dotted;
}
/\* 与 "medium solid blue" 相同 \*/
p.bar {
  column-rule: solid blue;
}
/\* 与 "8px solid currentcolor" 相同 \*/
p.baz {
  column-rule: solid 8px;
}
p.abc {
  column-rule: thick inset blue;
}
```

### 示例二

#### HTML

```html
<p class="content-box">
  This is a bunch of text split into three columns. Take note of how the
  `column-rule` property is used to adjust the style, width, and color of the
  rule that appears between the columns.
</p>
```

#### CSS

```css
.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}
```

#### 结果

规范
--

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

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

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

参见
--

* 多列布局
* `column-rule-style`
* `column-rule-width`
* `column-rule-color`