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

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

CSS 属性 **`border-inline-start`** 为简写属性，用于在样式表中的某处同时设置逻辑行首边框的各属性值。

尝试一下
----

属性构成
----

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

* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
语法
--

```css
border-inline-start: 1px;
border-inline-start: 2px dotted;
border-inline-start: medium dashed green;

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

`border-inline-start` 所对应的实体边框取决于元素的书写模式、行内方向和文本朝向。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top`、`border-right`、`border-bottom` 或 `border-left` 属性。

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

### 取值

`border-inline-start` 属性可用下列值中的至少一个指定，次序任意：

`<'border-width'>`

边框宽度。见 `border-width`。

`<'border-style'>`

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

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-inline-start-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-inline-start-color`: by computed value type
* `border-inline-start-style`: discrete
* `border-inline-start-width`: by computed value type
 |

形式语法
----
```

border-inline-start =
  <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

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

### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  border-inline-start: 5px dashed blue;
}
```

规范
--

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

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

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

参见
--

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


@counter-style - CSS：层叠样式表

@counter-style
==============

概要
--

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

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

语法
--
```

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

### 描述

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

`system` (en-US)

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

`negative` (en-US)

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

`prefix` (en-US)

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

`suffix` (en-US)

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

`range` (en-US)

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

`pad` (en-US)

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

`fallback` (en-US)

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

`symbols` (en-US)

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

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

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

`additive-symbols` (en-US)

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

`speak-as` (en-US)

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

例子
--

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

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

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

会产生如下列表：

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

 27 Twenty Seven
 28 Twenty Eight
 29 Twenty Nine
 30 Thirty

查看更多例子 demo page.

规范
--

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

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

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

相关阅读
----

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


<display-legacy> - CSS：层叠样式表

<display-legacy>
================

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

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

* Learn more
* See full compatibility
* Report feedback
CSS 2 为 `display` 属性使用单关键字的语法，对于相同布局模式的块级和行级变体要求使用各自的关键字。本文详述这些关键字。

语法
--

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

`inline-block`

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

等同于 `inline flow-root`。

`inline-table`

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

等同于 `inline table`。

`inline-flex`

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

等同于 `inline flex`。

`inline-grid`

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

等同于 `inline grid`。

### 形式语法
```

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

```

示例
--

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

### HTML

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

非弹性元素
```

### CSS

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

### 结果

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

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

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

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

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

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

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

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

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

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

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

参见
--

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


border-start-start-radius - CSS：层叠样式表

border-start-start-radius
=========================

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

尝试一下
----

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

语法
--

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

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

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

### 取值

`<length-percentage>`

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

形式定义
----

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

形式语法
----
```

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

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

```

示例
--

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

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


gap (grid-gap) - CSS：层叠样式表

gap (grid-gap)
==============

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

尝试一下
----

语法
--

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

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

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

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

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

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

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

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

### 值

`<length>`

网格线之间的间隙宽度。

`<percentage>`

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

形式定义
----

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

形式语法
----
```

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

```

示例
--

### Flex 布局

#### HTML

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

#### CSS

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

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

#### 结果

### Grid 布局

#### HTML

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

#### CSS

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

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

#### 结果

### 多列布局

#### HTML

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

#### CSS

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

#### 结果

规范
--

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

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

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

参见
--

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


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

font-variant-numeric
====================

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

尝试一下
----

语法
--

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

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

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

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

`normal`

下列特性均不启用。

`ordinal`

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

`slashed-zero`

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

*<numeric-figure-values>*

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

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

*<numeric-spacing-values>*

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

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

*<numeric-fraction-values>*

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

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

形式定义
----

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

形式语法
----
```

font-variant-numeric =
  normal                                              |
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]

<numeric-figure-values> =
  lining-nums    |
  oldstyle-nums

<numeric-spacing-values> =
  proportional-nums  |
  tabular-nums

<numeric-fraction-values> =
  diagonal-fractions  |
  stacked-fractions

```

示例
--

### 设置序数形式

规范
--

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

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

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


row-gap (grid-row-gap) - CSS：层叠样式表

row-gap (grid-row-gap)
======================

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

尝试一下
----

语法
--

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

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

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

### 值

`<length-percentage>`

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

形式定义
----

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

形式语法
----
```

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

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

```

示例
--

### Flex 布局

#### HTML

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

#### CSS

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

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

#### 结果

### Grid 布局

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


border-inline-end - CSS：层叠样式表

border-inline-end
=================

CSS 属性 **`border-inline-end`** 为简写属性，用于在样式表中的某处同时设置逻辑行末边框的各属性值。

尝试一下
----

属性构成
----

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

* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
语法
--

```css
border-inline-end: 1px;
border-inline-end: 2px dashed;
border-inline-end: medium dashed blue;

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

`border-inline-end` 所对应的实体边框取决于元素的书写模式、行内方向和文本朝向。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top`、`border-right`、`border-bottom` 或 `border-left` 属性。

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

### 取值

`border-inline-end` 属性可用下列值中的至少一个指定，次序任意：

`<'border-width'>`

边框宽度。见 `border-width`。

`<'border-style'>`

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

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-inline-end-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-inline-end-color`: by computed value type
* `border-inline-end-style`: discrete
* `border-inline-end-width`: by computed value type
 |

形式语法
----
```

border-inline-end =
  <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

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

### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  border-inline-end: 5px dashed blue;
}
```

规范
--

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

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

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

参见
--

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


CSS 的简写属性 - CSS：层叠样式表

CSS 的简写属性
=========

**简写属性**是可以让你同时设置好几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。

CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 `background` 属性就是一个简写属性，它可以定义 `background-color`、`background-image`、`background-repeat` 和 `background-position` 的值。类似地，最常见的字体相关的属性可以使用 `font` 的简写，盒子（box）各方向的外边距（margin）可以使用 `margin` 这个简写。

棘手的边界情况
-------

虽然它们使用起来非常方便，但在使用时，仍需牢记一些边界情况：

### 省略属性

没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子，但这确实意味着，它将会覆盖之前设置的值。因此：

```css
p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}
```

以上样式不会将 background 的 color 值设置为 `red`，而是 `background-color` 的默认值 `transparent`。

关键词 inherit 只可以应用于单独属性（individual properties），如果应用于一个简写属性（shorthand property），则必须整体应用，而能对简写属性值的每一个部分单独应用。由于单独属性的漏掉的值会被它们的初始值（initial value）替代，因此不可能允许单个属性通过省略继承的。这意味着让一个属性的值使用继承值的唯一方法就是使用值是 `inherit` 的普通属性（longhand property）。

### 属性的顺序

简写属性不试图强制它们替代属性的值的特定顺序。这适用于当这些属性使用不同类型的值时，因为这个时候顺序并不重要。但当几个属性可以设置相同值的时候，就没那么简单了。

两种非常重要的情况如下：

* 与盒子（box）边界（edge）相关的属性，比如 `border-style`、`margin` 或者 `padding`
* 与盒子的角（corner）相关的属性，比如 `border-radius`

#### 盒子边界

在处理和盒子的边界相关的属性时，比如 `border-style`、`margin` 或者 `padding`，始终使用一致的 1 个到 4 个值的语法表示：

* **单值语法**：`border-width: 1em`，这一个值表示所有的边框宽度：
 ![Box edges with one-value syntax](/zh-CN/docs/Web/CSS/Shorthand_properties/border1.png)
* **双值语法**：`border-width: 1em 2em`，第一个值表示垂直方向的值，即 top 和 bottom；第二个值表示水平方向的值，即 left 和 right：
 ![Box edges with two-value syntax](/zh-CN/docs/Web/CSS/Shorthand_properties/border2.png)
* **三值语法**：`border-width: 1em 2em 3em`，第一个值表示 top；第二个值表示水平方向的，即 left 和 right；第三个值表示 bottom：
 ![Box edges with three-value syntax](/zh-CN/docs/Web/CSS/Shorthand_properties/border3.png)
* **四值语法**：`border-width: 1em 2em 3em 4em`，这四个值分别表示 top、right、bottom、left，即总是从 top 开始的顺时针顺序：
 ![Box edges with four-value syntax](/zh-CN/docs/Web/CSS/Shorthand_properties/border4.png) Top-Right-Bottom-Left 的首字母与英文单词 *trouble* 的辅音字母顺序一致：TRBL。你可以按照时钟指针旋转的顺序来记忆：`1em` 在 12 点钟方向，而 `2em`、`3em` 及 `4em` 分别在 2、3、4 点钟方向。

#### 盒子角

在处理和盒子的角相关的属性时，比如 `border-radius`，也始终使用一致的 1 个到 4 个值的语法表示：

* **单值语法**：`border-radius: 1em`，这一个值表示所有的边框宽度：
 ![Box corners with one-value syntax](/zh-CN/docs/Web/CSS/Shorthand_properties/corner1.png)
* **双值语法：** `border-radius: 1em 2em`，第一个值表示 top-left 和 bottom-right 方向的角；第二个值表示 top-right 和 bottom-left 方向的角：
 ![Box corners with two-value syntax](/zh-CN/docs/Web/CSS/Shorthand_properties/corner2.png)
* **三值语法**：`border-radius: 1em 2em 3em`，第一个值表示 top-left 方向的角，第二个值表示 top-right 和 bottom-left 方向的角，第三个值表示 bottom-right 方向的角：
 ![Box corners with three-value syntax](/zh-CN/docs/Web/CSS/Shorthand_properties/corner3.png)
* **四值语法**：`border-radius: 1em 2em 3em 4em`，这四个值分别表示 top left、top right、bottom right、bottom left，即总是从 top left 开始的顺时针顺序：
 ![Box corners with four-value syntax](/zh-CN/docs/Web/CSS/Shorthand_properties/corner4.png)
Background 属性
-------------

background 有以下属性：

```css
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
```

可以简写成一行声明：

```css
background: #000 url(images/bg.gif) no-repeat top right;
```

简写的形式实际上等价于以上普通属性再加上 `background-attachment: scroll` 以及 CSS3 中的一些附加属性。

请查阅 `background` 以了解更详细的信息，包含 CSS3 属性。

Font 属性
-------

下面的声明：

```css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
```

可以简写成下面的：

```css
font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;
```

这个简写声明实际上等价于以上普通属性再加上 `font-variant: normal`、`font-size-adjust: none` 和 `font-stretch: normal`。

Border 属性
---------

对于 border 来说，宽度、颜色和类型是可以被简写到一个声明里的。比如：

```css
border-width: 1px;
border-style: solid;
border-color: #000;
```

可以简写成：

```css
border: 1px solid #000;
```

Margin 和 Padding 属性
-------------------

margin 和 padding 值的简写版本类似。下面的 CSS 声明：

```css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
```

和下面的声明是一样的（注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left，与“trouble”的辅音字母顺序相同）。

```css
margin: 10px 5px 10px 5px;
```

Margin 对于多个值有以下的简写规则：

* 当只有**一个**值声明时，该值会用于所有**四个**值。
* 当只有**两个**值声明时，第一个值用于**上边距**和**下边距**，第二个值用于**左边距**和**右边距**。
* 当有**三个**值声明时，第一个值用于**上边距**，第二个值用于**左边距**和**右边距**，第三个值用于**下边距。**
* 当有**四个**值声明时，其会按顺序用于**上**、**右**、**下**、**左**边距（按顺时针方向）。
通用简写属性
------

CSS 提供了一个通用的简写属性 `all`，它可以应用于文档里所有的属性。它的目的是改变属性的继承模型。

查看层叠与继承或 CSS 层叠基础以了解更多关于继承的信息。

参见
--

* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 可替换元素
* 简写属性：`all`、`animation`、`background`、`border`、`border-block-end`、`border-block-start`、`border-bottom`、`border-color`、`border-image`、`border-inline-end`、`border-inline-start`、`border-left`、`border-radius`、`border-right`、`border-style`、`border-top`、`border-width`、`column-rule`、`columns`、`flex`、`flex-flow`、`font`、`gap`、`grid`、`grid-area`、`grid-column`、`grid-row`、`grid-template`、`list-style`、`margin`、`mask`、`offset`、`outline`、`overflow`、`padding`、`place-content`、`place-items`、`place-self` (en-US)、`scroll-margin`、`scroll-padding`、`text-decoration`、`text-emphasis` (en-US)、`transition`


dimension - CSS：层叠样式表

dimension
=========

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

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

格式
--

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

Examples
--------

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

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

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

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

规范
--

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

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

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


margin-bottom - CSS：层叠样式表

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

Summary
-------

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

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

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

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

语法
--

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

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

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

### 值

`<length>`

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

`<percentage>`

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

`auto`

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

### 形式语法
```

margin-bottom =
  <length-percentage>  |
  auto

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

```

示例
--

### HTML

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

### CSS

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

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

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

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

规范
--

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

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

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


background-attachment - CSS：层叠样式表

background-attachment
=====================

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

尝试一下
----

语法
--

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

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

### 取值

`fixed`

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

`local`

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

`scroll`

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

### 标准语法
```

background-attachment =
  <attachment>#

<attachment> =
  scroll  |
  fixed   |
  local

```

例子
--

### 简单的例子

#### CSS 样式表

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

#### HTML 源码

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

#### 效果

### 多背景图支持

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

#### CSS 样式表

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

#### HTML 源码

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

#### 效果

规范
--

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

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

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

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

参见
--

* 更多背景图 (en-US)


:valid - CSS：层叠样式表

:valid
======

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

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

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

语法
--

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

参见 `:invalid`。

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

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

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

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

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

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

参见
--

* `:invalid`, `:required`, `:optional`
* Form data validation (en-US)


animation-iteration-count - CSS：层叠样式表

animation-iteration-count
=========================

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

尝试一下
----

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

语法
--

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

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

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

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

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

### 值

`infinite`

无限循环播放动画。

``<number>``

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

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

形式定义
----

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

### 形式语法
```

animation-iteration-count =
  <single-animation-iteration-count>#

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

```

示例
--

### 设置迭代次数

该动画将会播放 10 次。

#### HTML

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

#### CSS

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

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: 10;
}

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

#### 结果

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

参见 CSS 动画示例。

规范
--

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

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

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

参见
--

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


inset-inline-start - CSS：层叠样式表

inset-inline-start
==================

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

尝试一下
----

语法
--

```css
/\* 长度值 \*/
inset-inline-start: 3px;
inset-inline-start: 2.4em;

/\* 包含块的宽度或高度的百分比 \*/
inset-inline-start: 10%;

/\* 关键词值 \*/
inset-inline-start: auto;

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

`inset-inline-start` 和 `inset-inline-end` 的简写属性为 `inset-inline`。

### 取值

`inset-inline-start` 属性的取值与 `left` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

inset-inline-start =
  auto                 |
  <length-percentage>

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

```

示例
--

### 设置行首偏移

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-inline-start: 20px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

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

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

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

参见
--

* 定义其他偏移的属性：`inset-block-start`、`inset-block-end` 和 `inset-inline-end`
* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* `writing-mode`、`direction`、`text-orientation`


:playing - CSS：层叠样式表

:playing
========

**`:playing`** CSS 伪类选择器表示一个处于“播放”状态的可播放元素，例如 `<audio>` 或 `<video>`。

如果用户明确地启动了播放，那么资源就被认为是正在播放。如果元素的确处于播放状态，但由于与用户意图无关的原因而被暂停，也被认为是正在播放。在这种情况下，一旦底层原因（如“缓冲”或“停滞”状态）得到解决，播放将自动恢复。

语法
--

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

示例
--

### CSS

```css
:playing {
  border: 5px solid green;
}
```

规范
--

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

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

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

参见
--

* `:paused`


contain-intrinsic-width - CSS：层叠样式表

contain-intrinsic-width
=======================

CSS 属性 **`contain-intrinsic-width`** 定义了元素受尺寸局限时浏览器用于布局的元素宽度。

语法
--

```css
/\* 关键词值 \*/
contain-intrinsic-width: none;

/\* <length> 值 \*/
contain-intrinsic-width: 1000px;
contain-intrinsic-width: 10rem;

/\* auto <length> \*/
contain-intrinsic-width: auto 300px;

/\* 全局值 \*/
contain-intrinsic-width: inherit;
contain-intrinsic-width: initial;
contain-intrinsic-width: revert;
contain-intrinsic-width: revert-layer;
contain-intrinsic-width: unset;
```

### 取值

可为元素指定下列值。

`none`

元素无固有宽度。

`<length>`

元素具有指定宽度（`<length>`）。

`auto <length>`

若存在“正常渲染”的元素宽度且元素正在跳过其内容（例如在屏外时），则为此宽度的记忆值；否则为指定的 `<length>`。

描述
--

此属性的应用常常伴随如 `contain: size` 和 `content-visibility` 等可触发尺寸局限的要素，且亦可使用简写属性 `contain-intrinsic-size` 设置。

尺寸局限允许用户代理将元素视为具有固定尺寸进行布局。由此避免为确定实际尺寸而重渲子元素，阻止不必要的重排（进而改善用户体验）。尺寸局限默认将元素视为不包含内容，且可按与内容无宽度或高度相同的方式折叠布局。`contain-intrinsic-width` 允许作者为布局所用的宽度指定合适的值。

`auto <length>` 值允许元素“被正常渲染”（包括其子元素）后存储其宽度，再在元素不包含任何内容时使用此宽度而非指定宽度。由此允许有 `content-visibility: auto` 的屏外元素无需开发者精确估计元素尺寸即可受益于尺寸局限。在子元素渲染时，不使用记忆值（若启用尺寸局限，则将使用 `<length>`）。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | elements for which size containment can apply |
| 是否是继承属性 | 否 |
| 计算值 | as specified, with <length>s values computed |
| Animation type | by computed value type |

形式语法
----
```

contain-intrinsic-width =
  auto? [ none | <length> ]

```

示例
--

除下列示例外，`contain-intrinsic-size` 页面含有演示修改固有宽度和高度的效果的运行实例。

### 设置固有宽度

下列 HTML 代码定义了将受尺寸限制的元素“contained\_element”，此元素包含一个子元素。

```html
<div id="contained\_element">
  <div class="child\_element"></div>
</div>
```

下列 CSS 代码将 `contained_element` 的 `content-visibility` 设置为 `auto`，故若元素被隐藏则将受尺寸限制。此元素受尺寸限制时所用的宽度和高度分别使用 `contain-intrinsic-width` 和 `contain-intrinsic-height` 同时设置。

```css
#contained\_element {
  border: 2px solid green;
  width: 151px;
  content-visibility: auto;
  contain-intrinsic-width: 152px;
  contain-intrinsic-height: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-width |

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

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

参见
--

* content-visibility：提高渲染性能的新 CSS 属性（web.dev）
* `contain-intrinsic-size`
* `contain-intrinsic-height`
* `contain-intrinsic-block-size`
* `contain-intrinsic-inline-size`


CSS Color - CSS：层叠样式表

CSS Color
=========

**CSS Color** 是一个处理颜色的 CSS 模块，包括颜色类型、颜色混合、不透明度、以及你如何将这些颜色和效果应用于 HTML 内容。

不是所有把 `<color>` 作为值的 CSS 属性都是这个模块的一部分，但是它们确实依赖这个模块。

参考
--

### 属性

* `color`
* `color-adjust` (en-US)
* `opacity`
### 数据类型

* `<color>`
教程
--

Applying color to HTML elements using CSS

一份用 CSS 将颜色应用于许多不同类型内容上的教程。所有和颜色相关的 CSS 属性都会涉及。

工具
--

Color picker tool

该工具能让你创建、调整和试验自定义颜色变得简单。

规范
--

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

参见
--

* CSS 颜色调整 (en-US)模块及 `print-color-adjust` (en-US) 属性。
* 定义 CSS `<gradient>` 图像类型的 CSS 图像 (en-US) 模块。
* `VideoColorSpace` (en-US) 接口
* `<feColorMatrix>` SVG 元素
* Canvas API：应用样式及颜色


border-left-width - CSS：层叠样式表

border-left-width
=================

CSS 的 **`border-left-width`** 属性用来设置盒子的左边框的宽度。

尝试一下
----

语法
--

```css
/\* 关键字数值 \*/
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/\* 长度数值 \*/
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

/\* 全局关键字 \*/
border-left-width: inherit;
border-left-width: initial;
border-left-width: unset;
```

### 数值

`<br-width>`

定义边框的宽度，或者作为显性非负的长度值 `<length>` 或者是关键字。如果他是一个关键字，它必须是下列值的一种：

* `thin` 一个细边框
* `medium` 一个中等边框
* `thick` 一个粗边框

**备注：** 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 `thin ≤ medium ≤ thick`, 在单独文档中这些值内部是恒定不变的。

### 形式语法
```

border-left-width =
  <line-width>

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

```

示例
--

### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}
```

### 结果

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | the absolute length or `0` if `border-left-style` is `none` or `hidden` |
| Animation type | a length |

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

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

参见
--

* The other border-width-related CSS properties: `border-bottom-width`, `border-right-width`, `border-top-width`, and `border-width`.
* The other border-left-related CSS properties: `border`, `border-left`, `border-left-style`, and `border-left-color`.


整型 - CSS：层叠样式表

整型
==

 The **`<integer>`** CSS data type is a special type of `<number>` that represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as `column-count`, `counter-increment`, `grid-column`, `grid-row`, and `z-index`.
 The **`<integer>`** css 数据类型是一种特殊的<number>类型，它表示一个整数，无论是正数还是负数。整数可以用于许多 css 属性，例如`column-count`, `counter-increment`, `grid-column`, `grid-row`, and `z-index`.

语法
--

 The `<integer>` data type consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single `+` or `-` sign. There is no unit associated with integers.
 <integer>数据类型由一个或多个十进制数字组成，包括 0 到 9，可以选择前面加一个 + 或 - 号。没有与整数关联的单位。

**备注：** There is no official range of valid `<integer>` values. Opera 12.1 supports values up to 215-1, IE up to 220-1, and other browsers even higher. During the CSS3 Values cycle there was a lot of discussion about setting a minimum range to support: the latest decision, in April 2012 during the LC phase, was [-227-1; 227-1], but other values like 224-1 and 230-1 were also proposed. However, the latest spec doesn't specify a range anymore.
 注意：没有有效的<integer>值的正式范围。Opera12.1 支持高达 215-1 的值，IE 高达 220-1 的值，其他浏览器支持更高的值。在 CSS3 值周期中，有很多关于设置最小支持范围的讨论：2012 年 4 月在 LC 阶段的最新决定是 [-227-1; 227-1],，但也提出了 224-1 and 230 等其他值。但是，最新的规范不再指定范围。

Interpolation
-------------

 When animated, values of the `<integer>` data type are interpolated using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the floor function. The speed of the interpolation is determined by the timing function (en-US) associated with the animation.
 设置动画时，<integer>数据类型的值将使用离散的完整步骤进行插值。计算过程就像是实数，浮点数一样；离散值是使用 floor 函数得到的。插值的速度由与动画相关联的定时函数确定。

示例
--

### 合法整型
```

12          Positive integer (without a leading + sign)
+123        Positive integer (with a leading + sign)
-456        Negative integer
0           Zero
+0          Zero, with a leading +
-0          Zero, with a leading -
```

### 非法整型
```

12.0        This is a <number>, not an <integer>, though it represents an integer.
12.         Decimal points are not allowed.
+---12      Only one leading +/- is allowed.
ten         Letters are not allowed.
_5          Special characters are not allowed.
\35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5).
\4E94       Non-arabic numerals are not allowed, even when escaped (here: the Japanese 5, 五).
3e4         Scientific notation is not allowed.
```

规范
--

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

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

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

参考
--

* `<number>`


CSSOM View - CSS：层叠样式表

CSSOM View
==========

CSSOM 视图是一个模块，允许操作文档的可视化视图，尤其是其滚动行为。

参考
--

### 属性

* `scroll-behavior`
指南
--

*None.*

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

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


:first - CSS：层叠样式表

:first
======

**`:first`** CSS 伪类与 `@page` at 规则一起使用。表示打印文档的第一页。（有关节点的第一个元素，请参阅 `:first-child`。）

```css
/\* 打印时选择第一页 \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```

**备注：** 你不能使用此伪类更改所有的 CSS 属性。你只能更改文档的边距、`orphans` (en-US)、`widows` 和分页符。此外，在定义边距时，你只能使用绝对长度单位。所有其他属性都将被忽略。

语法
--

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

示例
--

### HTML

```html
<p>第一页。</p>
<p>第二页。</p>
<button>打印！</button>
```

### CSS

```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### JavaScript

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

### 结果

按下“打印！”按钮以打印此示例。第一页的文字应该大致位于中心位置，而其他页的内容将位于默认位置。

规范
--

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

参见
--

* `@page`
* 其他页面相关的伪类：`:left`、`:right`


border-right - CSS：层叠样式表

border-right
============

CSS 属性 **border-`right`** 是属性`border-right-color`, `border-right-style`, 和`border-right-width`的三者的缩写。这些属性都是在描述一个元素的右边的边框`border`。

```css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;
```

**备注：** 和 CSS 所有的缩写属性一样，border-`right` 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......

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

......实际上应该是下面这个样子......

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

......并且在 border-`right` 之前定义的 `border-right-style` 的值也会被覆盖。由于`border-right-style` 的默认值是 none, border-style 的最终结果就是没有边框。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-right-width`: `medium`
* `border-right-style`: `none`
* `border-right-color`: `currentcolor`
 |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
* `border-right-style`: as specified
* `border-right-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-right-color`: a color
* `border-right-style`: discrete
* `border-right-width`: a length
 |

Syntax
------

这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。

### Values

`<br-width>`

请参阅 `border-right-width`.

`<br-style>`

请参阅 `border-right-style`.

``<color>``

请参阅 `border-right-color`.

### Formal syntax
```

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

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

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

```

Example
-------

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

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

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

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

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

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


CSS 文本装饰 - CSS：层叠样式表

CSS 文本装饰
========

**CSS 文本装饰** 是 CSS 的一个模块，用于定义与文本修饰相关的功能，例如下划线，文本阴影和强调标记。

参考
--

### 属性

* `letter-spacing`
* `text-align`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent`
* `text-rendering`
* `text-shadow`
* `text-transform`
* `white-space`
* `word-spacing`
指南
--

*无。*

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3  |


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

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

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

尝试一下
----

语法
--

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

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

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

### 取值

`<'color'>`

边框颜色。见 `color`。

形式定义
----

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

形式语法
----
```

border-block-end-color =
  <color>     |
  <image-1D>

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

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

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

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

```

示例
--

### 竖排文本的边框颜色

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


text-underline-position - CSS：层叠样式表

text-underline-position
=======================

当 `text-decoration`属性的值设置为 `underline` 之后，可以用 **`text-underline-position`** 属性为其设置下划线的位置。

```css
/\* 只设置一个属性值 \*/
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/\* 设置多个属性值 \*/
text-underline-position: under left;
text-underline-position: right under;

/\* 全局属性值 \*/
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;
```

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

语法
--

### 属性值

`auto`

用户代理 会根据自己的算法来确认下划线是放在字母基线上还是 放在字母基线下方。

`under`

强制下划线的位置为字母基线的下方，在这个位置，下划线不会穿过任何字母，这样能确保数学方程式或者化学式的下标不会被下划线阻挡。

`left`

在垂直排版模式下，使下划线的位置在文字的左侧，在水平排版模式下，和 `under` 相同。

`right`

在垂直排版模式下，使下划线的位置在文字的右侧，在水平排版模式下，和 `under` 相同。

`auto-pos`
非标准

`auto`的同义词，应使用 `auto`。

`above`
非标准

强制下划线放置于文本上面。当使用东亚文字时，此效果和使用 `auto` 相同。

`below`
非标准

强制下划线放置于文本下面。当使用字母文字的时候，此效果和使用 `auto` 相同。

### 正式语法
```

text-underline-position =
  auto                           |
  [ under || [ left | right ] ]

```

示例
--

由于 `text-underline-position` 属性可以继承，且无法用 `text-decoration` 简写属性重置，所以应当在全局级别设置其值。比如，`under` 值对一篇包括大量使用下标的数学或者化学公式的文档是非常有用的。

```css
:root {
  text-underline-position: under;
}
```

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-underline-position-property |

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

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

参阅
--

* `text-decoration` 属性是大多数作为设置 text-decoration 属性的简写形式，包括 `text-decoration-line`， `text-decoration-color`，和`text-decoration-style`。但是，text-decoration 不会设置 `text-underline-position`。
* Microsoft non-standard values documentation


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

scroll-snap-type
================

CSS 属性 **`scroll-snap-type`** 设置了在有滚动容器的情形下吸附至吸附点的严格程度。

尝试一下
----

此属性不为吸附至吸附点指定任何确切的动画或运动规律，留待用户代理处理。

```css
/\* 不吸附 \*/
scroll-snap-type: none;

/\* 表示吸附轴的关键字 \*/
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/\* 表示吸附程度的可选关键字 \*/
/\* mandatory 或 proximity \*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

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

语法
--

### 取值

`none`

在滚动此滚动容器的可见视口时，必须忽略吸附点。

`x`

滚动容器仅在其横轴上吸附至吸附位置。

`y`

滚动容器仅在其纵轴上吸附至吸附位置。

`block`

滚动容器仅在其块向轴上吸附至吸附位置。

`inline`

滚动容器仅在其行向轴上吸附至吸附位置。

`both`

滚动容器在其两轴上独立地吸附至吸附位置（可能在各轴上吸附至不同的元素）。

`mandatory`

若滚动容器当前未在滚动，则其可见视口必须吸附至吸附位置。

`proximity`

若滚动容器当前未在滚动，则其可见视口可以吸附至吸附位置。是否吸附由用户代理根据滚动参数决定。若指定了吸附轴，则此为默认的吸附程度。

**备注：** 若吸附口中的内容发生变动（如被添加、移动、删除或改变尺寸）或者与滚动吸附相关的任意属性（如 `scroll-snap-type` 或 `scroll-margin`）的值发生变化，则滚动容器将按照 `scroll-snap-type` 最新的值重新吸附。

形式定义
----

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

形式语法
----
```

scroll-snap-type =
  none                                                |
  [ x | y | block | inline | both ] [ mandatory | proximity ]?

```

示例
--

### 不同轴上的吸附

#### HTML

```html
<div class="holster">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
    <div>x 轴强制、从左往右</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x proximity-scroll-snapping" dir="ltr">
    <div>x 轴靠近、从左往右</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y mandatory-scroll-snapping" dir="ltr">
    <div>y 轴强制、从左往右</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y proximity-scroll-snapping" dir="ltr">
    <div>y 轴靠近、从左往右</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x mandatory-scroll-snapping" dir="rtl">
    <div>x 轴强制、从右往左</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x proximity-scroll-snapping" dir="rtl">
    <div>x 轴靠近、从右往左</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y mandatory-scroll-snapping" dir="rtl">
    <div>y 轴强制、从右往左</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y proximity-scroll-snapping" dir="rtl">
    <div>y 轴靠近、从右往左</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>
```

#### CSS
```

.holster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}
.container {
  display: flex;
  margin: 1em auto;
  outline: 1px dashed lightgray;
  flex: none;
  overflow: auto;
}
.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
  overflow-y: hidden;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
  overflow-x: hidden;
}
```

```css
/\* 滚动吸附 \*/
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
```

```
.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 100%;
}

/\* 修补外观 \*/
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}

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

#### 结果

规范
--

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

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

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

参见
--

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


::-webkit-progress-inner-element - CSS：层叠样式表

::-webkit-progress-inner-element
================================

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

**`::-webkit-progress-inner-element`** 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-inner-element {
  border: 2px solid black;
}
```

### 结果

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

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

规范
--

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

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

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

参考
--

* The pseudo-elements used by WebKit/Blink to style other parts of a `<progress>` element:
    + `::-webkit-progress-bar`
    + `::-webkit-progress-value`
* `::-moz-progress-bar`
* `::-ms-fill`


:focus-visible - CSS：层叠样式表

:focus-visible
==============

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

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

* Learn more
* See full compatibility
* Report feedback
当元素匹配`:focus`伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，**`:focus-visible`** 伪类将生效。

这个选择器可以有效地根据用户的输入方式 (鼠标 vs 键盘) 展示不同形式的焦点。

请注意 Firefox 通过较旧的前缀伪类 `:-moz-focusring` 支持类似的功能。更多细节请参考`:-moz-focusring` (en-US)页面。

语法
--

```css
:focus-visible {
  /\* ... \*/
}
```

示例
--

### 基本示例

在这个例子中，`:focus-visible` 选择器利用客户端 (UA) 的行为决定是否匹配。比较一下，当你用鼠标点击控件和用键盘 tab 切换控件有何不同。请注意元素的表现与具有 `:focus` 样式的元素的区别。

```html
<input value="Default styles" /><br />
<button>Default styles</button><br />
<input class="focus-only" value=":focus only" /><br />
<button class="focus-only">:focus only</button><br />
<input class="focus-visible-only" value=":focus-visible only" /><br />
<button class="focus-visible-only">:focus-visible only</button>
```

```css
input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}
```

### 选择性地显示焦点

自定义控件，比如按钮自定义元素，可以使用 `:focus-visible` 使其仅在键盘操作时才显示焦点样式。这和`<button>`一类的原生控件表现一致。

```html
<custom-button tabindex="0" role="button">Click Me</custom-button>
```

```css
custom-button {
  display: inline-block;
  margin: 10px;
}

custom-button:focus {
  /\* Provide a fallback style for browsers
 that don't support :focus-visible \*/
  outline: none;
  background: lightgrey;
}

custom-button:focus:not(:focus-visible) {
  /\* Remove the focus indicator on mouse-focus for browsers
 that do support :focus-visible \*/
  background: transparent;
}

custom-button:focus-visible {
  /\* Draw a very noticeable focus style for
 keyboard-focus on browsers that do support
 :focus-visible \*/
  outline: 4px dashed darkorange;
  background: transparent;
}
```

Polyfill
--------

你可以使用 `:focus-visible` 的 polyfill focus-visible.js 。

无障碍关注点
------

保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 WCAG 2.1 SC 1.4.11 Non-Text Contrast 要求视觉焦点指示至少在 3 到 1。

可访问的视觉焦点指示：给你的网站一些焦点！设计有效且可用的焦点指示的一些建议。

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-focus-visible-pseudo |

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

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

参见
--

* `:focus`
* `:focus-within`


mask-border-mode - CSS：层叠样式表

mask-border-mode
================

该CSS属性指定使用的混合模式面具边界。**`mask-border-mode`**

Syntax
------

```css
/\* Keyword values \*/
mask-border-mode: luminance;
mask-border-mode: alpha;

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

### 值

`luminance`

掩模边界图像的亮度值用作掩模值。

`alpha`

掩模边界图像的亮度值用作掩模值。

形式定义
----

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

形式语法
----
```

mask-border-mode =
  luminance  |
  alpha

```

规范
--

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

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

还没有任何浏览器支持此属性。


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 September 2020.

* Learn more
* See full compatibility
* Report feedback
`flex` CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

尝试一下
----

成分属性
----

此属性是以下 CSS 属性的简写：

* `flex-grow`
* `flex-shrink`
* `flex-basis`
语法
--

```css
/\* 关键字值 \*/
flex: auto;
flex: initial;
flex: none;

/\* 单值，无单位数字：flex-grow
flex-basis 此时等于 0。 \*/
flex: 2;

/\* 单值，宽度/高度：flex-basis \*/
flex: 10em;
flex: 30px;
flex: min-content;

/\* 双值：flex-grow | flex-basis \*/
flex: 1 30px;

/\* 双值：flex-grow | flex-shrink \*/
flex: 2 2;

/\* 三值：flex-grow | flex-shrink | flex-basis \*/
flex: 2 2 10%;

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

可以使用一个，两个或三个值来指定 `flex` 属性。

* **单值语法**：值必须是以下之一：
    + 一个 `<flex-grow>` 的有效值：此时简写会扩展为 `flex: <flex-grow> 1 0`。
    + 一个 `<flex-basis>` 的有效值：此时简写会扩展为 `flex: 1 1 <flex-basis>`。
    + 关键字 `none` 或者全局关键字之一。
* **双值语法**：
    + 第一个值必须是一个 `flex-grow` 的有效值。
    + 第二个值必须是以下之一：
        - 一个 `flex-shrink` 的有效值：此时简写会扩展为 `flex: <flex-grow> <flex-shrink> 0`。
        - 一个 `flex-basis` 的有效值：此时简写会扩展为 `flex: <flex-grow> 1 <flex-basis>`。
* **三值语法**：值必须按照以下顺序指定：
    1. 一个 `flex-grow` 的有效值。
    2. 一个 `flex-shrink` 的有效值。
    3. 一个 `flex-basis` 的有效值。
### 取值

`initial`

元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"`flex: 0 1 auto`"。

`auto`

元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "`flex: 1 1 auto`".

`none`

元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"`flex: 0 0 auto`"。

`<'flex-grow'>`

定义 flex 项目的 `flex-grow` 。负值无效。省略时默认值为 1。 (初始值为 `0`)

`<'flex-shrink'>`

定义 flex 元素的 `flex-shrink` 。负值无效。省略时默认值为`1`。 (初始值为 `1`)

`<'flex-basis'>`

定义 flex 元素的 `flex-basis` 属性。若值为`0`，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)

### 描述

大多数情况下，开发者需要将 `flex` 设置为以下值之一： `auto`，`initial`，`none`，或一个无单位正数。要查看这些值的效果，请尝试调整以下 flex 容器的大小：
```

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item initial">initial</div>
  <div class="item initial">initial</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item initial">initial</div>
  <div class="item none">none</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item four">4</div>
  <div class="item two">2</div>
  <div class="item one">1</div>
</div>
```

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

.flex-container {
  background-color: #f4f7f8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1b5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}
```

默认情况下，元素不会缩短至小于内容框尺寸，若想改变这一状况，请设置元素的`min-width` 与 `min-height`属性。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| 适用元素 | flex items, including in-flow pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `flex-grow`: as specified
* `flex-shrink`: as specified
* `flex-basis`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `flex-grow`: a number
* `flex-shrink`: a number
* `flex-basis`: a length, percentage or calc();
 |

形式语法
----
```

flex =
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

```

示例
--

### 设置 flex: auto

#### HTML

```html
<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>
```

#### CSS

```css
#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}
```

```
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function () {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});
```

```
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}

#flex-container > .raw-item {
  border: 1px solid #000;
}
```

### Result

规范
--

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

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| 适用元素 | flex items, including in-flow pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `flex-grow`: as specified
* `flex-shrink`: as specified
* `flex-basis`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `flex-grow`: a number
* `flex-shrink`: a number
* `flex-basis`: a length, percentage or calc();
 |

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

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

参见
--

* CSS Flexbox 指南：*Flexbox 基本概念*
* CSS Flexbox 指南：*控制 Flex 子元素在主轴上的比例*


padding-left - CSS：层叠样式表

padding-left
============

CSS 属性 **`padding-left`** 是指一个元素在内边距区域（padding area）中左边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。

尝试一下
----

元素的“填充区域”是其内容和边框之间的空间。

**备注：** `padding` 属性可用于通过一个声明在元素的四个边（上、下、左、右）上设置填充。

语法
--

```css
/\* 长度单位参数 \*/
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/\* 百分数参数 \*/
padding-left: 10%;

/\* 全局参数 \*/
padding-left: inherit;
padding-left: initial;
padding-left: unset;
```

`padding left`属性指定为从下表中选择的单个值。与外边距（margins）不同，可以接受的值不允许是负数。

### 参数

`<length>`

填充内边距的长度。它必须是非负的。

`<percentage>`

以与父级盒子的百分比表示的填充大小。它也必须是非负的。

标准定义
----

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

标准语法
----
```

padding-left =
  <length-percentage [0,∞]>

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

```

样例
--

### 使用“px”单位和百分比设置 padding-left 的样例

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

规范
--

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

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

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

另见
--

* Introduction to the CSS basic box model
* `padding-top`, `padding-right`, `padding-bottom` and the `padding` shorthand
* The mapped logical properties: `padding-block-start`, `padding-block-end`, `padding-inline-start`, and `padding-inline-end` and the shorthands `padding-block` and `padding-inline`


:disabled - CSS：层叠样式表

:disabled
=========

`:disabled` CSS 伪类表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态，在启用状态下，元素可以被激活或获取焦点。

尝试一下
----

语法
--

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

示例
--

这个例子展示了一个基本的发货表单。通过使用 JavaScript `change` 事件让用户启用/禁用账单字段。

### HTML

```html
<form action="#">
  <fieldset id="shipping">
    <legend>发货地址</legend>
    <input type="text" placeholder="姓名" />
    <input type="text" placeholder="地址" />
    <input type="text" placeholder="邮政编码" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>账单地址</legend>
    <label for="billing-checkbox">跟发货地址一样：</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="姓名" disabled />
    <input type="text" placeholder="地址" disabled />
    <input type="text" placeholder="邮政编码" disabled />
  </fieldset>
</form>
```

### CSS

```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript

```js
// 等待页面加载完毕
document.addEventListener(
  "DOMContentLoaded",
  function () {
    // 将“change”事件监听器附加到复选框
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // 选择 billing 文本字段
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // 切换 billing 文本字段
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

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

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

参见
--

* `:enabled`


:host - CSS：层叠样式表

:host
=====

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**`:host`** CSS 伪类选择内部使用了该 CSS 的影子 DOM（shadow DOM） 的影子宿主（shadow host）——换句话说，这允许你从其影子 DOM 内部选择自定义元素。

**备注：** 这不适用于在影子 DOM 之外使用。

```css
/\* 选择影子根宿主 \*/
:host {
  font-weight: bold;
}
```

语法
--

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

示例
--

### 给影子宿主添加样式

下面的片段摘自我们的 host-selectors 示例（也可以在线查看）。

在此示例中，我们有一个简单的自定义元素（`<context-span>`）你可以将其包装在文本周围：

```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```

在元素的构造函数中，我们创建了 `style` 和 `span` 元素，用自定义元素的内容填充 `span`，并用一些 CSS 规则填充 `style` 元素。

```js
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```

`:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` 规则为文档中 `<context-span>` 元素（在文档中为影子宿主）的所有实例设置样式。

规范
--

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

参见
--

* Web 组件
* `:host()`
* `:host-context()`


counter-set - CSS：层叠样式表

counter-set
===========

**`counter-set`** CSS 属性将 CSS 计数器设置为给定值。它会操作现有计数器的值，并且只有在元素上没有给定名称的计数器时才会创建新计数器。

尝试一下
----

**备注：** 计数器的值可以通过 `counter-increment` CSS 属性进行递增或递减。

语法
--

```css
/\* 将 "my-counter" 设置为 0 \*/
counter-set: my-counter;

/\* 将 "my-counter" 设置为 -1 \*/
counter-set: my-counter -1;

/\* 将 "counter1" 设置为 1，将 "counter2" 设置为 4 \*/
counter-set: counter1 1 counter2 4;

/\* 取消在不太具体的规则中可能设置的任何计数器 \*/
counter-set: none;

/\* 全局值 \*/
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: revert-layer;
counter-set: unset;
```

`counter-set` 属性可以指定为以下之一：

* 一个命名计数器的 `<custom-ident>`，后面可跟一个 `<integer>`。你可以指定要重置的计数器数量，每个名称或名称—数字对之间用空格分隔。
* 关键字值 `none`。
### 值

`<custom-ident>`

要设置的计数器的名称。

`<integer>`

在元素每次出现时设置计数器的值。如果未指定，则默认为 `0`。如果当前元素上没有给定名称的计数器，元素将创建一个给定名称的新计数器，起始值为 0（尽管它可能会立即将该值设置或增加为不同的值）。

`none`

不执行计数器设置。这可以用来覆盖在较不具体的规则中定义的 `counter-set`。

形式定义
----

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

形式语法
----
```

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

```

示例
--

### 设置命名计数器

```css
h1 {
  counter-set: chapter section 1 page;
  /\* 将章节和页面计数器设置为 0，
 将部分计数器设置为 1 \*/
}
```

规范
--

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

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

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

参见
--

* 使用 CSS 计数器
* `counter-increment`
* `counter-reset`
* `@counter-style`
* `counter()` 和 `counters()` 函数
* `content` 属性


padding-bottom - CSS：层叠样式表

padding-bottom
==============

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

![The effect of the CSS padding-bottom property on the element box](/files/4109/padding-bottom.svg)

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

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

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

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

Syntax
------

### Values

`<length>`

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

`<percentage>`

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

### Formal syntax
```

padding-bottom =
  <length-percentage [0,∞]>

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

```

Examples
--------
```

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

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

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

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

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

See also
--------

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


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

::slotted()
===========

**`:slotted()`** CSS 伪元素用于选定那些被放在 HTML 模板中的元素（更多请查看使用模板和插槽）。

这个伪类选择器仅仅适用于影子节点树（Shadow Dom）。并且只会选择实际的元素节点，而不包括文本节点。

```css
/\* Selects any element placed inside a slot \*/
::slotted(\*) {
  font-weight: bold;
}

/\* Selects any <span> placed inside a slot \*/
::slotted(span) {
  font-weight: bold;
}
```

语法
--

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

下面的小片段是关于 插槽伪类元素 小 demo (点击查看实例).

在这个小 demo 中，我们使用一个带有 3 个插槽的 HTML 模板：

```html
<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>
```

自定义元素 `<person-details>` 的定义如下：

```js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(\*) { color: gray; font-family: sans-serif; } ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);
```

为了更好地区分**未被成功填充的插槽**和**成功填充的插槽**, 我们在 CSS 中选择了所有的插槽元素 (`::slotted(*)`), 并填充了不一样的颜色和字体。结果也是如此。

元素就像如下被填充了起来：

```html
<person-details>
  <p slot="person-name">Dr. Shazaam</p>
  <span slot="person-age">Immortal</span>
  <span slot="person-occupation">Superhero</span>
</person-details>
```

规范
--

| Specification |
| --- |
| CSS Scoping Module Level 1 # slotted-pseudo |

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

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

参考
--

* Web components


backdrop-filter - CSS：层叠样式表

backdrop-filter
===============

**`backdrop-filter`** CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素*背后*的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

```css
/\* 关键词值 \*/
backdrop-filter: none;

/\* 指向 SVG 滤镜的 URL \*/
backdrop-filter: url(commonfilters.svg#filter);

/\* <filter-function> 滤镜函数值 \*/
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/\* 多重滤镜 \*/
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/\* 全局值 \*/
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;
```

语法
--

### 值

`none`

没有应用于背景的滤镜。

`<filter-function-list>`

一个以空格分隔的滤镜函数（`<filter-function>`）或是要应用到背景上的 SVG 滤镜。

形式化定义
-----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a filter function list |

形式化语法
-----
```

backdrop-filter =
  none                 |
  <filter-value-list>

<filter-value-list> =
  [ <filter-function> | <url> ]+

<filter-function> =
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>

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

<blur()> =
  blur( <length>? )

<brightness()> =
  brightness( [ <number> | <percentage> ]? )

<contrast()> =
  contrast( [ <number> | <percentage> ]? )

<drop-shadow()> =
  drop-shadow( [ <color>? && <length>{2,3} ] )

<grayscale()> =
  grayscale( [ <number> | <percentage> ]? )

<hue-rotate()> =
  hue-rotate( [ <angle> | <zero> ]? )

<invert()> =
  invert( [ <number> | <percentage> ]? )

<opacity()> =
  opacity( [ <number> | <percentage> ]? )

<sepia()> =
  sepia( [ <number> | <percentage> ]? )

<saturate()> =
  saturate( [ <number> | <percentage> ]? )

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

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

```

示例
--

### CSS

```css
.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
```

### HTML

```html
<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>
```

### 结果

规范
--

| Specification |
| --- |
| Filter Effects Module Level 2 # BackdropFilterProperty |

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

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

参见
--

* `filter`


shape-margin - CSS：层叠样式表

shape-margin
============

CSS 属性 **`shape-margin`** 用于设定由`shape-outside`创建的 CSS 形状的外边距。

尝试一下
----

这个外边距可以让你调整（浮动元素的）形状边缘与环绕内容之间的距离。

语法
--

```css
/\* <length> values \*/
shape-margin: 10px;
shape-margin: 20mm;

/\* <percentage> value \*/
shape-margin: 60%;

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

### 值

`<length-percentage>`

使用`<length>`值，或者相对于元素容纳块的`<percentage>`值来设定形状的外边距。

### 正式语法
```

shape-margin =
  <length-percentage [0,∞]>

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

```

范例
--

### Adding a margin to a polygon

#### HTML

```html
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>
```

#### CSS

```css
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}
```

#### Result

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | floats |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length, percentage or calc(); |

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

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

参见
--

* CSS Shapes
* Overview of CSS Shapes
* `shape-outside`
* `shape-image-threshold`
* `<basic-shape>`


border-right-style - CSS：层叠样式表

border-right-style
==================

**`border-right-style`** 是 border 中的一个 CSS 子属性，描述的是右边框的样式 `border`.

尝试一下
----

**备注：** 这个 css 没有定义不同样式的边界之间如何拼接。

Syntax
------

```css
/\* 可用的值 \*/
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

/\* 全局可用的值 \*/
border-right-style: inherit;
border-right-style: initial;
border-right-style: unset;
```

The `border-right-style` property is specified as a single keyword chosen from those available for the `border-style` property.

### 语法格式
```

border-right-style =
  <line-style>

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

```

示例
--

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-right-style example classes \*/
.b1 {
  border-right-style: none;
}
.b2 {
  border-right-style: hidden;
}
.b3 {
  border-right-style: dotted;
}
.b4 {
  border-right-style: dashed;
}
.b5 {
  border-right-style: solid;
}
.b6 {
  border-right-style: double;
}
.b7 {
  border-right-style: groove;
}
.b8 {
  border-right-style: ridge;
}
.b9 {
  border-right-style: inset;
}
.b10 {
  border-right-style: outset;
}
```

#### 结果

规范
--

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

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

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

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

参考
--

* 其他样式相关边框属性：`border-bottom-style`, `border-left-style`, `border-top-style`, and `border-style`.
* 其他 bottom-border-related 属性：`border-right`, `border-right-color`, and `border-right-width`.


font-smooth - CSS：层叠样式表

font-smooth
===========

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

**`font-smooth`** CSS 属性控制字体渲染时应用的抗锯齿效果。

语法
--

```css
/\* 关键字值 \*/
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/\* <length> 值 \*/
font-smooth: 2em;

/\* 全局值 \*/
font-smooth: inherit;
font-smooth: initial;
font-smooth: revert;
font-smooth: revert-layer;
font-smooth: unset;
```

**备注：** Webkit 实现了名为 **`-webkit-font-smoothing`** 的相似属性。该属性仅适用于 macOS。

* `auto`——由浏览器决定（如果可用，则使用亚像素抗锯齿；这是默认值）。
* `none`——关闭字体平滑；显示带有锯齿边缘的文本。
* `antialiased`——在像素（而不是亚像素）级别平滑字体。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
* `subpixel-antialiased`——在大多数非视网膜显示器上，这将会提供最清晰的文本。

**备注：** Firefox 实现了名为 **`-moz-osx-font-smoothing`** 的相似属性。该属性仅适用于 macOS。

* `auto`——允许浏览器选择字体平滑的优化方式，通常为 `grayscale`。
* `grayscale`——用灰度抗锯齿（而不是亚像素）渲染文本。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。

形式定义
----

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

形式语法
----
```

font-smooth =
  auto | never | always | <absolute-size> | <length>
```

示例
--

### 基础使用示例

以下示例展示了在 macOS 上打开字体平滑的 Safari/Chromium 和 Firefox 的等效结果。对于这两类情况，平滑的字体应该看起来更细一些。

对于那些没有使用 macOS 系统的用户，这里有一张截图（后面会有实时版本）：

![两类文本示例，一个具有 font-smooth 属性，而另一个则不具有](/zh-CN/docs/Web/CSS/font-smooth/smoothing.png)

#### HTML

```html
<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>
```

#### CSS

```css
html {
  background-color: black;
  color: white;
  font-size: 3rem;
}

p {
  text-align: center;
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

#### 结果

规范
--

不属于任何规范。

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

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

参见
--

* 请停止“修复”字体平滑——UsabilityPost
* 不干涉字体平滑和抗锯齿


SVG 背景缩放 - CSS：层叠样式表

SVG 背景缩放
========

SVG 相比其他格式为我们提供了更多的灵活性，与此同时当我们把它用作背景图形 `background-image` 时有更多需要我们注意的东西，尤其是在我们使用 `background-size` 属性时。本文描述了在使用这些属性时如何处理 SVG 图像的缩放。

规则概要
----

大部分计算方式可以用这四条规则来概括。这些规则基本上涵盖了大部分情况除了个别边缘问题。

1. 当 `background-size` 指定了固定的尺寸（百分比或者其他单位），会按照固定的尺寸来。
2. 当图片自身存在固有的比例（宽高比恒定，诸如 16:9、4:3、2.39:1、1:1 等等)，渲染出的尺寸使用这个比例。
3. 当图像指定了尺寸，并且这个尺寸没有被修改，则使用指定的尺寸。
4. 当不是上述情况时，则图像将呈现与背景区域相同的大小。

总体来说，上列尺寸计算规则关心的是一个图像有无定义的尺寸和比例，与图片格式没有关系。具有固定尺寸的 SVG 图像依然被视为大小相同的光栅图像。

源图片示例
-----

在深入研究使用`background-size`并不同类型图片的影响并且得到结果之前，我们先来看看不同尺寸和大小的图像示例。

在每个例子中，图像被渲染在 150x150 的容器内，并且在下方提供了 SVG 文件资源

### 无尺寸无比例

下面这个图片既没有尺寸也没有比例。这种情况不会关心它的尺寸也不关心它的长宽比例。无论你的屏幕尺寸和长宽比如何，这都是一个很好的渐变桌面背景。

![no-dimensions-or-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-or-ratio.png)

SVG 源码

### 指定一个维度的尺寸，但无固定比例

这个图片指定了 100px 的宽但是没有高度也没有固定的比例。我们可以说这是一个可以在一条街道上无线延伸的壁纸。

![100px-wide-no-height-or-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio.png)

SVG 源码

### 指定一个维度的尺寸，有固定比例

这个图片指定了 100px 的高但没有宽。同时指定了一个 3:4 的比例，除非是故意放大到不成比例的尺寸（也就是说，通过显式指定宽度和高度到不是这个比例）

![100px-height-3x4-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-height-3x4-ratio.png)

SVG 源码

### 无宽高，有固定比例

这个图片既没有指定高度也没有指定宽度。它指定的是 1:1 的固定比例。就像软件的图标一样。它总是保持正方形，而且可以用于任何尺寸，例如 32x32，128x128，和 512x512。

![no-dimensions-1x1-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-1x1-ratio.png)

SVG 源码

缩放示例
----

现在让我们来看看这些图片在各种缩放情景下怎么展现。以下例子都是宽 300 高 200 像素的矩形。此外， `background-repeat` 都设为了 no-repeat，以便看得出来缩放的情况。

**备注：** 以下截屏只表达**符合预期的**渲染效果。目前不是所有的浏览器都能正确的渲染这些代码。

### 两个维度都指定尺寸

如果你使用 `background-size` 指定了两条边的长度，those lengths are always used, per rule 1 above. In other words, the image will always get stretched to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio.

#### Source: No dimensions or intrinsic ratio

Given this CSS:

```css
background: url(no-dimensions-or-ratio.svg);
background-size: 125px 175px;
```

The rendered output would look like this:

![fixed-no-dimensions-or-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-no-dimensions-or-ratio.png)

#### Source: One specified dimension, no intrinsic ratio

Given this CSS:

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: 250px 150px;
```

The rendered output would look like this:

![fixed-100px-wide-no-height-or-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-100px-wide-no-height-or-ratio.png)

#### Source: One specified dimension with intrinsic ratio

Given this CSS:

```css
background: url(100px-height-3x4-ratio.svg);
background-size: 275px 125px;
```

The rendered output would look like this:

![fixed-100px-height-3x4-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-100px-height-3x4-ratio.png)

#### Source: No specified width or height with intrinsic ratio

Given this CSS:

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: 250px 100px;
```

The rendered output would look like this:

![fixed-no-dimensions-1x1-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-no-dimensions-1x1-ratio.png)

### 使用 contain 或者 cover

当 `background-size` 指定为 `cover` 时，图片能多小就多小，只要依然能覆盖整个背景区域。而指定为 `contain` 则会使得图片能多大就多大，只要不被背景裁切就好。

For an image with an intrinsic ratio, exactly one size matches the `cover`/fit criteria alone. But if there is no intrinsic ratio specified, `cover`/fit isn't sufficient, so the large/small constraints choose the resulting size.

#### Source: No dimensions or intrinsic ratio

If an image doesn't specify either dimensions or an intrinsic ratio, neither rule 2 nor rule 3 apply, so rule 4 takes over: the background image is rendered covering the entire background area. This satisfies the largest-or-smallest constraint.

```css
background: url(no-dimensions-or-ratio.svg);
background-size: contain;
```

The rendered output looks like this:

![no-dimensions-or-ratio-contain.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-or-ratio-contain.png)

#### Source: One specified dimension, no intrinsic ratio

Similarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area.

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: contain;
```

The rendered output looks like this:

![100px-wide-no-height-or-ratio-contain.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio-contain.png)

#### Source: One specified dimension with intrinsic ratio

Things change when you specify an intrinsic ratio. In this case, rule 1 isn't relevant, so rule 2 is applied: we try to preserve any intrinsic ratio (while respecting `contain` or `cover`). For example, preserving a 3:4 intrinsic aspect ratio for a 300x200 box with `contain` means drawing a 150x200 background.

##### contain case

```css
background: url(100px-height-3x4-ratio.svg);
background-size: contain;
```

The rendered output looks like this:

![100px-height-3x4-ratio-contain.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-height-3x4-ratio-contain.png)

Notice how the entire image is rendered, fitting as best as possible into the box without clipping any of it away.

##### cover case

```css
background: url(100px-height-3x4-ratio.svg);
background-size: cover;
```

The rendered output looks like this:

![100px-height-3x4-ratio-cover.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-height-3x4-ratio-cover.png)

Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

#### Source: No dimensions with intrinsic ratio

When using an image with no intrinsic dimensions but an intrinsic ratio, things work similarly.

##### contain case

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: contain;
```

The rendered output looks like this:

![no-dimensions-1x1-ratio-contain.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-1x1-ratio-contain.png)

Notice that the image is sized to fit the smallest dimension while preserving the 1:1 aspect ratio.

##### cover case

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: cover;
```

The rendered output looks like this:

![no-dimensions-1x1-ratio-cover.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-1x1-ratio-cover.png)

Here, the image is sized so that it fills the largest dimension. The 1:1 aspect ratio has been preserved, although with this source image, that can be difficult to see.

### Automatic sizing using "auto" for both dimensions

If `background-size` is set to `auto` or `auto auto`, rule 2 says that rendering must preserve any intrinsic ratio that's provided.

#### Source: No dimensions or intrinsic ratio

When no intrinsic ratio or dimensions are specified by the source image, rule 4 takes effect, and the image is rendered to fill the background area.

```css
background: url(no-dimensions-or-ratio.svg);
background-size: auto auto;
```

The rendered output looks like this:

![auto-no-dimensions-or-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-no-dimensions-or-ratio.png)

#### Source: One dimension and no intrinsic ratio

If no intrinsic ratio is specified, but at least one dimension is specified, rule 3 takes effect, and we render the image obeying those dimensions.

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto auto;
```

The rendered output looks like this:

![auto-100px-wide-no-height-or-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-100px-wide-no-height-or-ratio.png)

Note here that the width, which is specified in the source SVG at 100 pixels, is obeyed, while the height fills the background area since it's not specified (either explicitly or by an intrinsic ratio).

#### Source: One dimension and an intrinsic ratio

If we have an intrinsic ratio with a fixed dimension, that fixes both dimensions in place. Knowing one dimension and a ratio is, as has been mentioned already, the same as specifying both dimensions explicitly.

```css
background: url(100px-height-3x4-ratio.svg);
background-size: auto auto;
```

The rendered output looks like this:

![auto-100px-height-3x4-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-100px-height-3x4-ratio.png)

Since this image has an explicit 100 pixel height, the 3:4 ratio explicitly sets its width at 75 pixels, so that's how it's rendered in the `auto` case.

#### Source: No fixed dimensions with intrinsic ratio

When an intrinsic ratio is specified, but no dimensions, rule 4 is applied — except that rule 2 also applies. The image is therefore rendered just like for the `contain` case.

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: auto auto;
```

The rendered output looks like this:

![auto-no-dimensions-1x1-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-no-dimensions-1x1-ratio.png)

### Using "auto" and one specific length

Given rule 1, specified dimensions are always used, so we need to use our rules only to determine the second dimension.

#### Source: No dimensions or intrinsic ratio

If the image has no dimensions or intrinsic ratio, rule 4 applies, and we use the background area's dimension to determine the value for the `auto` dimension.

```css
background: url(no-dimensions-or-ratio.svg);
background-size: auto 150px;
```

![1auto-no-dimensions-or-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/1auto-no-dimensions-or-ratio.png)

Here, the width is determined using the background area's width per rule 4, while the height is the 140px specified in the CSS.

#### Source: One specified dimension with no intrinsic ratio

If the image has one specified dimension but no intrinsic ratio, that specified dimension is used per rule 3 if that dimension is set to `auto` in the CSS.

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: 200px auto;
```

![100px-wide-no-height-or-ratio-length-auto.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio-length-auto.png)

Here, the 200px specified in the CSS overrides the 100px width specified in the SVG, per rule 1. Since there's no intrinsic ratio or height provided, `auto` selects the height of the background area as the height for the rendered image.

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto 125px;
```

![100px-wide-no-height-or-ratio-auto-length.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio-auto-length.png)

In this case, the width is specified as auto in the CSS, so the 100px width specified in the SVG is selected, per rule 3. The height is set at 125px in the CSS, so that is selected per rule 1.

#### Source: One specified dimension with intrinsic ratio

When a dimension is specified, rule 1 applies that dimension from the SVG to the rendered background unless specifically overridden by the CSS. When an intrinsic ratio is also specified, that's used to determine the other dimension.

```css
background: url(100px-height-3x4-ratio.svg);
background-size: 150px auto;
```

![1auto-100px-height-3x4-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/1auto-100px-height-3x4-ratio.png)

In this case, we've overridden the height of the image in the CSS to be 150px, so rule 1 is applied. The intrinsic 3:4 aspect ratio then determines the width for the `auto` case.

#### Source: No specified dimensions with intrinsic ratio

If no dimensions are specified in the SVG, the specified dimension in the CSS is applied, then the intrinsic ratio is used to select the other dimension, per rule 2.

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: 150px auto;
```

![1auto-no-dimensions-1x1-ratio.png](/zh-CN/docs/Web/CSS/Scaling_of_SVG_backgrounds/1auto-no-dimensions-1x1-ratio.png)

The width is set by the CSS to 150px. The `auto` value for the height is computed using that width and the 1:1 aspect ratio to be 150px as well, resulting in the image above.

See also
--------

* `background-size`
* Blog post: Properly resizing vector image backgrounds