transition-timing-function - CSS：层叠样式表

transition-timing-function
==========================

概述
--

CSS 属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS `transition-timing-function` 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个 transition 变化过程中，变化速度可以不断改变。

这条加速度曲线被`<timing-function>` (en-US)所定义，之后作用到每个 CSS 属性的过渡。

你可以规定多个 timing function，通过使用 `transition-property`属性，可以根据主列表 (transition property 的列表) 给每个 CSS 属性应用相应的 timing function.如果 timing function 的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果 timing function 比主列表要多，timing function 函数列表会被截断至合适的大小。这两种情况下声明的 CSS 属性都是有效的。

语法
--

```css
/\* Keyword values \*/
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/\* Function values \*/
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/\* Steps Function keywords \*/
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/\* Multiple timing functions \*/
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/\* Global values \*/
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;
```

### 值

`<timing-function>`

通过`transition-property`中定义被过渡属性，每个 `<timing-function>` (en-US)的值代表与这个属性相对应的 timing function.

形式定义
----

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

形式语法
----
```

transition-timing-function =
  <easing-function>#

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

示例
--

### 三次方贝塞尔曲线示例
```

<div class="parent">
  <div class="ease">ease</div>
  <div class="easein">ease-in</div>
  <div class="easeout">ease-out</div>
  <div class="easeinout">ease-in-out</div>
  <div class="linear">linear</div>
  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>
```

```
.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}
```

```
function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (let i = 0; i < els.length; i++) {
    els[i].classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);
```

```css
.ease {
  transition-timing-function: ease;
}
.easein {
  transition-timing-function: ease-in;
}
.easeout {
  transition-timing-function: ease-out;
}
.easeinout {
  transition-timing-function: ease-in-out;
}
.linear {
  transition-timing-function: linear;
}
.cb {
  transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}
```

### step 示例
```

<div class="parent">
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>
```

```
.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}
```

```
function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (let i = 0; i < els.length; i++) {
    els[i].classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);
```

```css
.jump-start {
  transition-timing-function: steps(5, jump-start);
}
.jump-end {
  transition-timing-function: steps(5, jump-end);
}
.jump-none {
  transition-timing-function: steps(5, jump-none);
}
.jump-both {
  transition-timing-function: steps(5, jump-both);
}
.step-start {
  transition-timing-function: step-start;
}
.step-end {
  transition-timing-function: step-end;
}
```

规范
--

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

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

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

参见
--

* Using CSS transitions (en-US)
* `TransitionEvent`


align-content - CSS：层叠样式表

align-content
=============

CSS 的 **`align-content`** 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

尝试一下
----

该属性对单行弹性盒子模型无效。（即：带有 `flex-wrap: nowrap`）。

语法
--

```css
/\* 基本位置对齐 \*/
/\*align-content 不采用左右值 \*/
align-content: center; /\* 将项目放置在中点 \*/
align-content: start; /\* 最先放置项目 \*/
align-content: end; /\* 最后放置项目 \*/
align-content: flex-start; /\* 从起始点开始放置 flex 元素 \*/
align-content: flex-end; /\* 从终止点开始放置 flex 元素 \*/

/\* 默认对齐 \*/
align-content: normal;

/\*基线对齐\*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/\* 分布式对齐 \*/
align-content: space-between; /\* 均匀分布项目
 第一项与起始点齐平，
 最后一项与终止点齐平 \*/
align-content: space-around; /\* 均匀分布项目
 项目在两端有一半大小的空间\*/
align-content: space-evenly; /\* 均匀分布项目
 项目周围有相等的空间 \*/
align-content: stretch; /\* 均匀分布项目
 拉伸‘自动’ - 大小的项目以充满容器 \*/

/\* 溢出对齐 \*/
align-content: safe center;
align-content: unsafe center;

/\* 全局属性 \*/
align-content: inherit; /\* 继承 \*/
align-content: initial; /\* 初始值 \*/
align-content: unset; /\* 未设置 \*/
```

### 取值

`start`

所有行从容器的起始边缘开始填充。

`end`

所有行从容器的结束边缘开始填充。

`flex-start`

所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。

`flex-end`

所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

`center`

所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。

`normal`

这些项按默认位置填充，就像没有设置对齐内容值一样。

`baseline first baseline`
`last baseline`

![](https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png)

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

`space-between`

所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。

`space-around`

所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

`space-evenly`

所有行沿垂直轴均匀分布在对齐容器内。每对相邻的项之间的间距，主开始边和第一项，以及主结束边和最后一项，都是完全相同的。

`stretch`

拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

`safe`

与对齐关键字一起使用。如果所选的关键字意味着项溢出对齐容器（data loss），则将采用备用策略对项进行对齐，就像启动了 `start` 对齐模式一样。

`unsafe`

与对齐关键字一起使用。无论元素和对齐容器的相对大小如何、是否会导致一些元素溢出可见范围（data loss），都使用给定的对齐值。

### 标准语法
```

align-content =
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>

<baseline-position> =
  [ first | last ]?  &&
  baseline

<content-distribution> =
  space-between  |
  space-around   |
  space-evenly   |
  stretch

<overflow-position> =
  unsafe  |
  safe

<content-position> =
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

```

示例
--

### CSS

```css
#container {
  height: 200px;
  width: 240px;
  align-content: center; /\* Can be changed in the live sample \*/
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

### HTML

```html
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>
```

```
var values = document.getElementById("values");
var display = document.getElementById("display");
var container = document.getElementById("container");

values.addEventListener("change", function (evt) {
  container.style.alignContent = evt.target.value;
});

display.addEventListener("change", function (evt) {
  container.className = evt.target.value;
});
```

### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # align-content-property |

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

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

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

参见
--

* 弹性盒子布局的基本概念：*Basic Concepts of Flexbox*
* 对齐弹性容器中的弹性项目：*Aligning items in a flex container*
* 网格布局中的盒模型对齐：*Box alignment in CSS Grid layouts*
* CSS Box Alignment


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

scroll-padding-inline-start
===========================

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

尝试一下
----

语法
--

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

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

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

### 取值

`<length-percentage>`

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

`auto`

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

形式定义
----

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

形式语法
----
```

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

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

```

规范
--

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

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

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

参见
--

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


@charset - CSS：层叠样式表

@charset
========

概述
--

**`@charset`** CSS @规则指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 **`@charset`** @规则被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的字符集相关 `<style>` 元素内的样式属性内使用。

此 @规则在某些 CSS 属性中使用非 ASCII 字符时非常有用，例如 `content`。

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

1. 文件的开头的 Unicode byte-order 字符值。
2. 由 Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
3. `CSS` @规则 `@charset`。
4. 使用参考文档定义的字符编码：`<link>` 元素的 charset 属性。该方法在 HTML5 标准中已废除，无法使用。
5. 假设文档是 UTF-8。
语法
--

```css
@charset "UTF-8";
@charset "iso-8859-15";
```

### 语法格式

```css
@charset "<charset>";
```

*charset*

它是一个 `<string>` 表示字符编码被使用。它必须是在被 IANA-registry 声明过的 web-safe 字符编码中的一个，还必须被双引号包围，遵循一个空格字符 (U+0020)，并且立即以分号结束。如果有多个相关的编码名字，只有被标记为 *preferred* 的那个才会被使用。

例子
--

```css
@charset "UTF-8";
@charset "utf-8"; /\*大小写不敏感\*/
/\* 设置 css 的编码格式为 Unicode UTF-8 \*/
```

```css
@charset 'iso-8859-15'; /\* 无效的，使用了错误的引号 \*/
@charset "UTF-8"; /\* 无效的，多于一个空格 \*/
 @charset "UTF-8"; /\* 无效的，在 at-rule 之前多了一个空格 \*/
@charset UTF-8; /\* 无效的，缺少单引号 ' 或双引号 "，charset 不是一个有效的 CSS <string> \*/
```

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

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

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

参见
--

* 字符集术语条目
* Unicode 术语条目


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

通配选择器
=====

概述
--

在 CSS 中，一个星号 (`*`) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，`*.warning` 和`.warning` 的效果完全相同。

在 CSS3 中，星号 (`*`) 可以和命名空间组合使用：

* `ns|*` - 会匹配`ns`命名空间下的所有元素
* `*|*` - 会匹配所有命名空间下的所有元素
* `|*` - 会匹配所有没有命名空间的元素
示例
--

```css
\*[lang^="en"] {
  color: green;
}
\*.warning {
  color: red;
}
\*#maincontent {
  border: 1px solid blue;
}
```

上面的 CSS 作用于下面的 HTML:

```html
<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>
```

则会产生这样的效果：

**备注：** 笔者不推荐使用通配选择器，因为它是性能最低的一个 CSS 选择器.

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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

相关链接
----


list-style-image - CSS：层叠样式表

list-style-image
================

概要
--

**`list-style-image`** 属性用来指定一个能用来作为列表元素标记的图片。

通常来说使用`list-style`较为方便。

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | list items |
| 是否是继承属性 | yes |
| 计算值 | The keyword `none` or the computed <image> |
| Animation type | discrete |

语法
--

```css
/\* Keyword values \*/
list-style-image: none;

/\* <url> values \*/
list-style-image: url("starsolid.gif");

/\* Global values \*/
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
```

### 值

`<url>`

用来作为标记的图片的地址。

`none`

说明没有图片被用作标记。如果这个值被设定，那么 `list-style-type` 中定义的值会被取代。

### 形式语法
```

list-style-image =
  <image>  |
  none

<image> =
  <url>       |
  <gradient>

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

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

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

```

示例
--

### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

### CSS

```css
ul {
  list-style-image: url("starsolid.gif");
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # image-markers |

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

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

参见
--

* `list-style`, `list-style-type`, `list-style-position`


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

scroll-margin-block
===================

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

尝试一下
----

属性构成
----

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

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

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

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

### 取值

`<length>`

滚动容器对应边的外边距。

描述
--

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `scroll-margin-block-start`: `0`
* `scroll-margin-block-end`: `0`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `scroll-margin-block-start`: as specified
* `scroll-margin-block-end`: as specified
 |
| Animation type | by computed value type |

形式语法
----
```

scroll-margin-block =
  <length>{1,2}

```

规范
--

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

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

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

参见
--

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


-webkit-box-reflect - CSS：层叠样式表

-webkit-box-reflect
===================

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

**`-webkit-box-reflect`** CSS 属性可让你将元素内容在特定方向上进行轴对称反射。

```css
/\* 方向值 \*/
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/\* 偏移量值 \*/
-webkit-box-reflect: below 10px;

/\* 蒙版值 \*/
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/\* 全局属性值 \*/
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;
```

语法
--

### 值

`above`、`below`、`right`、`left`

这些关键字指示反射发生的方向。

`<length>`

指示反射的大小。

`<image>`

描述要应用于反射的蒙版。

形式定义
----

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

形式语法
----
```

-webkit-box-reflect =
  [ above | below | right | left ]? <length>? <image>?
```

规范
--

这是一个非标准的属性。在 CSS 中创建反射效果的标准方法是使用 CSS 的 `element()` 函数。

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

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

参见
--

* Apple 文档。
* Webkit 文档。
* Lea Verou 撰写的有关使用 CSS 特性创建反射效果的文章已经纳入标准跟踪。


-moz-user-input - CSS：层叠样式表

-moz-user-input
===============

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

在 Mozilla 应用程序中，**`-moz-user-input`** 决定元素是否将接受用户输入。A 类似的属性 **`user-focus`** 是在CSS3 UI 规范的前身的早期草案中提出的，但被工作组拒绝。

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

`-moz-user-input` was one of the proposals leading to the proposed CSS 3 `user-input` property, which has not yet reached Candidate Recommendation (call for implementations).

For elements that normally take user input, such as a `<textarea>`, the initial value of `-moz-user-input` is `enabled`.

Syntax
------

```css
/\* Keyword values \*/
-moz-user-input: none;
-moz-user-input: enabled;
-moz-user-input: disabled;

/\* Global values \*/
-moz-user-input: inherit;
-moz-user-input: initial;
-moz-user-input: unset;
```

### Values

none

The element does not respond to user input, and it does not become `:active`.

enabled

The element accepts user input. For textboxes, this is the default behavior.

disabled

The element does not accept user input. However, this is not the same as setting `disabled` to true, in that the element is drawn normally.

### Formal syntax

Error: could not find syntax for this itemExamples
--------

```css
input.example {
  /\* the user will be able to select the text, but not change it. \*/
  -moz-user-input: disabled;
}
```

See also
--------

* `-moz-user-focus` (en-US)
* `-moz-user-modify` (en-US)
* `-moz-user-select` (en-US)


@keyframes - CSS：层叠样式表

@keyframes
==========

关键帧 **`@keyframes`** at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```

JavaScript 可以通过 CSS 对象模型的 `CSSKeyframesRule` (en-US) 接口来访问 `@keyframes`。

要使用关键帧，先创建一个带名称的 `@keyframes` 规则，以便后续使用 `animation-name` 属性将动画同其关键帧声明匹配。每个 `@keyframes` 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

可以按任意顺序列出关键帧百分比；它们将按照其应该发生的顺序来处理。

### 让关键帧序列生效

如果一个关键帧规则没有指定动画的开始或结束状态（也就是，`0%`/`from` 和`100%`/`to`，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。

如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。

### 重复定义

如果多个关键帧使用同一个名称，以最后一次定义的为准。 `@keyframes` 不存在层叠样式 (cascade) 的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。

如果一个 @keyframes 内的关键帧的百分比存在重复的情况，则 @keyframes 规则中该百分比的所有关键帧都将用于该帧。如果多个关键帧指定了相同的百分比值，则 @keyframes 规则内是可以使用层叠样式的。

### 属性个数不定

如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉）。例如：

```css
@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
 72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}
```

例子中，`top` 属性分别出现在关键帧 `0%`、`30%` 和 `100%` 的中，而 `left` 属性分别出现在关键帧 `0%`、`68%`、`72%` 和 `100%` 中。

### 同一关键帧中的相同属性被重复定义

如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。例如：

```css
@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}
```

上面这个例子中，`50%` 关键帧中分别最后设置的属性 `top: 10px` 和 `left: 20px` 是有效的，但是其他的属性会被忽略。

Firefox 14 开始支持层叠 keyframes。

### 关键帧中的 `!important`

关键帧中出现的 `!important` 将会被忽略。

```css
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /\* 忽略 \*/
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /\* 忽略 \*/
    margin-bottom: 50px;
  }
}
```

语法
--

### 取值

`<custom-ident>`

帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。

`from`

等价于 `0%`。

`to`

等价于 `100%`。

`<percentage>`

动画序列中触发关键帧的时间点，使用百分值来表示。

### 形式化语法
```

@keyframes =
  @keyframes <keyframes-name> { <qualified-rule-list> }

<keyframes-name> =
  <custom-ident>  |
  <string>

```

示例
--

参见使用 CSS 动画。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # keyframes |

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

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

参见
--

* 使用 CSS 动画
* `AnimationEvent` (en-US)


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

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

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

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
padding-inline-end: 10px; /\* 绝对长度 \*/
padding-inline-end: 1em; /\* 相对于文本尺寸的长度 \*/

/\* <percentage> 值 \*/
padding-inline-end: 5%; /\* 相对于包含区块宽度的内边距 \*/

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

### 取值

`<length>`

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

`<percentage>`

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

描述
--

虽然规范定义 `padding-inline-end` 属性的取值与 `padding-top` 属性相同，但是此属性所对应的实体属性取决于 `writing-mode`、`direction` 和 `text-orientation` 所设置的值。因此这一属性可能对应于 `padding-bottom`、`padding-right` 或 `padding-left`。

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `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 `length` |
| Animation type | a length |

形式语法
----
```

padding-inline-end =
  <'padding-top'>

```

示例
--

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

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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`


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

<hex-color>
===========

CSS 数据类型 **`<hex-color>`** 为描述 sRGB (en-US) 颜色的*十六进制颜色语法*的记号，此记号将颜色的主分量（红、绿、蓝）及其透明度写为十六进制数。

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

语法
--
```

#RGB        // 三值语法
#RGBA       // 四值语法
#RRGGBB     // 六值语法
#RRGGBBAA   // 八值语法
```

### 取值

`R` 或 `RR`

颜色的*红色*分量，为介于 `0` 和 `ff`（255）之间不区分大小写的十六进制数。若仅有一数，则重复此数——`1` 意为 `11`。

`G` 或 `GG`

颜色的*绿色*分量，为介于 `0` 和 `ff`（255）之间不区分大小写的十六进制数。若仅有一数，则重复此数——`c` 意为 `cc`。

`B` 或 `BB`

颜色的*蓝色*分量，为介于 `0` 和 `ff`（255）之间不区分大小写的十六进制数。若仅有一数，则重复此数——`9` 意为 `99`。

`A` 或 `AA` 可选

颜色的 *alpha* 分量，标示其透明度，为介于 `0` 和 `ff`（255）之间不区分大小写的十六进制数。若仅有一数，则重复此数——`e` 意为 `ee`。`0`（即 `00`）表示完全透明的颜色，而 `f`（即 `ff`）表示完全不透明的颜色。

**备注：** 此语法不区分大小写——`#00ff00` 与 `#00FF00` 相同。

示例
--

### 完全不透明的亮粉色的十六进制语法

#### HTML

```html
<span>
  #f09
  <div class="c1"></div>
</span>
<span>
  #F09
  <div class="c2"></div>
</span>
<span>
  #ff0099
  <div class="c3"></div>
</span>
<span>
  #FF0099
  <div class="c4"></div>
</span>
```

#### CSS
```

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

```css
div {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # hex-notation |

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

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

参见
--

* `<color>`——颜色数据类型
* `rgb()`——允许用十进制值设置颜色的三个分量及其透明度的函数


min-height - CSS：层叠样式表

min-height
==========

CSS 属性 **`min-height`** 能够设置元素的最小高度。这样能够防止 ``height`` 属性的应用值小于 `min-height` 的值。

尝试一下
----

当 `min-height` 大于 `max-height` 或 `height` 时，元素的高度会设置为 `min-height` 的值。

语法
--

```css
/\* <长度> 数值 \*/
min-height: 3.5em;

/\* <百分比> 数值 \*/
min-height: 10%;

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

/\* 全局数值 \*/
min-height: inherit;
min-height: initial;
min-height: unset;
```

### Values

`<length>`

定义 `min-height` 为一个绝对数值。

`<percentage>`

定义 `min-height` 为一个相对于父容器高度的百分数。

`auto`

浏览器将通过计算为指定元素选择一个 `min-height` 值。

`none`

不限制盒容器的尺寸。

`max-content`

The intrinsic preferred `min-height`.

`min-content`

The intrinsic minimum `min-height`.

`fit-content(`<length-percentage>`)`

Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

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

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements but non-replaced inline elements, table columns, and column groups |
| 是否是继承属性 | 否 |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `0`. |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |

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

min-height =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

```

示例
--

### Setting min-height

```css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

相关链接
----

* The box model, `box-sizing`
* `height`, `max-height`


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

border-end-end-radius
=====================

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

尝试一下
----

此属性影响元素块末与行末之间的拐角。例如在 `horizontal-tb` 书写模式和 `ltr` 行内方向下，此属性对应于 `border-bottom-right-radius` (en-US) 属性。

语法
--

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

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

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

### 取值

`<length-percentage>`

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

形式定义
----

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

形式语法
----
```

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

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

```

示例
--

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

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`border-bottom-right-radius` (en-US)
* `writing-mode`、`direction`、`text-orientation`


隐私与:visited 选择器 - CSS：层叠样式表

隐私与:visited 选择器
===============

在大概 2010 年时，CSS 选择器 `:visited` 被网站用来检测用户的浏览记录，并找出用户都访问过哪些网站。这些可以通过 `window.getComputedStyle` 和其他技术实现。这个过程可以很迅速的执行，不仅能够判断用户是否曾经访问过这个页面，还能借此猜测出大量的用户身份信息。

为了解决这个问题，Gecko 2 实现了一项隐私方面的更新，限制网站可以从访问过的链接中获得的信息。其他的浏览器也已经做了相同的改变。

善意的谎言
-----

为了保护用户隐私，火狐和其他浏览器会在特定情况下向网站应用撒谎：

* `window.getComputedStyle` 方法和其他类似的功能（例如 `element.querySelector`）将总是将所有链接都看待为“未访问过”的。
* 使用形如 `:visited + span` 的兄弟选择器时，指定的元素（本例中的 `span`）总是会按照链接未访问过显示。
* 在一些特殊的情况下，例如链接元素嵌套，且选中的元素不是检查历史记录的链接元素。对应元素同样会按照链接未访问过渲染。
对已访问链接样式的限制
-----------

你仍然可以给已访问链接设置视觉样式，但是对可用样式作出了限制。只有下列的属性才能被应用到已访问链接：

* `color`
* `background-color`
* `border-color` (and its sub-properties)
* `outline-color`
* `fill` 和 `stroke` 属性的颜色部分

此外，即便是上述样式，你也不能给访问过和未访问过设置不同的透明度。你不能使用`rgba()` (en-US)、`hsla()` (en-US)或是 `transparent` 关键词。

这是一个使用被限样式的例子：

```css
:link {
  outline: 1px dotted blue;
  background-color: white;
  /\* background-color 的默认值为 'transparent'。
 你必须指定一个不同值，否则无法应用对 :visited 的修改 \*/
}

:visited {
  outline-color: orange; /\* 已访问链接的轮廓为橘色 \*/
  color: yellow; /\* 已访问链接的文本为黄色 \*/
  background-color: green; /\* 已访问链接的背景为绿色 \*/
}
```

对 WEB 开发者的影响
------------

总体来说，这不会显著地影响到 WEB 开发者。但在一些特殊情况下，网站需要做些修改：

* 使用背景图片来区分链接是否被访问过的样式不再起作用，因为只有颜色才能被作用到已访问链接上。
* 不能通过 `:visited` 选择器指定了透明或不透明的颜色。
更多
--

* privacy-related changes coming to CSS :visited on Mozilla Hacks
* Plugging the CSS History Leak on the Mozilla Security Blog
* Preventing attacks on a user's history through CSS :visited selectors


::-webkit-scrollbar - CSS：层叠样式表

::-webkit-scrollbar
===================

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

`::-webkit-scrollbar` CSS 伪类元素会影响设置了 `overflow:scroll;` 的元素的滚动条样式。

**备注：** 如果没有设置 `overflow:scroll;`，元素的滚动条将不会显示。

**备注：** `::-webkit-scrollbar` 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其他基于 WebKit 的浏览器）上可用。滚动条样式的标准方法可用于 `scrollbar-color` 和 `scrollbar-width`。

CSS 滚动条选择器
----------

你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：

* `::-webkit-scrollbar`——整个滚动条。
* `::-webkit-scrollbar-button`——滚动条上的按钮（上下箭头）。
* `::-webkit-scrollbar-thumb`——滚动条上的滚动滑块。
* `::-webkit-scrollbar-track`——滚动条轨道。
* `::-webkit-scrollbar-track-piece`——滚动条没有滑块的轨道部分。
* `::-webkit-scrollbar-corner`——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
* `::-webkit-resizer`——出现在某些元素底角的可拖动调整大小的滑块。
示例
--

### CSS

```css
.visible-scrollbar,
.invisible-scrollbar,
.mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/\* Demonstrate a "mostly customized" scrollbar
 \* (won't be visible otherwise if width/height is specified) \*/
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /\* or add it to the track \*/
}

/\* Add a thumb \*/
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
  background: #000;
}
```

### HTML

```html
<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla
  elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut
  dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis
  velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere
  est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.
  Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus.
  Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor.
  Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis.
  Aliquam at enim ligula.
</div>

<div class="invisible-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>

<div class="mostly-customized-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
  And pretty tall<br />
  thing with weird scrollbars.<br />
  Who thought scrollbars could be made weeeeird?
</div>
```

### 结果

规范
--

不属于任何标准。

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

### css.selectors.-webkit-scrollbar

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

### css.selectors.-webkit-scrollbar-button

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

### css.selectors.-webkit-scrollbar-thumb

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

### css.selectors.-webkit-scrollbar-track

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

### css.selectors.-webkit-scrollbar-track-piece

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

### css.selectors.-webkit-scrollbar-corner

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

### css.selectors.-webkit-resizer

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

参见
--

* WebKit 论坛设置滚动条样式
* `scrollbar-width`
* `scrollbar-color`


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

text-underline-offset
=====================

CSS 的 **`text-underline-offset`** 属性设置文本装饰下划线（使用 `text-decoration` 应用）与其原始位置的偏移距离。

尝试一下
----

`text-underline-offset` 不是 `text-decoration` 简写的一部分。虽然元素可以有多条 `text-decoration` 线，但 `text-underline-offset` 只影响下划线，而**不**影响其他可能的线装饰选项，例如 `overline` 或 `line-through`。

语法
--

```css
/\* 单个关键字 \*/
text-underline-offset: auto;

/\* length \*/
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/\* percentage \*/
text-underline-offset: 20%;

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

`text-underline-offset` 属性指定为以下列出的单个值。

### 值

`auto`

浏览器为下划线选择适当的偏移量。

`<length>`

指定下划线的偏移量为 `<length>`，覆盖字体文件建议的和浏览器默认的值。建议使用 `em` 单位，以便偏移量随字体大小缩放。

`<percentage>`

指定下划线的偏移量为元素的字体中 **1 em** 的 `<percentage>`。百分比作为相对值继承，因此会随着字体的变化而缩放。在应用了此属性后，即使存在具有不同的字体大小或垂直对齐方式的子元素，偏移量在应用下划线的整个盒子内都是恒定的。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| Percentages | refer to the font size of the element itself |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

text-underline-offset =
  auto                 |
  <length-percentage>

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

```

示例
--

### text-underline-offset 的演示

```html
<p class="oneline">Here's some text with an offset wavy red underline!</p>
<br />
<p class="twolines">
  This text has lines both above and below it. Only the bottom one is offset.
</p>
```

```css
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}
```

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # underline-offset |

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

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

参见
--

* `text-decoration`
* `text-decoration-thickness`


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

:is()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
**`:is()`** CSS 伪类函数以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。

**备注：** 最初该选择器被命名为 `:matches()`（以及 `:any()`），但在 CSSWG issue #3258 中被重命名为 `:is()`。

尝试一下
----

伪元素在 `:is()` 的选择器列表中无效。

### :is() 和 :where() 的区别

两者之间的区别在于，`:is()` 会计入整个选择器的优先级（它采用其最具体参数的优先级），而 `:where()` 的优先级为 0。这可以通过 `:where()` 参考页面上的示例来演示。

### 可容错选择器解析

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

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

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

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

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

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

示例
--

### 简化列表选择器

`:is()` 伪类可以大大简化你的 CSS 选择器。例如，考虑以下 CSS：

```css
/\* 三层或更深的无序列表使用方形符号。 \*/
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}
```

你可以将其替换为：

```css
/\* 三层或更深的无序列表使用方形符号。 \*/
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}
```

### 简化段落选择器

`:is()` 伪类在处理段落和标题时特别有用。由于 `<section>`、`<article>`、`<aside>` 和 `<nav>` 通常嵌套在一起，如果没有 `:is()`，将它们设置为相互匹配很棘手。

例如，没有 `:is()`，在不同的深度对所有 h1 元素进行样式化可能是非常复杂的：

```css
/\* 0 级 \*/
h1 {
  font-size: 30px;
}

/\* 1 级 \*/
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}

/\* 2 级 \*/
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
  font-size: 20px;
}

/\* 3 级 \*/
/\* 想都别想！ \*/
```

然而，使用 `:is()` 将容易的多：

```css
/\* 0 级 \*/
h1 {
  font-size: 30px;
}
/\* 1 级 \*/
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/\* 2 级 \*/
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/\* 3 级 \*/
:is(section, article, aside, nav)
 :is(section, article, aside, nav)
 :is(section, article, aside, nav)
 h1 {
  font-size: 15px;
}
```

### :is() 不能选择伪元素

`:is()` 伪类不匹配伪元素。所以这样不行：

```css
some-element:is(::before, ::after) {
  display: block;
}
```

这样可以

```css
some-element::before,
some-element::after {
  display: block;
}
```

语法
--

```css
:is(<forgiving-selector-list>) {
  /\* ... \*/
}
```

规范
--

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

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

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

参见
--

* `:where()`——类似于 `:is()`，但是其优先级为 0。
* 选择器列表
* Web 组件


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

border-top-width
================

css 属性 **`border-top-width`** 是用于设置盒模型的上边框的宽度

尝试一下
----

Syntax
------

```css
/\* Keyword values \*/
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

/\* <length> values \*/
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;

/\* Global keywords \*/
border-top-width: inherit;
border-top-width: initial;
border-top-width: unset;
```

### Values

`<br-width>`

上边框的宽度属性的有效值要么是一个具体的非负数，要么是一个关键字。如果是关键字，必须是一下几种：

| `thin` |  | A thin border |
| --- | --- | --- |
| `medium` |  | A medium border |
| `thick` |  | A thick border |

**备注：** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

### Formal syntax
```

border-top-width =
  <line-width>

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

```

Example
-------

### HTML

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

### CSS

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

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

### Result

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

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

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

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

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

See also
--------

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


:enabled - CSS：层叠样式表

:enabled
========

**`:enabled`** CSS 伪类表示任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。该元素还有一个被禁用的状态，在此状态下它无法被激活或接受焦点。

尝试一下
----

语法
--
```

:enabled
```

示例
--

以下示例将在启用状态下把类型为文本输入框和按钮的 `<input>` 颜色设置为绿色，禁用时设置为灰色。这有助于用户理解哪些元素可以进行交互操作。

### HTML

```html
<form action="url\_of\_form">
  <label for="FirstField">第一个字段（已启用）:</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">第一个字段（已禁用）:</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Submit" />
</form>
```

### CSS

```css
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}
```

### 结果

规范
--

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

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

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

参见
--

* `:disabled`


:read-only - CSS：层叠样式表

:read-only
==========

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
**`:read-only`** CSS 伪类 表示元素不可被用户编辑的状态（如锁定的文本输入框）。

```css
/\* Selects any <input> element that is read-only \*/
/\* Supported in Firefox with a prefix \*/
input:-moz-read-only {
  background-color: #ccc;
}

/\* Supported in Blink/WebKit/Edge without a prefix \*/
input:read-only {
  background-color: #ccc;
}
```

**备注：** 这个选择器不只是选择具有 `readonly` 属性的`<input>` 元素，它也会选择所有的不能被用户编辑的元素。

语法
--

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

### HTML

```html
<input type="text" value="Type whatever you want here." />
<input type="text" value="This is a read-only field." readonly />
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</p>
```

### CSS

```css
input {
  min-width: 25em;
}
input:-moz-read-only {
  background: cyan;
}
input:read-only {
  background: cyan;
}

p:-moz-read-only {
  background: lightgray;
}
p:read-only {
  background: lightgray;
}
p[contenteditable="true"] {
  color: blue;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-read-only |
| Selectors Level 4 # rw-pseudos |

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

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

参见
--

* `:read-write`
* HTML `contenteditable` attribute


mix-blend-mode - CSS：层叠样式表

mix-blend-mode
==============

**`mix-blend-mode`** CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

尝试一下
----

语法
--
```

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;
```

### 值

`<blend-mode>`

表示应该应用的混合模式。

形式定义
----

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

形式语法
----
```

mix-blend-mode =
  <blend-mode>  |
  plus-darker   |
  plus-lighter

<blend-mode> =
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

```

示例
--

### 不同 mix-blend-mode 值的效果
```

<div class="grid">
  <div class="col">
    <div class="note">
      Blending in isolation (no blending with the background)
    </div>
    <div class="row isolate">
      <div class="cell">
        normal
        <div class="container normal">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <defs>
                <linearGradient id="red">
                  <stop offset="0" stop-color="hsl(0,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(0,0%,100%)" />
                </linearGradient>
                <linearGradient id="green">
                  <stop offset="0" stop-color="hsl(120,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(120,0%,100%)" />
                </linearGradient>
                <linearGradient id="blue">
                  <stop offset="0" stop-color="hsl(240,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(240,0%,100%)" />
                </linearGradient>
              </defs>
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        multiply
        <div class="container multiply">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        darken
        <div class="container darken">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        screen
        <div class="container screen">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        lighten
        <div class="container lighten">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        overlay
        <div class="container overlay">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-dodge
        <div class="container color-dodge">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-burn
        <div class="container color-burn">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hard-light
        <div class="container hard-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        soft-light
        <div class="container soft-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        difference
        <div class="container difference">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        exclusion
        <div class="container exclusion">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hue
        <div class="container hue">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        saturation
        <div class="container saturation">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color
        <div class="container color">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        luminosity
        <div class="container luminosity">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="note">Blending globally (blend with the background)</div>
    <div class="row">
      <div class="cell">
        normal
        <div class="container normal">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        multiply
        <div class="container multiply">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        darken
        <div class="container darken">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        screen
        <div class="container screen">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        lighten
        <div class="container lighten">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        overlay
        <div class="container overlay">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-dodge
        <div class="container color-dodge">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-burn
        <div class="container color-burn">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hard-light
        <div class="container hard-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        soft-light
        <div class="container soft-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        difference
        <div class="container difference">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        exclusion
        <div class="container exclusion">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hue
        <div class="container hue">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        saturation
        <div class="container saturation">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color
        <div class="container color">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        luminosity
        <div class="container luminosity">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

```
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  height: auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  position: relative;
  background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%),
    linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%);
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.R {
  transform-origin: center;
  transform: rotate(-30deg);
  fill: url(#red);
}

.G {
  transform-origin: center;
  transform: rotate(90deg);
  fill: url(#green);
}

.B {
  transform-origin: center;
  transform: rotate(210deg);
  fill: url(#blue);
}

.isolate .group {
  isolation: isolate;
}

.normal .item {
  mix-blend-mode: normal;
}
.multiply .item {
  mix-blend-mode: multiply;
}
.screen .item {
  mix-blend-mode: screen;
}
.overlay .item {
  mix-blend-mode: overlay;
}
.darken .item {
  mix-blend-mode: darken;
}
.lighten .item {
  mix-blend-mode: lighten;
}
.color-dodge .item {
  mix-blend-mode: color-dodge;
}
.color-burn .item {
  mix-blend-mode: color-burn;
}
.hard-light .item {
  mix-blend-mode: hard-light;
}
.soft-light .item {
  mix-blend-mode: soft-light;
}
.difference .item {
  mix-blend-mode: difference;
}
.exclusion .item {
  mix-blend-mode: exclusion;
}
.hue .item {
  mix-blend-mode: hue;
}
.saturation .item {
  mix-blend-mode: saturation;
}
.color .item {
  mix-blend-mode: color;
}
.luminosity .item {
  mix-blend-mode: luminosity;
}
```

### HTML 中使用 mix-blend-mode

#### HTML

```html
<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>
```

#### CSS

```css
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /\* Without isolation, the background color will be taken into account \*/
  position: relative;
}
```

#### 结果

### SVG 中使用 mix-blend-mode

#### SVG

```html
<svg>
  <g class="isolate">
    <circle cx="40" cy="40" r="40" fill="red" />
    <circle cx="80" cy="40" r="40" fill="lightgreen" />
    <circle cx="60" cy="80" r="40" fill="blue" />
  </g>
</svg>
```

#### CSS

```css
circle {
  mix-blend-mode: screen;
}
.isolate {
  isolation: isolate;
} /\* Without isolation, the background color will be taken into account \*/
```

#### 结果

规范
--

| Specification |
| --- |
| Compositing and Blending Level 2 # mix-blend-mode |

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

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

参见
--

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


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

scroll-snap-align
=================

**`scroll-snap-align`** 属性将盒子的吸附位置指定为其吸附区域（作为对齐对象）在其吸附容器的吸附口（作为对齐容器）中的对齐方式。其两值分别指定了在块向轴盒行向轴上的吸附对齐方式。若仅指定一值，则第二值默认为同一值。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
scroll-snap-align: none;
scroll-snap-align: start end; /\* 当设置两值时，第一值为块向，第二值为行向 \*/
scroll-snap-align: center;

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

### 取值

`none`

此盒在此轴上未定义吸附位置。

`start`

此盒的滚动吸附区域在滚动容器的吸附口中的首对齐为此轴上的吸附位置。

`end`

此盒的滚动吸附区域在滚动容器的吸附口中的末对齐为此轴上的吸附位置。

`center`

此盒的滚动吸附区域在滚动容器的吸附口中的居中对齐为此轴上的吸附位置。

形式定义
----

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

形式语法
----
```

scroll-snap-align =
  [ none | start | end | center ]{1,2}

```

规范
--

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

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

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

参见
--

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


<filter-function> - CSS：层叠样式表

<filter-function>
=================

**`<filter-function>`** CSS 数据类型 代表可以改变输入图像外观的图形效果。它可以用于`filter` 和 `backdrop-filter` 属性。

语法
--

`<filter-function>` 数据类型由下列过滤器函数之一指定的。每个函数需要一个参数，如果参数无效，结果不会被改变，如同没有使用过滤器一样。

`blur()`

模糊图像

`brightness()`

让图像更明亮或更暗淡

`contrast()`

增加或减少图像的对比度

`drop-shadow()`

在图像后方应用投影

`grayscale()`

将图像转为灰度图

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

改变图像的整体色调

`invert()` (en-US)

反转图像颜色

`opacity()`

改变图像透明度

`saturate()` (en-US)

超饱和或去饱和输入的图像

`sepia()` (en-US)

将图像转为棕褐色

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # typedef-filter-function |

相关参考
----

* 使用此数据类型的属性：`filter` 以及 `backdrop-filter`


<color-interpolation-method> - CSS：层叠样式表

<color-interpolation-method>
============================

CSS 数据类型 **`<color-interpolation-method>`** 表示用于在 `<color>` 值之间插值的颜色空间。此数据类型可用于覆盖例如 `color-mix()` 和 `linear-gradient()` 等与颜色相关的函数记号所用的默认插值颜色空间。

在对 `<color>` 值插值时，插值颜色空间默认为 Oklab。

语法
--

`<color-interpolation-method>` 指定了插值应使用直角坐标颜色空间还是带可选色相插值方法的极坐标颜色空间：
```

in <rectangular-color-space>
/* 或者 */
in <polar-color-space>[ <hue-interpolation method>]
```

### 取值

`<rectangular-color-space>`

关键字 `srgb`、`srgb-linear`、`lab`、`oklab`、`xyz`、`xyz-d50` 或 `xyz-d65` 之一。

`<polar-color-space>`

关键字 `hsl`、`hwb`、`lch` 或 `oklch`。

`<hue-interpolation-method>` 可选

用于色相插值的算法。默认为 `shorter hue`。

形式语法
----
```

<color-interpolation-method> =
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65

<polar-color-space> =
  hsl    |
  hwb    |
  lch    |
  oklch

<hue-interpolation-method> =
  [ shorter | longer | increasing | decreasing ] hue

```

示例
--

### 用渐变比较各种插值颜色空间

下列示例展示了为 `linear-gradient()` 使用不同的插值颜色空间的效果。

#### HTML

```html
<div>sRGB：</div>
<div class="gradient srgb"></div>
<div>Oklab：</div>
<div class="gradient oklab"></div>
<div>Oklch（带 <code>longer hue</code>）：</div>
<div class="gradient oklch-longer"></div>
```

#### CSS
```

/\* 后备样式 \*/
.srgb {
  background-image: linear-gradient(
    to right,
    rgb(0% 0% 100%),
    rgb(20% 0% 80%),
    rgb(40% 0% 60%),
    rgb(60% 0% 40%),
    rgb(80% 0% 20%),
    rgb(100% 0% 0%)
  );
}
.oklab {
  background-image: linear-gradient(
    to right,
    oklab(45.2% -0.032 -0.312),
    oklab(48.7% 0.019 -0.224),
    oklab(52.2% 0.07 -0.137),
    oklab(55.8% 0.122 -0.049),
    oklab(59.3% 0.173 0.038),
    oklab(62.8% 0.225 0.126)
  );
}
.oklch-longer {
  background-image: linear-gradient(
    to right,
    oklch(45.2% 0.313 264),
    oklch(46.8% 0.308 243),
    oklch(48.4% 0.303 221),
    oklch(50% 0.298 200),
    oklch(51.6% 0.293 179),
    oklch(53.2% 0.288 157),
    oklch(54.8% 0.283 136),
    oklch(56.4% 0.278 115),
    oklch(58% 0.273 93),
    oklch(59.6% 0.268 72),
    oklch(61.2% 0.263 51),
    oklch(62.8% 0.258 29)
  );
}
```

```css
.gradient {
  height: 50px;
  width: 100%;
}
.srgb {
  background-image: linear-gradient(in srgb to right, blue, red);
}
.oklab {
  background-image: linear-gradient(in oklab to right, blue, red);
}
.oklch-longer {
  background-image: linear-gradient(in oklch longer hue to right, blue, red);
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # interpolation-space |

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

### css.types.color.color-mix

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

### css.types.image.gradient.conic-gradient.interpolation\_color\_space

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

### css.types.image.gradient.linear-gradient.interpolation\_color\_space

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

### css.types.image.gradient.radial-gradient.interpolation\_color\_space

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

### css.types.image.gradient.repeating-conic-gradient.interpolation\_color\_space

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

### css.types.image.gradient.repeating-linear-gradient.interpolation\_color\_space

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

### css.types.image.gradient.repeating-radial-gradient.interpolation\_color\_space

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

参见
--

* `<color>`、`<gradient>`
* `<hue-interpolation-method>`


overflow-block - CSS：层叠样式表

overflow-block
==============

CSS 属性 **`overflow-block`** 设置了当内容溢出盒的块首和块末侧时所显示的内容。可以不显示，或者显示滚动条或溢出内容。

**备注：**`overflow-block` 属性根据文档的书写模式对应于 `overflow-y` 或 `overflow-x`。

语法
--

```css
/\* 关键词值 \*/
overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;

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

`overflow-block` 属性可指定为下列关键词之一。

### 取值

`visible`

不裁剪内容且可在内边距盒的块首和块末侧外渲染内容。

`hidden`

若内边距盒在块向尺度上无法容纳内容则裁剪内容。不提供滚动条。

`scroll`

若内边距盒在块向尺度上无法容纳内容则裁剪内容。无论内容是否被裁剪，浏览器均显示滚动条。（由此可阻止滚动条在内容变化时显示或消失。）打印机仍可能打印溢出内容。

`auto`

取决于用户代理。若内边距盒可以容纳内容，则与 `visible` 表现相同，但仍建立新的块格式化上下文。若内容溢出则桌面浏览器提供滚动条。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | 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-block =
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

```

示例
--

### HTML

```html
<ul>
  <li>
    <code>overflow-block:hidden</code>——在盒外隐藏文本
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:scroll</code>——总是添加滚动条
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:visible</code>——按需在盒外显示文本
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:auto</code>——在多数浏览器上等价于 <code>scroll</code>
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>
```

### CSS

```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-block: hidden;
  margin-bottom: 120px;
}
#div2 {
  overflow-block: scroll;
  margin-bottom: 120px;
}
#div3 {
  overflow-block: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-block: auto;
  margin-bottom: 120px;
}
```

### 结果

规范
--

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

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

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

参见
--

* 相关 CSS 属性：`text-overflow`、`white-space`、`overflow`、`overflow-inline`、`overflow-x`、`overflow-y`、`clip`、`display`
* CSS 逻辑属性
* 书写模式


width - CSS：层叠样式表

width
=====

**`width`** 属性用于设置元素的宽度。`width` 默认设置内容区域的宽度，但如果 `box-sizing` 属性被设置为 `border-box`，就转而设置边框区域的宽度。

尝试一下
----

`min-width` 和 `max-width` 属性的优先级高于 `width`。

语法
--

```css
/\* <length> values \*/
width: 300px;
width: 25em;

/\* <percentage> value \*/
width: 75%;

/\* Keyword values \*/
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

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

`width` 属性也指定为：

* 下面关键字值之一：`min-content`，`max-content`，`fit-content`，`auto`。
* 一个长度值 `<length>` 或者百分比值 `<percentage>`。
### 值

`<length>`

使用绝对值定义宽度。

`<percentage>`

使用外层元素的容纳区块宽度（the containing block's width）的百分比定义宽度。

`auto`

浏览器将会为指定的元素计算并选择一个宽度。

`max-content`
实验性

元素内容固有的（intrinsic）合适宽度。

`min-content`
实验性

元素内容固有的最小宽度。

`fit-content`
实验性

取以下两种值中的较大值：

* 固有的最小宽度
* 固有首选宽度（max-content）和可用宽度（available）两者中的较小值

可表示为：`min(max-content, max(min-content, <length-percentage>))`

### 形式语法
```

width =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

```

示例
--

### 默认宽度

```css
p.goldie {
  background: gold;
}
```

```html
<p class="goldie">The Mozilla community produces a lot of great software.</p>
```

### 像素 px 和字高 em

```css
.px\_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em\_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
```

```html
<div class="px\_length">以 px 度量的宽度</div>
<div class="em\_length">以 em 度量的宽度</div>
```

### 百分比

```css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
```

```html
<div class="percent">按照百分比度量的宽度</div>
```

### `max-content` 使用示例

```css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /\* Safari/WebKit 使用了非标准的名称 \*/
  width: -moz-max-content; /\* Firefox/Gecko \*/
  width: -webkit-max-content; /\* Chrome \*/
}
```

```html
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
```

### `min-content` 使用示例

```css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
}
```

```html
<p class="minblue">The Mozilla community produces a lot of great software.</p>
```

无障碍考虑
-----

当页面放大以增加文本大小时，请确保 `width` 设置的元素不会被截断并且不会遮挡其他内容。

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements but non-replaced inline elements, table rows, and row groups |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

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

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

参见
--

* 框盒模型
* `height`
* `box-sizing`
* `min-width`
* `max-width`


CSS 属性值定义语法 - CSS：层叠样式表

CSS 属性值定义语法
===========

**CSS 属性值定义语法**（CSS value definition syntax）是用来限定 CSS 属性合法取值的专门语法。在此基础之上，一个 CSS 属性的合法取值也由语义所限制，比如一些数字必须是正数。

CSS 属性值定义语法描述了哪些值是可取的 CSS 属性，基本组成元素包括关键字、符号与带类型的参数。

基本组成元素
------

### 关键字

#### 一般关键字

有预定义含义的一般关键字按字面意义出现，不需要引号，如`auto`, `smaller` 或 `ease-in`。

#### 特殊关键字：`inherit`、`initial`和`unset`

所有 CSS 属性值都可以使用`inherit`、`initial`和`unset`，它们的定义贯穿 CSS 始终。它们未显示在值定义中，但都是隐含可用的。

### 符号

CSS 中，有一些符号是可以出现的，比如斜杠 ('`/`') 或者逗号 ('`,`') 等。它们用来分隔属性值：逗号用来分隔数个并列值，或者分隔函数的参数；斜杠用来分隔一个值的多个部分，通常用在 CSS 缩写中分离具有相同类型但属于不同属性的组件。

这两种符号会以其字面意义出现在 CSS 属性值定义中。

### 带类型的参数

#### 基本类型

一些类型在 CSS 中经常出现，CSS 规范中将其专门定义，称为*基本类型*，用一对尖括号表示：'`<`'与'`>`'，例如：`<angle>`, `<string>`, …

#### 其他类型

其他类型同样也用一对尖括号表示：'`<`'与'`>`'。

其他类型分为两种：

* *共享同一个属性名称*的数个类型。在这种情况下，数据类型与属性共享同一组值。它们出现在一对引号之中，经常用于属性的缩写。
* *不共享同一个属性名称*的数个类型，它们与基本类型很相似，不同是：这种参数仅在规范中相关属性的描述处定义，而基本类型在规范中有专门定义。
组合符号
----

### 方括号

*方括号*将数个基本元素组成一个整体，用来**强调组合的优先级**。例如：
```

bold [ thin && <length> ]
```

以下均为该例的合法取值：

* `bold thin 2vh`
* `bold 0 thin`
* `bold thin 3.5em`

但以下不是合法取值：

* `thin bold 3em` 因为`bold`被放置在方括号定义的整体之中。根据定义，`bold`必须出现在方括号定义的整体之前。
### 并置

*并置*是指将数个关键字、符号或类型，用空格分开写在一起。并置中所有的元素都**必须出现并且按所规定的顺序出现**。例如：
```

bold <length> , thin
```

以下均为该例的合法取值：

* `bold 1em, thin`
* `bold 0, thin`
* `bold 2.5cm, thin`
* `bold 3vh, thin`

但以下不是合法取值：

* `thin 1em, bold`因为顺序有错。
* `bold 1em thin`因为所有元素都必须出现，包括逗号。
* `bold 0.5ms, thin`因为`ms`是时间值，不是长度值：`<length>`
### “与”组合符：&&

*“与”组合符*连接的各个部分都**必须出现，但是顺序任意**。例如：
```

bold && <length>
```

以下均为该例的合法取值：

* `bold 1em`
* `bold 0`
* `2.5cm bold`
* `3vh bold`

但以下不是合法取值：

* `bold`因为长度值没有出现。
* `bold 1em bold`因为各部分必须恰好出现一次。

**备注：** 并置的优先级高于“与”组合符。例如 `bold thin && <length>` 等价于 `[ bold thin ] && <length>`。它们的合法取值是：`bold thin <length>` 或 `<length> bold thin` 但不是 `bold <length> thin`。

### “或”组合符：||

*“或”组合符*表示其连接的所有组成元素是可选的，**次序任意，但是至少其中一个要出现**。“或”组合符通常用来描述属性缩写 (en-US)中的各部分。
```

<'border-width'> || <'border-style'> || <'border-color'>
```

以下均为该例的合法取值：

* `1em solid blue`
* `blue 1em`
* `solid 1px yellow`

但以下不是合法取值：

* `blue yellow`因为一个组成部分最多出现一次。
* `bold`因为它不允许出现。

**备注：** “与”组合符的优先级高于“或”组合符，比如 `bold || thin && <length>` 等价于 `bold || [ thin && <length> ]`。它们的合法取值是：`bold`, `thin <length>`, `bold thin <length>`, 或者 `thin <length> bold` ，但不是：`<length> bold thin` 因为 bold 若出现，则必须出现在 `thin && <length>` 整体的前面或后面。

### “互斥”组合符：|

*“互斥”组合符*表示各组成部分中只能**恰好出现一个**，通常用来分隔一个属性的所有可选值。例如：
```

<percentage> | <length> | left | center | right | top | bottom
```

以下均为该例的合法取值：

* `3%`
* `0`
* `3.5em`
* `left`
* `center`
* `right`
* `top`
* `bottom`

但以下不是合法取值：

* `center 3%` 因为最多只能出现一个组成部分
* `3em 4.5em` 因为每个组成部分最多只能出现一次

**备注：** “或”组合符的优先级高于“互斥”组合符，比如`bold | thin || <length>`等价于`bold | [ thin || <length> ]`。它们的合法取值是：`bold`, `thin`, `<length>`, `<length> thin`, 或 `thin <length>`，但不能是 `bold <length>`，因为“互斥”组合符所连接的数个部分中，只有一个能出现。

数量符号
----

数量符号用来描述一个元素可以出现多少次。若不标注，则这个元素比如恰好出现一次。

注意数量描述符不能叠加出现，并且优先级最高。

### 星号 (`*`)

*星号*表示可以出现**零次（即不出现），一次，或任意多次**。例如：
```

bold smaller*
```

以下均为该例的合法取值：

* `bold`
* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller` and so on.

但以下不是合法取值：

* `smaller` 因为`bold`并置于`smaller`，必须出现在任何`smaller`之前。
### 加号 (`+`)

*加号*表示可以出现**一次或多次**。例如：
```

bold smaller+
```

以下均为该例的合法取值：

* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller` and so on.

但以下不是合法取值：

* `bold` 因为`smaller`必须出现至少一次。
* `smaller` 因为`bold` 是并置关系，必须在`smaller`之前出现。
### 问号 (`?`)

*问号*表示可选，即出现**零次或一次**。例如：
```

bold smaller?
```

以下均为该例的合法取值：

* `bold`
* `bold smaller`

但以下不是合法取值：

* `bold smaller smaller` 因为`smaller`最多出现一次。
* `smaller` 因为`bold`是并置关系，必须出现在`smaller`之前。
### 大括号 (`{ }`)

*大括号*包含两个以逗号分隔的整数 A 与 B，表示**最少出现 A 次，且最多出现 B 次**。例如：
```

bold smaller{1,3}
```

以下均为该例的合法取值：

* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller`

但以下不是合法取值：

* `bold` 因为`smaller` 至少要出现一次。
* `bold smaller smaller smaller smaller` 因为`smaller` 最多出现三次。
* `smaller` 因为`bold`是并置关系，必须出现在`smaller`之前。
### 井号 (`#`)

*井号*表示**可以出现一次或多次**，与*加号*相似。但是其多次出现必须**以逗号分隔**。例如：
```

bold smaller#
```

以下均为该例的合法取值：

* `bold smaller`
* `bold smaller, smaller`
* `bold smaller, smaller, smaller` and so on.

但以下不是合法取值：

* `bold` 因为`smaller`必须至少出现一次。
* `bold smaller smaller smaller` 因为多个`smaller`必须以逗号分隔。
* `smaller` 因为`bold`是并置关系，必须出现在`smaller`之前。
### 叹号 (`!`)

组后面的叹号表示该组是必需的，并且至少产生一个值；即使组内项目的语法允许省略全部的值，也至少要保留一个值。
```

[ bold? smaller? ]!
```

以下均为该例的合法取值：

* `bold`
* `smaller`
* `bold smaller`

但以下不是合法取值：

* `bold` 和 `smaller`都没有：因为至少要出现一个。
* `smaller bold`：因为 `bold` 必须出现在 `smaller` 前面。
* `bold smaller bold`：因为 `bold` 只能出现一次。
总结
--

| 符号 | 名称 | 描述 | 示例 |
| --- | --- | --- | --- |
| 组合符号 |
| --- |
|  | 并置 | 各部分必须出现且按顺序出现 | `solid <length>` |
| `&&` | “与”组合符 | 各部分必须出现，但可以不按顺序 | `<length> && <string>` |
| `||` | “或”组合符 | 各部分至少出现一个，可以不按顺序 | `<'border-image-outset'> || <'border-image-slice'>` |
| `|` | “互斥”组合符 | 各部分恰好出现一个 | `smaller | small | normal | big | bigger` |
| `[ ]` | 方括号 | 强调优先级 | `bold [ thin && <length> ]` |
| 数量符号 |
|  | 无数量符号 | 恰好一次 | `solid` |
| `*` | 星号 | 零次、一次或多次 | `bold smaller*` |
| `+` | 加号 | 一次或多次 | `bold smaller+` |
| `?` | 问号 | 零次或一次（即可选） | `bold smaller?` |
| `{A,B}` | 大括号 | 至少`A`次，至多`B`次 | `bold smaller{1,3}` |
| `#` | 井号 | 一次或多次，但多次出现必须以逗号分隔 | `bold smaller#` |
| `!` | 叹号 | 组必须产生一个值 | `[ bold? smaller? ]!` |

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # value-defs |

参见
--

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


resize - CSS：层叠样式表

resize
======

CSS 属性 **`resize`** 用于设置元素是否可调整尺寸，以及可调整的方向。

尝试一下
----

`resize` 不适用于下列元素：

* 内联元素
* `overflow` 属性设置为 `visible` 的块元素
语法
--

```css
/\* 关键词值 \*/
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

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

`resize` 属性可指定为下列关键词值之一。

### 取值

`none`

元素不提供用户可控的调整其尺寸的方法。

`both`

元素显示可让用户调整其尺寸的机制，可沿水平和竖直方向调整尺寸。

`horizontal`

元素显示可让用户沿*水平*方向调整其尺寸的机制。

`vertical`

元素显示可让用户沿*竖直*方向调整其尺寸的机制。

`block`
实验性

元素显示可让用户沿*块向*（水平或竖直方向之一，取决于 `writing-mode` 和 `direction` 的值）调整其尺寸的机制。

`inline`
实验性

元素显示可让用户沿*行向*（水平或竖直方向之一，取决于 `writing-mode` 和 `direction` 的值）调整其尺寸的机制。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | elements with `overflow` other than `visible`, and optionally replaced elements representing images or videos, and iframes |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

resize =
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline

```

示例
--

### 禁用文本区域的尺寸调整

在很多浏览器中，`<textarea>` 元素默认可调整尺寸。你可以用 `resize` 属性改写此行为。

#### HTML

```html
<textarea>在此处输入一些文本。</textarea>
```

#### CSS

```css
textarea {
  resize: none; /\* 禁用尺寸调整 \*/
}
```

#### 结果

### 对任意元素使用 resize

你可以用 `resize` 属性使任意元素可调整尺寸。在下列示例中，一个可调整尺寸的 `<div>` 包含了一个可调整尺寸的段落（`<p>` 元素）。

#### HTML

```html
<div class="resizable">
  <p class="resizable">
    此段落可在各个方向上调整尺寸，这是因为在此元素上 CSS `resize` 属性设置为
    `both`。
  </p>
</div>
```

#### CSS

```css
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

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

#### 结果

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # resize |

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

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

参见
--

* `<textarea>`