inset - CSS：层叠样式表

inset
=====

CSS 属性 **`inset`** 为简写属性，对应于 `top`、`right`、`bottom` 和 `left` 属性。其与 `margin` 简写属性具有相同的多值语法。

尝试一下
----

此属性虽然为 *CSS 逻辑属性*规范的一部分，但是无论元素的书写模式、行内方向和文本朝向如何，其所定义的都不是*逻辑*偏移而是*实体*偏移。

语法
--

```css
/\* 长度值 \*/
inset: 10px; /\* 应用于所有边 \*/
inset: 4px 8px; /\* 上下 | 左右 \*/
inset: 5px 15px 10px; /\* 上 | 左右 | 下 \*/
inset: 2.4em 3em 3em 3em; /\* 上 | 右 | 下 | 左 \*/

/\* 包含块的宽度（左或右）或高度（上或下）的百分比 \*/
inset: 10% 5% 5% 5%;

/\* 关键词值 \*/
inset: auto;

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

### 取值

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `top`: `auto`
* `bottom`: `auto`
* `left`: `auto`
* `right`: `auto`
 |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| 计算值 | as each of the properties of the shorthand:* `top`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `bottom`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `left`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `right`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

inset =
  <'top'>{1,4}

```

示例
--

### 为元素设置偏移

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset |

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

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

参见
--

* 盒偏移的全称属性：`top`、`right`、`bottom` 和 `left`
* 对应的逻辑简写属性：`inset-block` 和 `inset-inline`
* `margin` 简写属性的多值语法


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

后代选择器
=====

**后代组合器**（通常用单个空格（" "）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为*后代选择器*。

```css
/\* List items that are descendants of the "my-things" list \*/
ul.my-things li {
  margin: 2em;
}
```

从技术上讲，后代组合器是两个选择器之间的一个或多个 CSS 空格字符——空格字符和/或四个控制字符之一：回车、换页、换行和制表符在没有其他组合器的情况下。此外，组成组合器的空白字符可以包含任意数量的 CSS 注释。

语法
--
```

selector1 selector2 {
  /* property declarations */
}
```

Examples
--------

### CSS

```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML

```html
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>
```

### Result

规范
--

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

相关
--

* Child combinator


::-moz-progress-bar - CSS：层叠样式表

::-moz-progress-bar
===================

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

CSS伪元素 **`::-moz-progress-bar`** 是`<progress>` 元素中，Mozilla 独有的特性（Mozilla extension (en-US)），用于对进度条完成的部分进行选择。

如果你想选择未完成的部分，请直接选择 `<progress>` 。

语法
--

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

### HTML

```html
<progress value="30" max="100">30%</progress>
<progress max="100">Indeterminate</progress>
```

### CSS

```css
::-moz-progress-bar {
  background-color: red;
}

/\* Force indeterminate bars to have zero width \*/
:indeterminate::-moz-progress-bar {
  width: 0;
}
```

### 结果

参见
--

* `<progress>`
* `::-ms-fill`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`


margin-inline - CSS：层叠样式表

margin-inline
=============

CSS 简写属性 **`margin-inline`** 定义了元素的逻辑行首和行末外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。

尝试一下
----

属性构成
----

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

* `margin-inline-start`
* `margin-inline-end`
语法
--

```css
/\* <length> 值 \*/
margin-inline: 10px 20px; /\* 绝对长度 \*/
margin-inline: 1em 2em; /\* 相对于文本尺寸 \*/
margin-inline: 5% 2%; /\* 相对于最近区块容器的宽度 \*/
margin-inline: 10px; /\* 同时设置行首和行末值 \*/

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

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

根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `margin-top` 和 `margin-bottom`，或者 `margin-right` 和 `margin-left` 属性。

`margin-inline` 属性可用一个或两个值指定。

* 用**一个**值指定时，**行首和行末**应用同样的外边距。
* 用**两个**值指定时，第一个外边距应用于**行首**，第二个应用于**行末**。
### 取值

`margin-inline` 属性的取值与 `margin` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `margin-inline-start`: `0`
* `margin-inline-end`: `0`
 |
| 适用元素 | same as `margin` |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 计算值 | as each of the properties of the shorthand:* `margin-inline-start`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `margin-inline-end`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length |

形式语法
----
```

margin-inline =
  <'margin-top'>{1,2}

```

示例
--

### 设置行首和行末外边距

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}
```

#### HTML

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

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-margin-inline |

浏览器规范性
------

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

参见
--

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


<named-color> - CSS：层叠样式表

<named-color>
=============

CSS 数据类型 **`<named-color>`** 为颜色名——如 `red`、`blue`、`black` 或 `lightseagreen`。`<named-color>` 在语法上为 `<ident>` (en-US)。

在可使用 `<color>` 的任意位置均可使用 `<named-color>` 值。

语法
--

```css
color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;
```

### 取值

命名颜色包含标准颜色、`transparent` 和 `currentcolor` 关键字。

#### 标准颜色

基本颜色具有标准、易记的名字：

| 关键字 | RGB 十六进制值 | 样例 |
| --- | --- | --- |
| `black` | `#000000` |  |
| `silver` | `#c0c0c0` |  |
| `gray` | `#808080` |  |
| `white` | `#ffffff` |  |
| `maroon` | `#800000` |  |
| `red` | `#ff0000` |  |
| `purple` | `#800080` |  |
| `fuchsia` | `#ff00ff` |  |
| `green` | `#008000` |  |
| `lime` | `#00ff00` |  |
| `olive` | `#808000` |  |
| `yellow` | `#ffff00` |  |
| `navy` | `#000080` |  |
| `blue` | `#0000ff` |  |
| `teal` | `#008080` |  |
| `aqua` | `#00ffff` |  |

除上述 16 种颜色外，另外约有 150 种颜色有与之关联的关键字：

| 关键字 | RGB 十六进制值 | 样例 |
| --- | --- | --- |
| `aliceblue` | `#f0f8ff` |  |
| `antiquewhite` | `#faebd7` |  |
| `aqua` | `#00ffff` |  |
| `aquamarine` | `#7fffd4` |  |
| `azure` | `#f0ffff` |  |
| `beige` | `#f5f5dc` |  |
| `bisque` | `#ffe4c4` |  |
| `black` | `#000000` |  |
| `blanchedalmond` | `#ffebcd` |  |
| `blue` | `#0000ff` |  |
| `blueviolet` | `#8a2be2` |  |
| `brown` | `#a52a2a` |  |
| `burlywood` | `#deb887` |  |
| `cadetblue` | `#5f9ea0` |  |
| `chartreuse` | `#7fff00` |  |
| `chocolate` | `#d2691e` |  |
| `coral` | `#ff7f50` |  |
| `cornflowerblue` | `#6495ed` |  |
| `cornsilk` | `#fff8dc` |  |
| `crimson` | `#dc143c` |  |
| `cyan` | `#00ffff`（与 `aqua` 同义） |  |
| `darkblue` | `#00008b` |  |
| `darkcyan` | `#008b8b` |  |
| `darkgoldenrod` | `#b8860b` |  |
| `darkgray` | `#a9a9a9` |  |
| `darkgreen` | `#006400` |  |
| `darkgrey` | `#a9a9a9` |  |
| `darkkhaki` | `#bdb76b` |  |
| `darkmagenta` | `#8b008b` |  |
| `darkolivegreen` | `#556b2f` |  |
| `darkorange` | `#ff8c00` |  |
| `darkorchid` | `#9932cc` |  |
| `darkred` | `#8b0000` |  |
| `darksalmon` | `#e9967a` |  |
| `darkseagreen` | `#8fbc8f` |  |
| `darkslateblue` | `#483d8b` |  |
| `darkslategray` | `#2f4f4f` |  |
| `darkslategrey` | `#2f4f4f` |  |
| `darkturquoise` | `#00ced1` |  |
| `darkviolet` | `#9400d3` |  |
| `deeppink` | `#ff1493` |  |
| `deepskyblue` | `#00bfff` |  |
| `dimgray` | `#696969` |  |
| `dimgrey` | `#696969` |  |
| `dodgerblue` | `#1e90ff` |  |
| `firebrick` | `#b22222` |  |
| `floralwhite` | `#fffaf0` |  |
| `forestgreen` | `#228b22` |  |
| `fuchsia` | `#ff00ff` |  |
| `gainsboro` | `#dcdcdc` |  |
| `ghostwhite` | `#f8f8ff` |  |
| `gold` | `#ffd700` |  |
| `goldenrod` | `#daa520` |  |
| `gray` | `#808080` |  |
| `green` | `#008000` |  |
| `greenyellow` | `#adff2f` |  |
| `grey` | `#808080`（与 `gray` 同义） |  |
| `honeydew` | `#f0fff0` |  |
| `hotpink` | `#ff69b4` |  |
| `indianred` | `#cd5c5c` |  |
| `indigo` | `#4b0082` |  |
| `ivory` | `#fffff0` |  |
| `khaki` | `#f0e68c` |  |
| `lavender` | `#e6e6fa` |  |
| `lavenderblush` | `#fff0f5` |  |
| `lawngreen` | `#7cfc00` |  |
| `lemonchiffon` | `#fffacd` |  |
| `lightblue` | `#add8e6` |  |
| `lightcoral` | `#f08080` |  |
| `lightcyan` | `#e0ffff` |  |
| `lightgoldenrodyellow` | `#fafad2` |  |
| `lightgray` | `#d3d3d3` |  |
| `lightgreen` | `#90ee90` |  |
| `lightgrey` | `#d3d3d3` |  |
| `lightpink` | `#ffb6c1` |  |
| `lightsalmon` | `#ffa07a` |  |
| `lightseagreen` | `#20b2aa` |  |
| `lightskyblue` | `#87cefa` |  |
| `lightslategray` | `#778899` |  |
| `lightslategrey` | `#778899` |  |
| `lightsteelblue` | `#b0c4de` |  |
| `lightyellow` | `#ffffe0` |  |
| `lime` | `#00ff00` |  |
| `limegreen` | `#32cd32` |  |
| `linen` | `#faf0e6` |  |
| `magenta` | `#ff00ff`（与 `fuchsia` 同义） |  |
| `maroon` | `#800000` |  |
| `mediumaquamarine` | `#66cdaa` |  |
| `mediumblue` | `#0000cd` |  |
| `mediumorchid` | `#ba55d3` |  |
| `mediumpurple` | `#9370db` |  |
| `mediumseagreen` | `#3cb371` |  |
| `mediumslateblue` | `#7b68ee` |  |
| `mediumspringgreen` | `#00fa9a` |  |
| `mediumturquoise` | `#48d1cc` |  |
| `mediumvioletred` | `#c71585` |  |
| `midnightblue` | `#191970` |  |
| `mintcream` | `#f5fffa` |  |
| `mistyrose` | `#ffe4e1` |  |
| `moccasin` | `#ffe4b5` |  |
| `navajowhite` | `#ffdead` |  |
| `navy` | `#000080` |  |
| `oldlace` | `#fdf5e6` |  |
| `olive` | `#808000` |  |
| `olivedrab` | `#6b8e23` |  |
| `orange` | `#ffa500` |  |
| `orangered` | `#ff4500` |  |
| `orchid` | `#da70d6` |  |
| `palegoldenrod` | `#eee8aa` |  |
| `palegreen` | `#98fb98` |  |
| `paleturquoise` | `#afeeee` |  |
| `palevioletred` | `#db7093` |  |
| `papayawhip` | `#ffefd5` |  |
| `peachpuff` | `#ffdab9` |  |
| `peru` | `#cd853f` |  |
| `pink` | `#ffc0cb` |  |
| `plum` | `#dda0dd` |  |
| `powderblue` | `#b0e0e6` |  |
| `purple` | `#800080` |  |
| `rebeccapurple` | `#663399` |  |
| `red` | `#ff0000` |  |
| `rosybrown` | `#bc8f8f` |  |
| `royalblue` | `#4169e1` |  |
| `saddlebrown` | `#8b4513` |  |
| `salmon` | `#fa8072` |  |
| `sandybrown` | `#f4a460` |  |
| `seagreen` | `#2e8b57` |  |
| `seashell` | `#fff5ee` |  |
| `sienna` | `#a0522d` |  |
| `silver` | `#c0c0c0` |  |
| `skyblue` | `#87ceeb` |  |
| `slateblue` | `#6a5acd` |  |
| `slategray` | `#708090` |  |
| `slategrey` | `#708090` |  |
| `snow` | `#fffafa` |  |
| `springgreen` | `#00ff7f` |  |
| `steelblue` | `#4682b4` |  |
| `tan` | `#d2b48c` |  |
| `teal` | `#008080` |  |
| `thistle` | `#d8bfd8` |  |
| `tomato` | `#ff6347` |  |
| `transparent` | 见 transparent。 |  |
| `turquoise` | `#40e0d0` |  |
| `violet` | `#ee82ee` |  |
| `wheat` | `#f5deb3` |  |
| `white` | `#ffffff` |  |
| `whitesmoke` | `#f5f5f5` |  |
| `yellow` | `#ffff00` |  |
| `yellowgreen` | `#9acd32` |  |
|

起初在 CSS 第 1 级中仅定义了 16 种基本颜色，在 CSS 第 2 级中添加了 `orange`。Web 设计师认为这些颜色太少，于是浏览器厂商根据 X11 颜色名为颜色添加了大量名字。这些名字先后在 SVG 1.0 和 CSS 颜色第 3 级中获得标准化、正式定义和一致性（某些名字的不同拼写现为别名）。这些名字称为*扩展性颜色关键字*、*X11 颜色*或 *SVG 颜色*。

为纪念 web 先驱 Eric Meyer，在 CSS 颜色第 4 级中添加了又一种颜色 `rebeccapurple`。

### transparent

`transparent` 关键字表示完全透明的颜色。此颜色的元素后的背景完全可见。技术上，`transparent` 为 `rgba(0,0,0,0)` 的缩写。

为防止意外行为（如在 `<gradient>` 中），目前的 CSS 规范称应在预乘 alpha 颜色空间中计算 `transparent`。然而注意旧浏览器可能将其视为 alpha 值为 `0` 的黑色。

`transparent` 关键字在 CSS 第 2 级（修订 1）中并非真正的颜色，而是可在两个 CSS 属性——`background` 和 `border`——上代替常规 `<color>` 值使用的特殊关键字。添加此关键字主要是为了允许开发者覆盖继承的纯色。随着 alpha 通道在 CSS 颜色第 3 级中的到来，`transparent` 被重定义为真正的颜色。现在在可使用 `<color>` 值的任意位置均可使用此关键字。

描述
--

所有名字均在 sRGB 颜色空间中指定了一种颜色。虽然这些名字或多或少描述了其各自的颜色，但是这些名字基本上为生造的，用词背后并无严谨的道理。

颜色关键字均表示无透明度的、纯粹的、实在的颜色。

有若干关键字互为别名：

* `aqua` / `cyan`
* `fuchsia` / `magenta`
* `darkgray` / `darkgrey`
* `darkslategray` / `darkslategrey`
* `dimgray` / `dimgrey`
* `lightgray` / `lightgrey`
* `lightslategray` / `lightslategrey`
* `gray` / `grey`
* `slategray` / `slategrey`

尽管很多关键字改自 X11，其 RGB 值可能与 X11 系统上对应的颜色不同，这是因为制造商有时为其特定硬件修改 X11 颜色。

示例
--

### 使用命名颜色

#### HTML

```html
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
```

#### CSS

```css
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # named-colors |

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

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

参见
--

* `<color>`——`<named-color>` 为此数据类型定义的构成部分


margin-top - CSS：层叠样式表

margin-top
==========

**`margin-top`** CSS 属性用于设置元素的顶部外边距外边距区域。正值使它离相邻元素更远，而负值使它更靠近相邻元素。

尝试一下
----

此属性对于*不**可替换*的内联元素没有效果，比如 `<span>` 或 `<code>`。

语法
--

```css
/\* <length> 值 \*/
margin-top: 10px; /\* 绝对长度 \*/
margin-top: 1em; /\* 相对与文本的大小 \*/
margin-top: 5%; /\* 相对于最近的块容器的宽度 \*/

/\* 关键字值 \*/
margin-top: auto;

/\* 全局关键字值 \*/
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;
```

`margin-top` 属性可以用关键字 `auto`、`<length>` 或 `<percentage>` 来设置。其值可以是正值、负值或零。

### 值

`<length>`

设置固定边距大小。

`<percentage>`

相对于包含块的内联尺寸（对于竖排语言则是*宽度*，这由 `writing-mode` 定义）的百分比边距大小。

`auto`

浏览器选择一个合适的值来使用。参见 `margin`。

### 形式语法
```

margin-top =
  <length-percentage>  |
  auto

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

```

示例
--

### 将上边距设置为正值和负值

```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}
```

规范
--

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

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

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

参见
--

* `margin-right`、`margin-bottom`、`margin-left`，以及 `margin` 简写属性
* 映射的逻辑属性：`margin-block-start`、`margin-block-end`、`margin-inline-start`、`margin-inline-end`，以及 `margin-block` 和 `margin-inline` 简写属性


-webkit-text-stroke - CSS：层叠样式表

-webkit-text-stroke
===================

CSS 属性 **`-webkit-text-stroke`** 指定了文本字符的笔触宽度和笔触颜色。此属性为全称属性 `-webkit-text-stroke-width` 和 `-webkit-text-stroke-color` 的简写属性。

```css
/\* 宽度和颜色值 \*/
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

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

属性构成
----

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

* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
语法
--

### 取值

`<length>`

笔触宽度。

`<color>`

笔触颜色。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: `0`
* `-webkit-text-stroke-color`: `currentcolor`
 |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: absolute `length`
* `-webkit-text-stroke-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: discrete
* `-webkit-text-stroke-color`: a color
 |

形式语法
----
```

-webkit-text-stroke =
  <line-width>  ||
  <color>

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

```

示例
--

### 添加红色文本笔触

#### HTML

```html
<p id="example">此文本的笔触为红色的。</p>
```

#### CSS

```css
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke |

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

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

参见
--

* Surfin 的 Safari 博客文章宣布了此特性
* 解释该特性的 CSS-Tricks 文章
* `-webkit-text-stroke-width`
* `-webkit-text-stroke-color`
* `-webkit-text-fill-color`


contain-intrinsic-block-size - CSS：层叠样式表

contain-intrinsic-block-size
============================

CSS 逻辑属性 **`contain-intrinsic-block-size`** 定义了元素受尺寸局限时浏览器用于布局的元素块向尺寸。

块向尺寸为元素在垂直于行内文本流的方向上的尺寸。在如标准英文等横向书写模式（`writing-mode`）中，块向尺寸为纵向尺度（高度）；在纵向书写模式中，块向尺寸为横向尺度。

语法
--

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

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

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

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

### 取值

元素的固有块向尺寸可指定为下列值：

`none`

元素无固有块向尺寸。

`<length>`

元素具有指定的块向尺寸，以 `<length>` 数据类型表示。

`auto <length>`

当元素在尺寸局限中且正在跳过其内容（例如元素在屏外且设置了 `content-visibility: auto`）时，块向尺寸为记忆值——即元素在上次渲染其子元素时的实际尺寸。若元素从未渲染其子元素导致无正常渲染时的元素尺寸的记忆值，或者元素未在跳过其内容，块向尺寸为指定的 `<length>`。

描述
--

此属性的应用常常伴随如 `contain: size` 和 `content-visibility` 等可触发尺寸局限的要素。

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

`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-block-size =
  auto? [ none | <length> ]

```

示例
--

### 设置固有块向尺寸

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

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

下列 CSS 代码将 `contained_element` 的 `content-visibility` 设置为 `auto`，故若元素被隐藏则将受尺寸限制。此元素受尺寸限制时所用的固有块向和行向尺寸分别使用 `contain-intrinsic-block-size` 和 `contain-intrinsic-inline-size` 同时设置。

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

规范
--

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

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

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

参见
--

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


visibility - CSS：层叠样式表

visibility
==========

**`visibility`** CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 `<table>` 中的行或列。

尝试一下
----

要隐藏*并从文档布局中移除*元素，请将 `display` 属性设置为 `none` 来代替 `visibility` 属性。

### 语法

```css
/\* 关键字值 \*/
visibility: visible;
visibility: hidden;
visibility: collapse;

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

`visibility` 属性可被指定为以下值：

### 值

`visible`

元素框可见。

`hidden`

元素框不可见（不绘制），但仍然影响常规的布局。如果将其子元素的 `visibility` 设置为 `visible`，则该子元素依然可见。元素无法获得焦点（例如通过 tab 索引进行键盘导航）。

`collapse`

`collapse` 关键字对于不同的元素有不同的效果：

* 用于 `<table>` 行、列、列组和行组，将隐藏表格的行或列，并且不占用任何空间（与将 ``display`: none` 用于表格的行/列上的效果相当）。但是，计算其他行和列的大小时，仍会像显示折叠行或列中的单元格一样进行计算。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。
* 折叠的弹性元素和 ruby 元素会被隐藏，它们本来将要占用的空间会被移除。
* 对于其他元素，`collapse` 被视为与 `hidden` 相同。

无障碍考虑
-----

将元素的 `visibility` 的值设置为 `hidden` 会将其从可访问性树中移除。这将导致元素及其所有子元素不再被屏幕阅读器所读取。

插值
--

在设置动画时，会对 visibility 在*可见*和*不可见*之间插值。因此起始值或结束值之一必须是 `visible`，否则不会发生插值 (en-US)。该值会以离散的步长进行插值，计时函数的值介于 `0` 到 `1` 之间，会被映射到 `visible`，对于其他计时函数的值（即过渡开始/结束时或 `cubic-bezier()` 函数结果的 y 值在 [0, 1] 的范围之外）则映射到较为接近的一个端点。

备注
--

有些现代浏览器对 `visibility: collapse` 不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成 `visibility: hidden` 的效果。

`visibility:collapse` 会改变表格的布局，嵌套在其被折叠的单元格中的表格也会同样被折叠，除非专门为此嵌套表格指定 `visibility: visible`。

形式定义
----

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

形式语法
----
```

visibility =
  visible   |
  hidden    |
  collapse

```

示例
--

### 基础示例

#### HTML

```html
<p class="visible">第一段是可见的。</p>
<p class="not-visible">第二段是不可见的。</p>
<p class="visible">第三段是可见的。注意第二段仍占用空间。</p>
```

#### CSS

```css
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}
```

### 表格示例

#### HTML

```html
<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
```

#### CSS

```css
.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}
```

### 规范

| Specification |
| --- |
| CSS Display Module Level 3 # visibility |

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

`display`参见
--

* `display`


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

border-top-style
================

**`border-top-style`** CSS 设置元素上边框的 `border`.

尝试一下
----

**备注：** 此规范并未定义不同样式的边框边角处如何连接。

语法
--

```css
/\* Keyword values \*/
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

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

选取以上可用关键字之一作为 `border-style` 的 **border-top-style** 属性的值。

### 形式语法
```

border-top-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-top-style example classes \*/
.b1 {
  border-top-style: none;
}
.b2 {
  border-top-style: hidden;
}
.b3 {
  border-top-style: dotted;
}
.b4 {
  border-top-style: dashed;
}
.b5 {
  border-top-style: solid;
}
.b6 {
  border-top-style: double;
}
.b7 {
  border-top-style: groove;
}
.b8 {
  border-top-style: ridge;
}
.b9 {
  border-top-style: inset;
}
.b10 {
  border-top-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.

参见
--

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


:-moz-broken - CSS：层叠样式表

:-moz-broken
============

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

**`:-moz-broken`** CSS 伪类是一个 Mozilla 扩展 (en-US)，用于匹配表示损坏图像链接的元素。

**备注：** 这个选择器主要是为主题开发人员设计。

语法
--

```css
:-moz-broken {
  /\* ... \*/
}
```

示例
--

### HTML

```html
<img src="broken.jpg" alt="这个图像损坏了 :-(" />
```

### CSS

```css
:-moz-broken {
  background: bisque;
  padding: 8px;
}
```

### 结果

规范
--

不属于任何标准。

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

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

参见
--

* `:-moz-loading` (en-US)、`:-moz-suppressed` (en-US)、`:-moz-user-disabled` (en-US)
* Firefox bug 11011


word-break - CSS：层叠样式表

word-break
==========

CSS 属性 `word-break` 指定了怎样在单词内断行。

尝试一下
----

语法
--
```

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */

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

### 值

`normal`

使用默认的断行规则。

`break-all`

对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

`keep-all`

CJK 文本不断行。Non-CJK 文本表现同 `normal`。

`break-word`
已弃用

他的效果是`word-break: normal` 和 `overflow-wrap: anywhere` 的合，不论 `overflow-wrap`的值是多少。

**备注：** 与 `word-break: break-word` 和 `overflow-wrap: break-word`（详见 `overflow-wrap`）对比，`word-break: break-word` 将在文本可能溢出其容器的确切位置创建一个断点。

形式定义
----

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

形式语法
----
```

word-break =
  normal      |
  keep-all    |
  break-all   |
  break-word

```

示例
--

### HTML

```html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
```

### CSS

```css
.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}
```

规范
--

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

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

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

参见
--

* `overflow-wrap`


CSS Masking - CSS：层叠样式表

CSS Masking
===========

**CSS Masking** 是一个 CSS 模块，它定义了部分或完全隐藏视觉元素部分的方法，包括遮罩和剪裁。

Reference
---------

### Properties

* `clip`
已弃用
* `clip-path`
* `clip-rule`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset` (en-US)
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source` (en-US)
* `mask-border-width`
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image`
* `mask-mode`
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat`
* `mask-size` (en-US)
* `mask-type` (en-US)
Guides
------

*None.*

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

| Specification |
| --- |
| CSS Masking Module Level 1  |


float - CSS：层叠样式表

float
=====

`float` CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。

尝试一下
----

**浮动元素**是 `float` 的计算值非 `none` 的元素。

由于 `float` 意味着使用块布局，它在某些情况下会修改 `display` 值的计算值：

| 指定值 | 计算值 |
| --- | --- |
| `inline` | `block` |
| `inline-block` | `block` |
| `inline-table` | `table` |
| `table-row` | `block` |
| `table-row-group` | `block` |
| `table-column` | `block` |
| `table-column-group` | `block` |
| `table-cell` | `block` |
| `table-caption` | `block` |
| `table-header-group` | `block` |
| `table-footer-group` | `block` |
| `inline-flex` | `flex` |
| `inline-grid` | `grid` |
| *other* | *unchanged* |

**备注：** 如果要在 JavaScript 中把 `float` 属性当作 `HTMLElement.style` 对象的一个成员来操作，那么在旧版本的浏览器中，你必须拼写成 `cssFloat`。另外还要注意到在 Internet Explorer 8 和更老的 IE 当中，要使用 `styleFloat` 属性。这是 DOM 驼峰命名和 CSS 所用的连字符分隔命名法对应关系中的一个特例（这是因为在 JavaScript 中“float”是一个保留字，因为同样的原因，“class”被改成了“className” 、`<label>` 的“for”被改成了“htmlFor”）。

语法
--

```css
/\* Keyword values \*/
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/\* Global values \*/
float: inherit;
float: initial;
float: revert;
float: unset;
```

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

### 值

`left`

表明元素必须浮动在其所在的块容器左侧的关键字。

`right`

表明元素必须浮动在其所在的块容器右侧的关键字。

`none`

表明元素不进行浮动的关键字。

`inline-start`

关键字，表明元素必须浮动在其所在块容器的开始一侧，在 `ltr` 脚本中是左侧，在 `rtl` 脚本中是右侧。

`inline-end`

关键字，表明元素必须浮动在其所在块容器的结束一侧，在 `ltr` 脚本中是右侧，在 `rtl` 脚本中是左侧。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements, but has no effect if the value of `display` is `none`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

float =
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote

<snap-block()> =
  snap-block( <length> , [ start | end | near ]? )

<snap-inline()> =
  snap-inline( <length> , [ left | right | near ]? )

```

示例
--

### 浮动元素是如何定位的

正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到**另外一个浮动的元素**。

在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。

浮动元素至少要与其最高的嵌套浮动子元素一样高。我们给父元素设置了 `width: 100%`，并将其设为浮动元素，以确保其高度足够包含其中的浮动子元素，并确保其宽度足以容纳这些元素，我们不必与其相邻的元素。

#### HTML

```html
<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique
    sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id
    iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa
    aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus
    congue.
  </p>
</section>
```

#### CSS

```css
section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}
```

#### 结果

### 清除浮动

有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。请参考 `clear` 中的示例。

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float |
| CSS Logical Properties and Values Level 1 # float-clear |

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

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

参见
--

* 块级格式化上下文（Block formatting context）
* 使用 `clear` 强制元素移至浮动元素下方。


overflow-x - CSS：层叠样式表

overflow-x
==========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS 属性 **`overflow-x`** 设置当内容溢出块级元素的左右两侧时所显示的内容。可以不显示，或显示滚动条，或显示溢出内容。也可以使用 `overflow` 简写属性来设置该属性。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

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

`overflow-x` 属性可指定为下列 `<overflow>` (en-US) 关键字值之一。

当 `overflow-y` 的值为 `hidden`、`scroll` 或者 `auto`，而 `overflow-x` 属性的值为 `visible`（默认值）时，该值会被隐式地计算为 `auto`。

### 取值

`visible`

溢出的内容不会被截断，且可以显示在元素边距（padding）框的左右边缘之外。元素盒子不是滚动容器。

`hidden`

如有必要，溢出的内容会被截断以从水平方向适应元素的边距框，不会显示滚动条。

`clip`

在*溢出截断边缘*（使用 `overflow-clip-margin` (en-US) 属性定义）上的溢出内容会被截断。即，距元素内边距框指定宽度（为 `overflow-clip-margin` 的 `<length>` 值，若未设置则为 `0px`）范围内的内容会溢出。`clip` 和 `hidden` 的区别是 `clip` 关键字还禁止所有滚动，包括程序性滚动（programmatic scrolling）。其不会创建新的格式化上下文。如果要创建新的格式化上下文，请将 `overflow: clip` 与 `display: flow-root` 一起使用。元素盒子不是滚动容器。

`scroll`

如有必要，溢出的内容会被截断以从水平方向适应元素的边距框。无论内容是否发生溢出，浏览器总是显示滚动条。（这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。）而打印机可能会打印溢出的内容。

`auto`

元素边距框中的溢出内容会被截断，且溢出内容可通过滚动以进行浏览。与 `scroll` 关键字值不同的是，用户代理*只在*内容溢出时显示滚动条，默认不会显示滚动条。如果内容可以适应元素的边距框，则看起来与 `visible` 相同，但仍然会创建新的区块格式化上下文。桌面浏览器会在内容溢出时显示滚动条。

**备注：** 关键字值 `overlay` 是 `auto` 的一个遗留别名。使用 `overlay` 时，滚动条会绘制在内容上方，而不占用空间。

形式定义
----

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

形式语法
----
```

overflow-x =
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

```

示例
--

### HTML

```html
<ul>
  <li>
    <code>overflow-block:hidden</code>——在盒外隐藏文本
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-block:scroll</code>——总是添加滚动条
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:visible</code>——必要时在盒外显示文本
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:auto</code>——在多数浏览器上等价于 <code>scroll</code>
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>
```

### CSS

```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-x: hidden;
}
#div2 {
  overflow-x: scroll;
}
#div3 {
  overflow-x: visible;
}
#div4 {
  overflow-x: auto;
}
```

### 结果

规范
--

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

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

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

参见
--

* `clip`、`display`、`text-overflow`、`white-space`
* CSS 溢出 (en-US)模块
* CSS 构建：溢出的内容


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

contain-intrinsic-size
======================

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

属性构成
----

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

* `contain-intrinsic-width`
* `contain-intrinsic-height`
语法
--

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

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

/\* 宽度 | 高度 \*/
contain-intrinsic-size: 1000px 1.5em;

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

/\* auto 宽度 | auto 高度 \*/
contain-intrinsic-size: auto 300px auto 4rem;

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

### 取值

可为元素指定下列值中的一个或两个。若指定两值，则第一个值应用于宽度，第二个应用于高度。若指定一值，则同时应用于宽度和高度。

`none`

元素在所给方向上无固有尺寸。

`<length>`

元素在所给方向上具有指定尺寸（`<length>`）。

`auto <length>`

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

描述
--

此属性的应用常常伴随如 `contain: size` 和 `content-visibility` 等可触发尺寸局限的要素。

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

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `contain-intrinsic-width`: `none`
* `contain-intrinsic-height`: `none`
 |
| 适用元素 | elements for which size containment can apply |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `contain-intrinsic-width`: 否
* `contain-intrinsic-height`: 否
 |
| 计算值 | as each of the properties of the shorthand:* `contain-intrinsic-width`: as specified, with <length>s values computed
* `contain-intrinsic-height`: as specified, with <length>s values computed
 |
| Animation type | as each of the properties of the shorthand:* `contain-intrinsic-width`: by computed value type
* `contain-intrinsic-height`: by computed value type
 |

形式语法
----
```

contain-intrinsic-size =
  [ auto? [ none | <length> ] ]{1,2}

```

示例
--

### 设置固有尺寸

此示例提供了可用于修改元素的 `contain-intrinsic-size`、`content-visibility` 和 `contain` 的选项列表，以此观察不同设置的效果。

#### CSS

```css
#contained\_element {
  border: 2px solid green;
  width: 120px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}
```

#### JavaScript

下列代码根据所选选项在包含元素上添加或移除样式。

```js
const containedElement = document.querySelector("#contained\_element");
const intrinsicSizeSelector = document.querySelector(
  "#contain\_intrinsic\_size\_selector",
);
const containSelector = document.querySelector("#contain\_selector");
const contentVisibilitySelector = document.querySelector(
  "#content\_visibility\_selector",
);

containedElement.style["contain-intrinsic-size"] =
  intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
containedElement.style["contain"] =
  containSelector.options[containSelector.selectedIndex].text;
containedElement.style["content-visibility"] =
  contentVisibilitySelector.options[
    contentVisibilitySelector.selectedIndex
  ].text;

intrinsicSizeSelector.addEventListener("change", () => {
  containedElement.style["contain-intrinsic-size"] =
    intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
});

containSelector.addEventListener("change", () => {
  containedElement.style["contain"] =
    containSelector.options[containSelector.selectedIndex].text;
});

contentVisibilitySelector.addEventListener("change", () => {
  containedElement.style["content-visibility"] =
    contentVisibilitySelector.options[
      contentVisibilitySelector.selectedIndex
    ].text;
});
```

#### HTML

此 HTML 代码定义了两个按钮和一个通过 `content-visibility` 属性受局限的包含元素。

```html
<p>
  <label for="contain\_intrinsic\_size\_selector">contain-intrinsic-size:</label>
  <select id="contain\_intrinsic\_size\_selector">
    <option>none</option>
    <option>40px 130px</option>
    <option>auto 40px auto 130px</option></select
 >;<br />

  <label for="contain\_selector">contain:</label>
  <select id="contain\_selector">
    <option>none</option>
    <option>size</option>
    <option>strict</option></select
 >;<br />

  <label for="content\_visibility\_selector">content-visibility:</label>
  <select id="content\_visibility\_selector">
    <option>visible</option>
    <option>auto</option>
    <option>hidden</option></select
 >;
</p>

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

#### 结果

使用选项将所给样式应用于包含元素 `div`。注意到当 `content-visibility` 为 `visible` 或 `auto` 时，改变 `contain-intrinsic-size` 不会产生区别。然而若内容被隐藏，`none` 值的 `contain-intrinsic-size` 使子元素被视为无尺寸且使父元素被折叠。

规范
--

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

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

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

参见
--

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


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

scroll-padding-right
====================

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

尝试一下
----

语法
--

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

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

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

### 取值

`<length-percentage>`

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

`auto`

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

形式定义
----

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

形式语法
----
```

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

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

```

规范
--

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

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

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

参见
--

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


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

border-image-source
===================

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

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

* Learn more
* See full compatibility
* Report feedback
CSS 属性 **`border-image-source`** 用于声明元素的边框图片（border-image）的资源

尝试一下
----

属性 `border-image-slice` 被用于切割资源图片的区域，然后将其动态的应用到最终的边框图片

Syntax
------

```css
/\* no border-image, use the specified border-style \*/
border-image-source: none;

/\* the image.jpg is used as image \*/
border-image-source: url(image.jpg);

/\* a gradient is used as image \*/
border-image-source: linear-gradient(to top, red, yellow);

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

### Values

`none`

不会使用图片边框。会被`border-style`属性所设置的边框样式替换掉

`<image>`

用作边框的图片

### Formal syntax
```

border-image-source =
  none     |
  <image>

<image> =
  <url>       |
  <gradient>

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

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

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

```

Examples
--------

请查看示例 `border-image`。

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

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

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | `none` or the image with its URI made absolute |
| Animation type | discrete |

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

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


isolation - CSS：层叠样式表

isolation
=========

概述
--

`isolation` CSS 属性定义该元素是否必须创建一个新的层叠上下文（stacking context (en-US)）。

该属性的主要作用是当和`background-blend-mode`属性一起使用时，可以只混合一个指定元素栈的背景：它允许使一组元素从它们后面的背景中独立出来，只混合这组元素的背景。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

语法
--
```

Formal syntax:
```
isolation =
  <isolation-mode>

<isolation-mode> =
  auto     |
  isolate

```

```
```

isolation: auto;
isolation: isolate;

isolation: initial;
isolation: inherit;
isolation: unset;
```

### 值

`auto`

该关键字定义只有在该元素的属性需要的时候才会创建一个新的元素栈环境。

`isolate`

该关键字定义一个新的元素栈环境会被创建。

示例
--

```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```

```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

规范
--

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

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

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

参见
--

* `<blend-mode>`
* `mix-blend-mode`, `background-blend-mode`


CSS Tutorials - CSS：层叠样式表

CSS Tutorials
=============

学习 CSS 可能是一项令人望而生畏的事情。我们编写了很多的 css 教程来帮助你。有些教程完全面向新手，而其他文章展现了一些 css 的复杂特性，适合拥有丰富经验的开发者。

这个页面展现了这些文章，并且带有简短的描述。这些文章按照难度分组，因此你可以选择最适合你的。

CSS 初级教程
--------

开始使用 (en-US)

这篇教程完全面向新手。假如你还没写过一行 css-这篇很适合你。这篇文章介绍了 css 的一些基础概念，引导你书写基本的 css。

使用丰富多彩的背景 (en-US)

背景是优美样式的基础。css 允许你对每个容器设置不同的背景。这篇教程会讲述 css 与背景之间是如何相互影响，以及你如何得到想要的结果。

调整背景图片 (en-US)

CSS 允许你改变元素背景图片的大小。这篇教程告诉你如何去实现。

Media Queries (en-US)媒体查询

当前存在各种不同尺寸的屏幕，不同种类的设备。当你要求你的页面在各大平台都获得一个满意的渲染效果时，媒体查询将是一块基石。

弄清楚 z-index

控制容器叠加层级是 web 开发者的一个基本需求。了解 css 的一些基础知识，z-index 将会变得小菜一碟。

CSS 中级教程
--------

CSS 2 (Level 1) 标准放出后，CSS 增加了很多新特性。有些特性比较独立，而且很酷，你只需要对 css 的基本概念有一些直观的了解就可以使用它们。

CSS Counters (en-US)

对元素及页面计数对于 CSS 来讲是一项简单的事情。学习使用`counter-reset`, `counter-increment`, `counters()`, 及`counter()`.

CSS Animations (en-US)

CSS3 动画允许你通过 keyframes (en-US)定义样式，之后在 keyframes 之间变换，来形成一个动画。

CSS Transitions

CSS3 过渡可以以动画的形式来定义很多样式的过渡，也可以控制过渡的方式

CSS Transforms

变换可以通过坐标改变元素的位置，可以使用位移，旋转等定义元素在 2D 或 3D 空间的状态。

CSS Gradients (en-US)

渐变其实是图片，可以让一个颜色柔和的过渡到另一个颜色。CSS 中有很多渐变方式：线性渐变或者径向渐变等。这篇教程会讲解怎么使用渐变。

CSS 高级教程
--------

CSS 也拥有一些特性来帮助你创建复杂的布局。虽然这特性可以使你用最简单的方式来达到布局效果，但对于那些没有太多经验的人来说，这些特性相当复杂。

CSS Multi-column layouts (en-US)

CSS3 引入了新的布局方式，可以让你简单的在元素中创建多列布局。尽管多列布局在很多设备上不常见，但多列布局在可打印页面或索引页中很有用。

CSS Flexible boxes layouts (en-US)

这个崭新的布局方式可以让容器变得灵活，使容器平滑的改变大小，对于复杂的界面来讲这是有力的工具。


优先级 - CSS：层叠样式表

优先级
===

浏览器通过**优先级**来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

优先级是如何计算的？
----------

优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

**备注：** 文档树中元素的接近度对优先级没有影响。

### 选择器类型

下面列表中，选择器类型的优先级是递增的：

1. 类型选择器（例如，`h1`）和伪元素（例如，`::before`）
2. 类选择器（例如，`.example`），属性选择器（例如，`[type="radio"]`）和伪类（例如，`:hover`）
3. ID 选择器（例如，`#example`）。

**通配选择器**（universal selector）（`*`）**关系选择器**（combinator）（`+`、`>`、`~`、" "、`||`）和 **否定伪类**（negation pseudo-class）（`:not()`）对优先级没有影响。（但是，在 `:not()` 内部声明的选择器会影响优先级）。

你可以访问层叠与继承中的“优先级”或者 https://specifishity.com 来了解更多关于优先级的详细信息。

给元素添加的**内联样式**（例如，`style="font-weight:bold"`）总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。

### `!important` 例外规则

当在一个样式声明中使用一个 `!important` 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，`!important` 与优先级无关，但它与最终的结果直接相关。使用 `!important` 是一个**坏习惯**，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 `!important` 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

**一些经验法则：**

* **一定**要优先考虑使用样式规则的优先级来解决问题而不是 `!important`
* **只有**在需要覆盖全站或外部 CSS 的特定页面中使用 `!important`
* **永远不要**在你的插件中使用 `!important`
* **永远不要**在全站范围的 CSS 代码中使用 `!important`
* **与其使用** **`!important`**，你可以：

1. 更好地利用 CSS 级联属性
2. 使用更具体的规则。在你选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。

```html
<div id="test">
  <span>Text</span>
</div>
```

```css
div#test span {
  color: green;
}
div span {
  color: blue;
}
span {
  color: red;
}
```

无论 css 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则）
3. 对于（2）的一种特殊情况，当你无其他要指定的内容时，请复制简单的选择器以增加特异性。

```css
#myId#myId span {
  color: yellow;
}
.myClass.myClass span {
  color: orange;
}
```

#### 什么的情况下可以使用 `!important`：

##### A) 覆盖内联样式

你的网站上有一个设定了全站样式的 CSS 文件，同时你（或是你同事）写了一些很差的内联样式。

全局的 CSS 文件会在全局范围内设置网站的外观，而直接在各个元素上定义的内联样式可能会覆盖你的全局 CSS 文件。内联样式和 !important 都被认为是非常不好的做法，但是有时你可以在 CSS 文件里用 !important 去覆盖内联样式。

在这种情况下，你就可以在你全局的 CSS 文件中写一些 `!important` 的样式来覆盖掉那些直接写在元素上的行内样式。

```html
<div class="foo" style="color: red;">What color am I?</div>
```

```css
.foo[style\*="color: red"] {
  color: firebrick !important;
}
```

许多 JavaScript 框架和库都添加了内联样式。有时候可以用`!important`与优先级高的选择器一起使用，以重写覆盖这些内联样式。

##### B) 覆盖优先级高的选择器

```css
#someElement p {
  color: blue;
}

p.awesome {
  color: red;
}
```

在外层有 `#someElement` 的情况下，你怎样能使 `awesome` 的段落变成红色呢？这种情况下，如果不使用 `!important`，第一条规则永远比第二条的优先级更高

#### 怎样覆盖 `!important`

A) 很简单，只需再添加一条 带 `!important` 的 CSS 规则，再给这个给选择器更高的优先级（添加一个标签，ID 或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则必胜）。

一些拥有更高优先级的例子：

```css
table td {
  height: 50px !important;
}
.myTable td {
  height: 50px !important;
}
#myTable td {
  height: 50px !important;
}
```

B) 或者使用相同的选择器，但是置于已有的样式之后：

```css
td {
  height: 50px !important;
}
```

C) 或干脆改写原来的规则，以避免使用 `!important`。

```css
[id="someElement"] p {
  color: blue;
}

p.awesome {
  color: red;
}
```

将 id 作为属性选择器的一部分而不是 id 选择器，将使其具有与类相同的特异性。上面的两个选择器现在具有相同的权重。在优先级相同情况下，后面定义的 CSS 样式会被应用。

#### 若想了解更多信息，请参考：

* https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
* https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean
* https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
* https://stackoverflow.com/questions/11178673/how-to-override-important
* https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css
### `:is()` 和 `:not()` 例外规则

The matches-any pseudo-class `:is()`
实验性
 and the negation pseudo-class `:not()` are *not* considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of selector types.

`:not` 否定伪类在优先级计算中不会被看作是伪类。事实上，在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数。

有如下 CSS 样式声明：

```css
div.outer p {
  color: orange;
}

div:not(.outer) p {
  color: blueviolet;
}
```

将其应用于以下的 HTML 时：

```html
<div class="outer">
  <p>This is in the outer div.</p>
  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>
</div>
```

会在屏幕上出现以下结果：

### `:where()` 例外规则

优先级调整伪类 `:where()` 总是会将其优先级替换为零（`0-0-0`）。它使 CSS 选择器能够非常具体地确定目标元素，而不会提升优先级。

有如下 CSS 样式声明：

```css
div:where(.outer) p {
  color: orange;
}

div p {
  color: blueviolet;
}
```

```
#no-where-support {
  margin: 0.5em;
  border: 1px solid red;
}

#no-where-support:where(\*) {
  display: none !important;
}
```

将其应用于以下的 HTML 时：
```

<div id="no-where-support">
  ⚠ Your browser doesn't support the
  <code
 ><a href="https://developer.mozilla.org/docs/Web/CSS/:where"
 >:where()</a
 ></code
 >
  pseudo-class.
</div>
```

```html
<div class="outer">
  <p>This is in the outer div.</p>
  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>
</div>
```

会在屏幕上出现以下结果：

### 基于形式的优先级（Form-based specificity）

优先级是基于选择器的形式进行计算的。在下面的例子中，尽管选择器 `*[id="foo"]` 选择了一个 ID，但是它还是作为一个**属性选择器**来计算自身的优先级。

有如下样式声明：

```css
\*#foo {
  color: green;
}

\*[id="foo"] {
  color: purple;
}
```

将其应用在下面的 HTML 中：

```html
<p id="foo">I am a sample text.</p>
```

最终会出现下面的效果：

虽然匹配了相同的元素，但是 **ID 选择器**拥有更高的优先级。所以第一条样式声明生效。

### 无视 DOM 树中的距离

有如下样式声明：

```css
body h1 {
  color: green;
}

html h1 {
  color: purple;
}
```

当它应用在下面的 HTML 时：

```html
<html>
  <body>
    <h1>Here is a title!</h1>
  </body>
</html>
```

浏览器会将它渲染成：

### 直接添加样式 vs. 继承样式

为目标元素直接添加样式，永远比继承样式的优先级高，无视优先级的遗传规则。

```css
#parent {
  color: green;
}

h1 {
  color: purple;
}
```

当它应用在下面的 HTML 时：

```html
<html>
  <body id="parent">
    <h1>Here is a title!</h1>
  </body>
</html>
```

浏览器会将它渲染成：

因为 `h1` 选择器明确的定位到了元素，但绿色选择器的仅仅继承自其父级。

规范
--

| Specification |
| --- |
| Selectors Level 4 # specificity-rules |

参见
--

* Specificity Calculator: An interactive website to test and understand your own CSS rules - https://specificity.keegan.st/
* CSS3 选择器优先级 - http://www.w3.org/TR/selectors/#specificity
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素


filter - CSS：层叠样式表

filter
======

CSS **`filter`** 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

有几个函数（例如 `blur()` 和 `contrast()`）可以帮助你实现预定义的效果。

尝试一下
----

语法
--

```css
/\* <filter-function> 值 \*/
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/\* URL \*/
filter: url("filters.svg#filter-id");

/\* 多个滤镜 \*/
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/\* 不使用滤镜 \*/
filter: none;

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

可以使用如下方法设置函数：

```css
filter: <filter-function> [<filter-function>]* | none;
```

你可以使用 `url()` 来引用 SVG 滤镜元素。可以使用如下语法引用 SVG `<filter>` 元素：

```css
filter: url(file.svg#filter-element-id);
```

函数
--

`filter` 属性可设置为 `none` 或下面列出的一个或多个函数。如果任何函数的参数无效，则该函数返回 `none`。除特殊说明外，函数的值如果接受百分比值（如 `34%`），那么该函数也接受小数值（如 `0.34`）。

当单个 `filter` 属性具有多个函数时，滤镜将按顺序依次应用。

`blur()`

将高斯模糊应用于输入图像。

```css
filter: blur(5px);
```

`brightness()`

将线性乘法器应用于输入图像，以调整其亮度。值为 `0%` 将创建全黑图像；值为 `100%` 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 `100%` 将使图像更加明亮。

```css
filter: brightness(2);
```

`contrast()`

调整输入图像的对比度。值是 `0%` 将使图像变灰；值是 `100%`，则无影响；若值超过 `100%` 将增强对比度。

```css
filter: contrast(200%);
```

`drop-shadow()`

使用 `<shadow>` 参数沿图像的轮廓生成阴影效果。阴影语法类似于 `<box-shadow>`（在 CSS 背景和边框模块中定义），但不允许使用 `inset` 关键字以及 `spread` 参数。与所有 `filter` 属性值一样，任何在 `drop-shadow()` 后的滤镜同样会应用在阴影上。

```css
filter: drop-shadow(16px 16px 10px black);
```

`grayscale()`

将图像转换为灰度图。值为 `100%` 则完全转为灰度图像，若为初始值 `0%` 则图像无变化。值在 `0%` 到 `100%` 之间，则是该效果的线性乘数。

```css
filter: grayscale(100%);
```

`hue-rotate()` (en-US)

应用色相旋转。`<angle>` 值设定图像会被调整的色环角度值。值为 `0deg`，则图像无变化。

```css
filter: hue-rotate(90deg);
```

`invert()` (en-US)

反转输入图像。值为 `100%` 则图像完全反转，值为 `0%` 则图像无变化。值在 `0%` 和 `100%` 之间，则是该效果的线性乘数。

```css
filter: invert(100%);
```

`opacity()`

应用透明度。值为 `0%` 则使图像完全透明，值为 `100%` 则图像无变化。

```css
filter: opacity(50%);
```

`saturate()` (en-US)

改变图像饱和度。值为 `0%` 则是完全不饱和，值为 `100%` 则图像无变化。超过 `100%` 则增加饱和度。

```css
filter: saturate(200%);
```

`sepia()` (en-US)

将图像转换为深褐色。值为 `100%` 则完全是深褐色的，值为 `0%` 图像无变化。

```css
filter: sepia(100%);
```

组合函数
----

你可以组合任意数量的函数来控制渲染。滤镜将按声明顺序依次应用。以下示例增强了图像的对比度和亮度。

```css
filter: contrast(175%) brightness(103%);
```

### 插值

在进行动画处理时，如果起始和结束滤镜都有一个不含 `url()` 的相同长度的函数列表，则会根据其指定的规则对其每个滤镜函数进行插值 (en-US)。

如果它们的长度不同，较长列表中缺少的等效滤镜函数将以其初始的、未被滤镜修改的值为参数被添加到较短列表的尾部，然后所有的滤镜函数根据其指定的规则插值。否则，将使用离散插值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `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 |

形式语法
----
```

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>\* )

```

示例
--

### 应用 filter 函数

`filter` 属性被应用于第二张图片，为其本身以及边框添加灰度和模糊效果。

```css
img {
  border: 5px solid yellow;
}
/\* 为第二张图像应用 40% 灰度并以 5px 进行模糊 \*/
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
```

```html
<img src="pencil.jpg" alt="原图清晰" />
<img src="pencil.jpg" alt="该图像及其边框被应用了模糊和灰度效果" />
```

### 重复滤镜函数

滤镜函数按出现顺序应用。可以重复相同的滤镜函数。

```css
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
        red);
}
```

```
<svg
 id="MDN-logo"
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 361 104.2"
 xml:space="preserve"
 role="img">
  <title>MDN Web Docs</title>
  <path
 d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"
 style="fill: var(--text-primary);"></path>
  <g style="fill:blue;">
    <path
 d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
  </g>
</svg>
```

滤镜函数按顺序应用。这就是阴影颜色不同的原因：第一个阴影的色调被 `hue-rotate()` 函数改变，而第二个阴影的色调没有被改变。

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # FilterProperty |

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

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

参见
--

* CSS `backdrop-filter` 属性
* CSS 合成和混合 (en-US)模块，包括 CSS `background-blend-mode` 和 `mix-blend-mode` 属性。
* CSS `mask` 属性
* SVG，包括 SVG `<filter>` 元素以及 SVG `filter` 属性。
* 将 SVG 效果应用于 HTML 内容


flex-direction - CSS：层叠样式表

flex-direction
==============

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

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

* Learn more
* See full compatibility
* Report feedback
CSS **`flex-direction`** 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
```

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

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

请注意，值 `row` 和 `row-reverse` 受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

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

查看 使用 CSS 弹性盒子 (en-US) 以了解更多的属性和信息。

语法
--

### 取值

接受以下取值：

`row`

flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。

`row-reverse`

表现和 row 相同，但是置换了主轴起点和主轴终点

`column`

flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

`column-reverse`

表现和`column`相同，但是置换了主轴起点和主轴终点

### 语法格式
```

flex-direction =
  row             |
  row-reverse     |
  column          |
  column-reverse

```

示例
--

### HTML

```html
<h4>This is a Column-Reverse</h4>
<div id="content">
  <div id="box" style="background-color:red;">A</div>
  <div id="box" style="background-color:lightblue;">B</div>
  <div id="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
  <div id="box1" style="background-color:red;">A</div>
  <div id="box1" style="background-color:lightblue;">B</div>
  <div id="box1" style="background-color:yellow;">C</div>
</div>
```

### CSS

```css
#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

#box {
  width: 50px;
  height: 50px;
}

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  display: flex;
  flex-direction: row-reverse;
}

#box1 {
  width: 50px;
  height: 50px;
}
```

### 结果

规范
--

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

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

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

参考
--

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


font-stretch - CSS：层叠样式表

font-stretch
============

**`font-stretch`** 属性为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如`font-feature-settings`和`font-variant`属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。

![The two 'e' belong to the same fonts. One is condensed, the other normal and can be selected by 'font-stretch'.](/files/4321/Character_in_same_font_but_one_condensed.png)

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

Syntax
------

```css
/\* Keyword values \*/
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

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

### Values

`normal`

指定默认字体

`semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`

小于默认字体，其中 ultra-condensed 是缩的最小的字体

`semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`

大于默认字体的值

### Interpolation

Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.

### Formal syntax
```

font-stretch =
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

```

示例
--

### HTML

```html
<div class="ultra stretch">This is text with the font extremely expanded</div>
<div class="stretch">This is text with the font stretched</div>
<div class="normal">This is text without font stretching</div>
<div class="condensed">This is text with the font condensed</div>
<div class="ultra condensed">
  This is text with the font extremely condensed
</div>
```

### CSS

```css
.ultra.stretch {
  font-stretch: ultra-expanded;
}
.stretch {
  font-stretch: expanded;
}
.normal {
  font-stretch: normal;
}
.condensed {
  font-stretch: condensed;
}
.ultra.condensed {
  font-stretch: ultra-condensed;
}
```

### Result

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

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

The CSS property `font-stretch` was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.

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

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


font-weight - CSS：层叠样式表

font-weight
===========

概述
--

`font-weight` CSS 属性指定了字体的粗细程度。一些字体只提供 `normal` 和 `bold` 两种值。

尝试一下
----

```css
/\* Keyword values \*/
font-weight: normal;
font-weight: bold;

/\* Keyword values relative to the parent \*/
font-weight: lighter;
font-weight: bolder;

/\* Numeric keyword values \*/
font-weight: 1
font-weight: 100;
font-weight: 100.6;
font-weight: 123;
font-weight: 200;
font-weight: 300;
font-weight: 321;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: 1000;

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

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value |
| Animation type | a font weight |

语法
--

### 值

`normal`

正常粗细。与 `400` 等值。

`bold`

加粗。与 `700` 等值。

`lighter`

比从父元素继承来的值更细 (处在字体可行的粗细值范围内)。

`bolder`

比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。

`<number>`

一个介于 1 和 1000 (包含) 之间的 `<number>` 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称，如章节常见粗细值名称和数值对应所描述。

### 回退机制

如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：

* 如果指定的权重值在 `400`和 `500`之间（包括`400`和`500`）：
    + 按升序查找指定值与`500`之间的可用权重；
    + 如果未找到匹配项，按**降序**查找小于指定值的可用权重；
    + 如果未找到匹配项，按**升序**查找大于`500`的可用权重。
* 如果指定值小于`400`，按**降序**查找小于指定值的可用权重。如果未找到匹配项，按**升序**查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。
* 如果指定值大于`500`，按**升序**查找大于指定值的可用权重。如果未找到匹配项，按**降序**查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。

以上策略意味着，如果一个字体只有 `normal` 和 `bold` 两种粗细值选择，指定粗细值为 `100-500` 时，实际渲染时将使用 `normal`，指定粗细值为 `501-900` 时，实际渲染时将使用 `bold` 。

### 相对粗细值的解析

当指定的是相对粗细值 `lighter` 或 `bolder` 时，将使用如下图表来决定元素渲染时的绝对粗细值：

| 继承值（Inherited value） | `bolder` | `lighter` |
| --- | --- | --- |
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |

### 常见粗细值名称和数值对应

100 到 900 之间的数值大致对应如下的常见粗细值名称：

`100`

Thin (Hairline)

`200`

Extra Light (Ultra Light)

`300`

Light

`400`

Normal

`500`

Medium

`600`

Semi Bold (Demi Bold)

`700`

Bold

`800`

Extra Bold (Ultra Bold)

`900`

Black (Heavy)

### 插值规律

`font-weight` 数值采取离散式定义（使用 100 的整倍数）。数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 \*50 时，将向上转换，如 150 将转换为 200。

### 形式语法
```

font-weight =
  <font-weight-absolute>  |
  bolder                  |
  lighter

<font-weight-absolute> =
  normal             |
  bold               |
  <number [1,1000]>

```

示例
--

### HTML

```html
<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, 'and what
  is the use of a book,' thought Alice 'without pictures or conversations?'
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>
```

### CSS

```css
/\* Set paragraph text to be bold. \*/
p {
  font-weight: bold;
}

/\* Set div text to two steps darker than
 normal but less than a standard bold. \*/
div {
  font-weight: 600;
}

/\* Sets text enclosed within span tag
 to be one step lighter than the parent. \*/
span {
  font-weight: lighter;
}
```

### 结果

规范
--

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

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

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


:nth-last-child - CSS：层叠样式表

:nth-last-child
===============

**`:nth-last-child()`** 这个CSS 伪类 从兄弟节点中从后往前匹配处于某些位置的元素

```css
/\* 在所有兄弟节点中，从后往前
 选择所有 4 的倍数的节点 \*/
:nth-last-child(4n) {
  color: lime;
}
```

**备注：** 这个伪类和 `:nth-child` 基本一致，但它是从*结尾*计数，而不是从开始计数。

语法
--

`nth-last-child`伪类接受一个参数，用来作为一个模式，从后往前匹配元素。

### Keyword values

`odd`

代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是奇数，比如：1, 3, 5 等。

`even`

代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是偶数，比如：2, 4, 6 等。

### Functional notation

`<An+B>`

代表一些元素，它们在所在兄弟节点中的数字位置满足模式 `An+B`, `n`是 0 或者任意的正整数。从结尾开始计算的第一个元素的索引值是`1`. `A` 和 `B` 必须都是 `<integer>`.

### Formal syntax

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

### 选择器示例

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

表示 HTML 表的倒数的奇数行:1、3、5 等。

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

表示 HTML 表的倒数的偶数行:2、4、6 等。

`:nth-last-child(7)`

表示倒数第 7 个元素。

`:nth-last-child(5n)`

表示倒数的第 5、10、15 等元素。

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

表示倒数的第 4、7、10、13 等元素。

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

表示一组兄弟节点中的最后三个元素。

`p:nth-last-child(n)` or `p:nth-last-child(n+1)`

表示一组兄弟节点中的每个`<p>`元素。这与一个简单的`p`选择器相同。(由于`n`从 0 开始，而最后一个元素从 1 开始，`n`和`n+1`都会选择相同的元素。)

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

表示所有处于兄弟节点中倒数第一位的元素`<p>`。这与`:last-child`选择器相同。

### Table example

#### HTML

```html
<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
table {
  border: 1px solid blue;
}

/\* Selects the last three elements \*/
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/\* Selects every element starting from the second to last item \*/
tr:nth-last-child(n + 2) {
  color: blue;
}

/\* Select only the last second element \*/
tr:nth-last-child(2) {
  font-weight: 600;
}
```

#### 结果

### Quantity query

数量查询样式元素取决于它们的数量。在本例中，当给定列表中至少有三个列表项时，列表项变为红色。这是通过组合`nth-last-child`和 通用兄弟选择器.的功能来实现的

#### HTML

```html
<h4>A list of four items (styled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>A list of two items (unstyled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>
```

#### CSS

```css
/\* If there are at least three list items,
 style them all \*/
li:nth-last-child(n + 3),
li:nth-last-child(n + 3) ~ li {
  color: red;
}
```

#### Result

规范
--

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

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

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

参见
--

* `:nth-child`
* Quantity Queries for CSS


padding-inline - CSS：层叠样式表

padding-inline
==============

CSS 简写属性 **`padding-inline`** 定义了元素的逻辑行首和行末内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距。

尝试一下
----

属性构成
----

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

* `padding-inline-end`
* `padding-inline-start`
语法
--

```css
/\* <length> 值 \*/
padding-inline: 10px 20px; /\* 绝对长度 \*/
padding-inline: 1em 2em; /\* 相对于文本尺寸 \*/
padding-inline: 10px; /\* 同时设置行首和行末值 \*/

/\* <percentage> 值 \*/
padding-inline: 5% 2%; /\* 相对于最近包含区块的宽度 \*/

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

`padding-inline` 属性可用一个或两个值指定。若给一值，则此值同时用于 `padding-inline-start` 和 `padding-inline-end`。若给两值，则第一个用于 `padding-inline-start` 而第二个用于 `padding-inline-end`。

### 取值

`<length>`

以固定值指定的内边距尺寸。必须非负。

`<percentage>`

以百分比指定的内边距尺寸，参照包含区块的行向尺寸（即横向语言中的*宽度*，由 `writing-mode` 所定义）。必须非负。

描述
--

根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性的值对应于 `padding-top` 和 `padding-bottom`，或者 `padding-right` 和 `padding-left` 属性。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `padding-inline-start`: `0`
* `padding-inline-end`: `0`
 |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | as each of the properties of the shorthand:* `padding-inline-start`: as `length`
* `padding-inline-end`: as `length`
 |
| Animation type | a length |

形式语法
----
```

padding-inline =
  <'padding-top'>{1,2}

```

示例
--

### 为竖排文本设置行向内边距

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-padding-inline |

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

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

参见
--

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


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

border-inline-style
===================

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

尝试一下
----

另一方向的边框线型可用 `border-block-style` 设置，此属性会设置 `border-block-start-style` 和 `border-block-end-style`。

语法
--

```css
/\* 边框线型值 \*/
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: groove;

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

### 取值

`<'border-style'>`

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

形式定义
----

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

形式语法
----
```

border-inline-style =
  <'border-top-style'>{1,2}

```

示例
--

### 设置 border-inline-style

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-style: dashed;
}
```

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-style |

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

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

参见
--

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


CSS 动画 - CSS：层叠样式表

CSS 动画
======

CSS 动画模块（CSS Animation）可以让你通过使用关键帧对 CSS 属性的值进行动画处理，例如背景位置和变换。每个关键帧都描述了动画元素在动画序列中的某个特定时间应该如何呈现。你可以使用动画模块中的属性来控制动画的持续时间、重复次数、延迟启动等方面。

### 正在运行的动画

要查看下面方框中的动画，请点击复选框“Play the animation”或将光标悬停在方框上。当动画激活时，顶部的云会改变形状，雪花会落下，底部的雪量会上升。要暂停动画，请取消复选框或将你的光标从盒子上移开。

这个动画示例使用 `animation-iteration-count` 来使雪片反复落下，`animation-direction` 使云层来回移动，`animation-fill-mode` 根据云层的移动来提高雪层，以及`animation-play-state`来暂停动画。

要查看这个动画示例的源码，请查看 GitHub 仓库上的源码。

参考
--

### 属性

* `animation` 简写属性
* `animation-composition` (en-US)
实验性
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
* `animation-timeline` (en-US)
### At 规则

* `@keyframes`
### 函数

* `scroll()` (en-US)
### 事件

所有动画，包括时间长度为 0 的动画，都会触发动画事件。

* `animationstart`
* `animationend`
* `animationcancel`
* `animationiteration`
### 接口

* Web Animations API
* `AnimationEvent` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
指南
--

使用 CSS 动画

关于如何使用 CSS 创建动画的分步教程，本文介绍每个相关的 CSS 属性和规则，并解释它们如何交互。

CSS 动画提示和技巧

帮助你充分利用 CSS 动画的技巧和窍门。

相关概念
----

* `will-change` CSS 属性
* `<easing-function>` 数据类型
* `prefers-reduced-motion` 媒体查询
* 术语贝塞尔曲线
规范
--

| Specification |
| --- |
| CSS Animations Level 2  |
| CSS Animations Level 1  |

参见
--

* 实验性
 CSS 滚动时间线 `scroll-timeline-name` (en-US) 和 `scroll-timeline-axis` (en-US) 属性，以及 `scroll-timeline` (en-US) 简写属性，创建与滚动容器的滚动偏移相关的动画。
* CSS 变换模块中的属性根据用户的动作触发动画。
* HTML `<canvas>` 元素与 canvas API 和 WebGL API一起用来绘制图形和动画。
* 所有动画相关元素的 `SVGAnimationElement` (en-US) 接口，包括 `SVGAnimateElement`、`SVGSetElement` (en-US)、`SVGAnimateColorElement` (en-US)、`SVGAnimateMotionElement` (en-US) 以及 `SVGAnimateTransformElement` (en-US)。


asin() - CSS：层叠样式表

asin()
======

CSS 函数 **`asin()`** 为三角函数，返回介于 `-1` 和 `1` 之间的数的反正弦值。此函数含有单个计算式，此式返回表示介于 `-90deg` 和 `90deg` 之间的 `<angle>` 的弧度数。

语法
--

```css
/\* 单个 <number> 值 \*/
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));

/\* 其他值 \*/
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));
```

### 参数

`asin(number)` 函数仅接受一值作为其参数。

`number`

解析为介于 `-1` 和 `1` 之间的 `<number>` 的计算式。

### 返回值

`number` 的反正弦值总将返回介于 `-90deg` 和 `90deg` 之间的 `<angle>`。

* 若 `number` 小于 `-1` 或大于 `1`，则结果为 `NaN`。
* 若 `number` 为 `0⁻`，则结果为 `0⁻`。
### 形式语法
```

<asin()> =
  asin( <calc-sum> )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

示例
--

### 旋转元素

由于 `asin()` 函数返回 `<angle>`，故可用于旋转（`rotate`）元素。

#### HTML

```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```

#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```

```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(asin(1));
}
div.box-2 {
  transform: rotate(asin(0.5));
}
div.box-3 {
  transform: rotate(asin(0));
}
div.box-4 {
  transform: rotate(asin(-0.5));
}
div.box-5 {
  transform: rotate(asin(-1));
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

参见
--

* `sin()`
* `cos()`
* `tan()`
* `acos()`
* `atan()`
* `atan2()`


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

::after (:after)
================

CSS伪元素`::after`用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合`content`属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

尝试一下
----

语法
--

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

**备注：** CSS 引入 `::after` 表示法（两个冒号）是用来区分伪类和伪元素的。同时为了向后兼容，浏览器也支持前文介绍的 `:after`。

示例
--

### 简单用法

让我们创建两个类：一个无趣的和一个有趣的。我们可以在每个段尾添加伪元素来标记他们。

```html
<p class="boring-text">这是些无聊的文字</p>
<p>这是不无聊也不有趣的文字</p>
<p class="exciting-text">
  在 MDN 上做贡献简单又轻松。按右上角的编辑按钮添加新示例或改进旧示例！
</p>
```

```css
.exciting-text::after {
  content: "<- 让人兴兴兴奋！";
  color: green;
}

.boring-text::after {
  content: "<- 无聊！";
  color: red;
}
```

#### 结果

### 装饰用法

我们几乎可以用想要的任何方法给 `content` 属性里的文字和图片的加上样式。

```html
<span class="ribbon">Notice where the orange box is.</span>
```

```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "Look at this orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

#### 结果

### 提示用法

接下来的示例展示了用`::after`伪元素，`attr()`CSS 表达式和一个自定义数据属性 `data-descr` 创建一个纯 CSS，词汇表提示工具。在单独页面看这个例子。

```html
<p>
  这是上面代码的实现<br />
  我们有一些
  <span data-descr="collection of words and punctuation">文字</span> 有一些
  <span data-descr="small popups which also hide again">提示</span>。<br />
  把鼠标放上去<span data-descr="not to be taken literally">看看</span>。
</p>
```

```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

参见
--

`::before`, `content`### 高级用法

getComputedStyle

getPropertyValue

setProperty


animation-direction - CSS：层叠样式表

animation-direction
===================

**`animation-direction`** CSS 属性设置动画是应正向播放、反向播放还是在正向和反向之间交替播放。

尝试一下
----

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

语法
--

```css
/\* 单个动画 \*/
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/\* 多个动画 \*/
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

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

### 值

`normal`

动画在每个循环中*正向*播放。换句话说，每次动画循环时，动画将重置为起始状态并重新开始。这是默认值。

`reverse`

动画在每个循环中*反向*播放。换句话说，每次动画循环时，动画将重置为结束状态并重新开始。动画步骤将反向执行，并且时间函数也将被反转。例如，`ease-in` 时间函数变为 `ease-out`。

`alternate`

动画在每个循环中正反交替播放，第一次迭代是*正向*播放。确定循环是奇数还是偶数的计数从 1 开始。

`alternate-reverse`

动画在每个循环中正反交替播放，第一次迭代是*反向*播放。确定循环是奇数还是偶数的计数从 1 开始。

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

形式定义
----

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

形式语法
----
```

animation-direction =
  <single-animation-direction>#

<single-animation-direction> =
  normal             |
  reverse            |
  alternate          |
  alternate-reverse

```

示例
--

### 反转动画方向

#### 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-direction: reverse;
}

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

#### 结果

参见 CSS 动画以获取示例。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-direction |

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

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

参见
--

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


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

text-decoration-skip
====================

CSS **`text-decoration-skip`** 属性定义了元素哪些部分的内容需要被文本修饰所跳过。它可以控制所有该元素或该元素的祖先所绘制的文本修饰线。

```css
/\* 关键字 \*/
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/\* 使用多个关键字 \*/
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

/\* 全局值 \*/
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;
```

**备注：** `ink` 值被移动至 `text-decoration-skip-ink` (en-US) 属性。

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

语法
--

### 取值

`none`

没有任何内容被跳过。因此，文本修饰会为所有文本内容和行内元素进行绘制。

`objects`

拥有完整盒模型的原子行内元素会被跳过，例如图片和行内块元素。

`spaces`

所有的空格会被跳过，包括：所有的 Unicode 空白字符 和所有的分词符，以及任意相邻的 `letter-spacing` 或 `word-spacing`。

`leading-spaces`

除了只跳过开始的空格外，与 `spaces` 相同。

`trailing-spaces`

除了只跳过结尾的空格外，与 `spaces` 相同。

`edges`

 文本修饰的开始与结束会比原有的装饰范围向内收缩（例如半个线宽）。这样，相邻的元素的下划线就可以分开。（这对于中文很重要，因为在中文中，下划线也是一种形式的标点符号。）

 ![An example of "text-decoration-skip: edges;".](/zh-CN/docs/Web/CSS/text-decoration-skip/decoration-skip-edges.png)

`box-decoration`

文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰；修饰的盒不会渲染本身的盒修饰。

### 形式语法
```

text-decoration-skip =
  none  |
  auto

```

示例
--

### HTML

```html
<p><em>Hey,</em> <em>grab a cup of coffee!</em></p>
```

### CSS

```css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skipping |

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

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


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

mask-border-width
=================

**`mask-border-width`** CSS 属性设置元素的 mask border的宽度

语法
--

```css
/\* Keyword value \*/
mask-border-width: auto;

/\* <length> value \*/
mask-border-width: 1rem;

/\* <percentage> value \*/
mask-border-width: 25%;

/\* <number> value \*/
mask-border-width: 3;

/\* vertical | horizontal \*/
mask-border-width: 2em 3em;

/\* top | horizontal | bottom \*/
mask-border-width: 5% 15% 10%;

/\* top | right | bottom | left \*/
mask-border-width: 5% 2em 10% auto;

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

可以使用从下面的值列表中选择的一个，两个，三个或四个值来指定`mask-border-width`属性。

* 指定一个值时，即对应四条边的宽度；
* 指定两个值时，第一个值对应上下边框的宽度，第二个值对应左右边框的宽度；
* 指定三个值时，第一个值对应上边框的宽度，第二个值对应左右边框的宽度，第三个值对应底部边框的宽度；
* 指定四个值时，按顺时针方向，分别对应上，右，下，左边框的宽度。
### 值

`<length-percentage>`

`mask`边框宽度指定一个值或者百分比，设定百分比时，是相对于`mask`的长度和宽度。不能为负数。

<number>

mask 边框宽度为元素`border-width`的倍数。不能为负数。

`auto`

使`mask-border`的宽度等于相应`mask-border-slice`的固有宽度或高度（以适用者为准），如果图像没有所需的固有尺寸，则使用相应的边框宽度。

### Formal syntax
```

mask-border-width =
  [ <length-percentage> | <number> | auto ]{1,4}

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

```

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| Percentages | relative to width/height of the mask border image area |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |

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

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


log() - CSS：层叠样式表

log()
=====

CSS 函数 **`log()`** 为指数型函数，返回某数的对数。

对数为指数的逆运算。固定底数的此数次方将产生传入的第一个参数。

在 CSS 中传入单个参数时，将使用以 `e`（约 `2.7182818`）为底数的自然对数，不过底数可用可选的第二个参数设置为任意值。

语法
--

```css
/\* <number> 值 \*/
width: calc(100px * log(7.389)); /\* 200px \*/
width: calc(100px * log(8, 2)); /\* 300px \*/
width: calc(100px * log(625, 5)); /\* 400px \*/
```

### 参数

`log(value [, base]?)` 函数接受以逗号分隔的两值作为其参数。

`value`

解析为大于等于 0 的 `<number>` 的计算式，表示真数。

`base`

可选。为解析为大于等于 0 的 `<number>` 的计算式，表示对数的底数。若未定义，则使用默认的对数底数 `e`。

### 返回值

在定义了 `base` 时为 `value` 的对数值。

在未定义 `base` 时为 `value` 的自然对数（以 `e` 为底数）。

### 形式语法
```

<log()> =
  log( <calc-sum> , <calc-sum>? )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

示例
--

### 基于 `log()` 函数的尺寸

此示例展示了如何使用 `log()` 函数计算尺寸。

#### HTML

```html
<div class="boxes">
  <div class="box zero">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>
```

#### CSS

此处使用 CSS 自定义属性定义待用尺寸。首先声明第一个尺寸（`--size-0`），再用此尺寸计算其他尺寸。

* `--size-1` 所计算的为 `log(7.389)` 的值（2）乘 `--size-0`（50px），结果为 100px。
* `--size-2` 所计算的为 `log(8, 2)` 的值（3）乘 `--size-0`（50px），结果为 150px。
* `--size-3` 所计算的为 `log(625, 5)` 的值（4）乘 `--size-0`（50px），结果为 200px。

```css
:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * log(7.389)); /\* 100px \*/
  --size-2: calc(var(--size-0) * log(8, 2)); /\* 150px \*/
  --size-3: calc(var(--size-0) * log(625, 5)); /\* 200px \*/
}
```

```
.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

再将这些尺寸应用于这些选择器的 `width` 和 `height` 值。

```css
.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # exponent-funcs |

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

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

参见
--

* `pow()`
* `sqrt()`
* `hypot()`
* `exp()`


columns - CSS：层叠样式表

columns
=======

CSS 属性 **`columns`** 用来设置元素的列宽和列数。

尝试一下
----

它是一个简写属性，可在单个方便的声明中设置 `column-width` (en-US) 和 `column-count` 属性。与所有简写属性一样，任何省略的子值都将设置为其初始值。

语法
--

```css
/\* Column width \*/
columns: 18em;

/\* Column count \*/
columns: auto;
columns: 2;

/\* Both column width and count \*/
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

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

`columns` 属性可以按任何顺序指定为下面列出的一个或两个值。

### 取值

`<'column-width'>`

理想的列宽，定义为 `<length>` 或 `auto` 关键字。实际宽度可以更宽或更窄以适合可用空间。See `column-width` (en-US)。

`<'column-count'>`

元素内容应分成的理想列数，定义为 `<integer>` 或 `auto` 关键字。如果此值和列的宽度都不是 `auto` ，则它仅指示允许的最大列数。请参阅 `column-count` 。

### 正式语法
```

columns =
  <'column-width'>  ||
  <'column-count'>

```

例子
--

### HTML

```html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `columns`
  property. The text is equally distributed over the columns.
</p>
```

### CSS

```css
.content-box {
  columns: 3 auto;
}
```

### Result

规范
--

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

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `column-width` (en-US): `auto`
* `column-count`: `auto`
 |
| 适用元素 | Block containers except table wrapper boxes |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `column-width` (en-US): the absolute length, zero or larger
* `column-count`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `column-width` (en-US): a length
* `column-count`: an integer
 |

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

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


text-indent - CSS：层叠样式表

text-indent
===========

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

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

* Learn more
* See full compatibility
* Report feedback
`text-indent` 属性能定义一个块元素首行文本内容之前的缩进量。

尝试一下
----

Syntax
------
```

/* <length> 长度值 */
text-indent: 3mm;
text-indent: 40px;

/* <percentage>百分比值取决于其包含块（containing block）的宽度*/
text-indent: 15%;

/* 关键字 */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* 全局值 */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
```

### Values

`<length>`

`使用固定的<length>值来指定文本的缩进。允许使用负值。查阅可能`的 `<length>` 单位。

`<percentage>`

使用包含块宽度的百分比作为缩进。

`each-line`
实验性

文本缩进会影响第一行，以及使用<br>强制断行后的第一行。

`hanging`
实验性

该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。

### 正式语法
```

text-indent =
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?

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

```

例子
--

### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
```

### CSS

```css
p {
  text-indent: 5em;
  background: powderblue;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # text-indent-property |

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | block containers |
| 是否是继承属性 | yes |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length, plus any keywords as specified |
| Animation type | a length, percentage or calc(); |

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

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


border-radius - CSS：层叠样式表

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

CSS 属性 **`border-radius`** 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。

尝试一下
----

该属性是一个 简写属性，是为了将这四个属性 `border-top-left-radius`、`border-top-right-radius`、`border-bottom-right-radius` (en-US)，和 `border-bottom-left-radius` 简写为一个属性。

即使元素没有边框，圆角也可以用到 `background` 上面，具体效果受 `background-clip` 影响。

当 `border-collapse` 的值为 `collapse` 时，`border-radius` 属性不会被应用到表格元素上。

*radius*
![all-corner.png](/zh-CN/docs/Web/CSS/border-radius/all-corner.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框四角的圆角半径。只在单值语法中使用。
 *top-left-and-bottom-right*
![top-left-bottom-right.png](/zh-CN/docs/Web/CSS/border-radius/top-left-bottom-right.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框左上角和右下角的圆角半径。只在双值语法中使用。
 *top-right-and-bottom-left*
![top-right-bottom-left.png](/zh-CN/docs/Web/CSS/border-radius/top-right-bottom-left.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。
 *top-left*
![top-left.png](/zh-CN/docs/Web/CSS/border-radius/top-left.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框左上角的圆角半径。只在三值或四值语法中使用。
 *top-right*
![top-right.png](/zh-CN/docs/Web/CSS/border-radius/top-right.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框右上角的圆角半径。只在四值语法中使用。
 *bottom-right*
![bottom-rigth.png](/zh-CN/docs/Web/CSS/border-radius/bottom-right.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框右下角的圆角半径。只在三值或四值语法中使用。
 *bottom-left*
![bottom-left.png](/zh-CN/docs/Web/CSS/border-radius/bottom-left.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框左下角的圆角半径。只在四值语法中使用。
 `inherit`
 表示四个值都从父元素计算值继承。

`<length>`

`<length>` 定义圆形半径或椭圆的半长轴，半短轴。负值无效。

`<percentage>`

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

例如：

```css
border-radius: 1em/5em;

/\* 等价于： \*/

border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
```

```css
border-radius: 4px 3px 6px / 2px 4px;

/\* 等价于： \*/

border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
```

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-top-left-radius`: `0`
* `border-top-right-radius`: `0`
* `border-bottom-right-radius` (en-US): `0`
* `border-bottom-left-radius`: `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 |
| 计算值 | as each of the properties of the shorthand:* `border-bottom-left-radius`: two absolute `length`s or `percentage`s
* `border-bottom-right-radius` (en-US): two absolute `length`s or `percentage`s
* `border-top-left-radius`: two absolute `length`s or `percentage`s
* `border-top-right-radius`: two absolute `length`s or `percentage`s
 |
| Animation type | as each of the properties of the shorthand:* `border-top-left-radius`: a length, percentage or calc();
* `border-top-right-radius`: a length, percentage or calc();
* `border-bottom-right-radius` (en-US): a length, percentage or calc();
* `border-bottom-left-radius`: a length, percentage or calc();
 |

形式语法
----
```

border-radius =
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

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

```

示例
--
```

<pre id="example-1">
border: solid 10px;
border-radius: 10px 40px 40px 10px;
  </pre
>
<pre id="example-2">
border: groove 1em red;
border-radius: 2em;
  </pre
>
<pre id="example-3">
background: gold;
border: ridge gold;
border-radius: 13em/3em;
  </pre
>
<pre id="example-4">
border: none;
border-radius: 40px 10px;
background: gold;
  </pre
>
<pre id="example-5">
border: none;
border-radius: 50%;
background: burlywood;
  </pre
>
<pre id="example-6">
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
  </pre
>
<pre id="example-7">
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
  </pre
>
```

```
pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}
```

### 在线示例

* 示例 1：http://jsfiddle.net/Tripad/qnGKj/2/
* 示例 2：http://jsfiddle.net/Tripad/qnGKj/3/
* 示例 3：http://jsfiddle.net/Tripad/qnGKj/4/
* 示例 4：http://jsfiddle.net/Tripad/qnGKj/5/
* 示例 5：http://jsfiddle.net/Tripad/qnGKj/6/
规范
--

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

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

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

参见
--

* 与 border-radius 相关的 CSS 属性：`border-top-left-radius`、`border-top-right-radius`、`border-bottom-right-radius` (en-US)、`border-bottom-left-radius`、`border-start-start-radius`、`border-start-end-radius`、`border-end-start-radius`、`border-end-end-radius`


minmax() - CSS：层叠样式表

minmax()
========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS函数 **`minmax()`** 定义了一个长宽范围的闭区间，它与CSS 网格布局一起使用。

```css
/\* <inflexible-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/\* <fixed-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/\* <inflexible-breadth>, <fixed-breadth> values \*/
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
```

语法
--

此函数包含两个参数，*最小值* 和 *最大值*.

每个参数分别是`<length>`、`<percentage>`、`<flex>`的一种，或者是`max-content`、`min-content`、或`auto`之一。

如果 *最大值* < *最小值*，则*最大值*被忽略并且 `minmax(最小值, 最大值)` 被看成*最小值*。`<flex>` 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

### 取值

`<length>`

非负长度。

`<percentage>`

相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。如果网格容器的长宽取决于其轴的长宽，则`<percentage>` 必须取值为`auto`。user agent 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。

`<flex>`

单位为`fr`的非负维度，指定轨道弹性布局的系数值。每个`<flex>`长度的轨道都以其系数值比例均分剩余空间。

`max-content`

表示网格的轨道长度自适应内容最大的那个单元格。

`min-content`

表示网格的轨道长度自适应内容最小的那个单元格。

`auto`

作为最大值时，等价于 `max-content`。作为最小值时，它表示轨道中单元格最小长宽 (由`min-width`/`min-height`) 的最大值。

### 形式语法
```

<minmax()> =
  minmax( min , max )

```

示例
--

### CSS

```css
#container {
  display: grid;
  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

### HTML

```html
<div id="container">
  <div>
    Item as wide as the content,<br />
    but at most 300 pixels.
  </div>
  <div>Item with flexible width but a minimum of 200 pixels.</div>
  <div>Inflexible item of 150 pixels width.</div>
</div>
```

### 结果

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # valdef-grid-template-columns-minmax |

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

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

参见
--

* 网格布局指南：*网格布局的基本概念——轨道大小和 minmax()*
* 视频教程：*Introducing minmax()*