font-palette - CSS：层叠样式表

font-palette
============

**`font-palette`** CSS 属性允许用户代理指定某个字体所包含众多调色板中的其中一个。用户还可以通过使用 @font-palette-values (en-US) @ 规则来覆盖调色板中的值或创建一个新的调色板。

语法
--

```css
/\* 使用字体定义的调色板 \*/
font-palette: normal;

/\* 使用用户定义的调色板 \*/
font-palette: --one;
```

### 值

`normal`

使用字体制作者设定的字体默认调色板或默认字形着色方式。如果使用了该项设置，会渲染字体中位于 0 号索引的调色板。

`light`

指定字体中第一个与“light”匹配的调色板，并作用于当前字体。某些字体包含可确定适用于浅色（接近白色）背景的元数据，如果一个字体没有该元数据，则 `light` 值的表现等同于 `normal`。

`dark`

指定字体中第一个与“dark”匹配的调色板，并作用于当前字体。某些字体包含可确定适用于深色（接近黑色）背景的元数据，如果一个字体没有该元数据，则该值的表现等同于 `normal`。

`<palette-identifier>`

允许使用 @font-palette-values (en-US) @ 规则指定字体调色板的自定义值。该值使用 <dashed-ident> (en-US) 格式指定。

形式定义
----

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

形式语法
----
```

font-palette =
  normal                |
  light                 |
  dark                  |
  <palette-identifier>  |
  <palette-mix()>

<palette-mix()> =
  palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )

<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

```

示例
--

### 指定暗色调色板

本示例允许在网页中指定第一个被字体制作者标记为 *dark* 的调色板，它在接近黑色的背景上显示效果最好。

```css
@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}
```

规范
--

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

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

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

参见
--

* `@font-palette-values` (en-US)
* `base-palette` (en-US) 描述符
* `font-family` (en-US) 描述符
* `override-colors` (en-US) 描述符


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

background-blend-mode
=====================

概述
--

`background-blend-mode` CSS 属性定义该元素的背景图片，以及背景色如何混合。

混合模式应该按`background-image` CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

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

语法
--
```

Formal syntax:
```
background-blend-mode =
  <mix-blend-mode>#

```

```
```

/* 单值 */
background-blend-mode: normal;

/* 双值，每个背景一个值 */
background-blend-mode: darken, luminosity;

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

### 值

`<blend-mode>`

一个定义混合的模式，可以有多个值，用逗号间隔。

示例
--
```

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

```js
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

规范
--

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

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

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

参见
--

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


font-size-adjust - CSS：层叠样式表

font-size-adjust
================

概述
--

`font-size-adjust` CSS 属性定义字体大小应取决于小写字母，而不是大写字母。在字体较小时，字体的可读性主要由小写字母的大小决定，通过此选项即可进行调整。

当`font-family`的首选字体不可用时，如果备选字体的尺寸比（小写字母的大小与字体大小的比）有较大的差别时，可读性可能会成为一大问题。

为了兼容于不支持 `font-size-adjust` 的浏览器，该属性的值应该被定义为 `font-size` 的值所要乘的系数。这意味着定义的值应该为首选字体的尺寸比。例如，样式表这样定义

```css
font-size: 14px;
font-size-adjust: 0.5;
```

的真实作用是定义小写字母的大小应该为 `7px` 高（0.5 × 14px）。

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

语法
--

```css
/\* 仍使用 font size 的值 \*/
font-size-adjust: none;

/\* 使用小写字母大小为 font size 一半大小的字体大小 \*/
font-size-adjust: 0.5;

font-size-adjust: inherit;
```

### 值

`none`

仅根据`font-size`属性决定字体大小。

`<number>`

根据使小写字母大小（根据字体的 x-height--西文字体设计中的基线与主线的距离--决定）为该值乘以`font-size`的结果定义字体。

数字应为`font-family`的首选字体的尺寸比（x-height 和字体大小的比）。这意味着当首选字体可用时，不论浏览器是否支持 font-size-adjust，都会显示文字为`font-size`的大小。

### 正式语法
```

font-size-adjust =
  none            |
  <number [0,∞]>

```

示例
--

查看在线演示

```css
p {
  font:
    12px Verdana,
    "DejaVu Sans",
    sans-serif;
  font-size-adjust: 0.58;
}
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 5 # font-size-adjust-prop |

`font-size-adjust` CSS 属性最初在 CSS 2 中被定义，但在 CSS 2.1 被放弃。后又被新添加至 CSS 3。

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

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

参见
--

* David Baron about font-size-adjust


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

::view-transition-old
=====================

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

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

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

**`::view-transition-old`** CSS 伪元素表示视图过渡的旧视图状态——即过渡前旧视图的静态屏幕截图。

在视图过渡期间，`::view-transition-old` 包含在相关的伪元素树上，如视图过渡过程中所述，前提是有一个旧视图状态需要表示。它只能是 `::view-transition-image-pair` 的子节点，并且它不会有任何子节点。

它是一个可替换元素，因此可以使用 `object-fit` 和 `object-position` 等属性进行操作。它的自然尺寸等于内容的大小。

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

```css
@keyframes -ua-view-transition-fade-out {
  to {
    opacity: 0;
  }
}

html::view-transition-old(\*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-name: -ua-view-transition-fade-out;
  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```

**备注：** 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-old`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的设置过渡伪元素和更新伪元素样式部分。

语法
--

```css
::view-transition-old(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` 可以是以下任何值之一：

`*`

使伪元素选择器匹配所有视图过渡组。

`root`

使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 `view-transition-name` 属性分配给特定视图过渡组的元素。

`<custom-ident>`

使伪元素选择器匹配（通过 `view-transition-name` 属性将 `<custom-ident>` 分配给元素而创建的）特定视图转换组。

示例
--

```css
figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-old |

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

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

参见
--

* View Transitions API
* 使用 View Transitions API 实现平滑、简单的过渡


-webkit-touch-callout - CSS：层叠样式表

-webkit-touch-callout
=====================

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

概述
--

`-webkit-touch-callout` 这个CSS 属性禁用了默认的 callout 展示，callout 是指当触摸并按住一个元素的时候出现的提示。

当在 iOS 上一直按住一个目标元素时，Safari 会展示一个关于这个链接的 callout 信息。`webkit-touch-callout`属性允许禁用掉这一行为。

语法
--
```

Formal syntax: default | none
```

```css
-webkit-touch-callout: default; /\* displays the callout \*/
-webkit-touch-callout: none; /\* disables the callout \*/

-webkit-touch-callout: initial;
-webkit-touch-callout: inherit;
-webkit-touch-callout: unset;
```

### 可能的值

`default`

此值表示显示默认的 callout

`none`

此值表示禁用 callout

示例
--

```css
.example {
  -webkit-touch-callout: none;
}
```

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

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


:blank - CSS：层叠样式表

:blank
======

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

**备注：** 使用 `:blank` 选择器被认为尚有一定风险，CSSWG 正在持续改进它。

详见 CSSWG issue #1967。

**`:blank`** CSS 伪类选择器选择用户输入为空的输入框，如 `<input>` 和 `<textarea>`)。

语法
--

Error: could not find syntax for this item规范
--

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

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

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

参见
--

* `:empty`
* `:-moz-only-whitespace`
非标准
 - The previous definition of `:blank`.


border - CSS：层叠样式表

border
======

概览
--

CSS 的 **`border`** 属性是一个用于设置各种单独的边界属性的简写属性。`border` 可以用于设置一个或多个以下属性的值：`border-width`、`border-style`、`border-color`。

尝试一下
----

和所有的简写属性一样，如果有缺省值会被设置成对应属性的初始值。同时需要注意设置 border 对`border-image`属性的影响，虽然 border 属性不能设置这个属性，但会把该属性重置为初始值 none。这使得我们可以用 border 属性去重置整个样式表中的 border 设置。因为 W3C 计划在未来的标准中保留该属性，因此建议使用该属性重置边框设定。

**备注：** 虽然`border-width`,、`border-style`和 `border-color` 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色，但 boder 属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。

### Borders vs. outlines

边界（`border`）和轮廓（`outline`）很相似。然而轮廓在以下方面与边界不同：

* 轮廓不占据空间，他们在元素内容之外绘制。
* 根据规范，轮廓不必为矩形，尽管通常是矩形。
语法
--

```css
/\* style \*/
border: solid;

/\* width | style \*/
border: 2px dotted;

/\* style | color \*/
border: outset #f33;

/\* width | style | color \*/
border: medium dashed green;

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

可以使用下面列出的一个，两个或三个值来指定 `border` 属性。值的顺序无关紧要。

**备注：** 如果边框的样式未定义，它将不可见。这是因为样式默认为 none。

### 取值

border-width

请看 `border-width`.

border-style

请看 `border-style`.

border-color

`<color>` 可以确定 border 的颜色。如果这个值没有设置，它的默认值是元素的 `color` 属性值（是文字颜色而非背景色）。请看 `border-color`。

### 形式语法
```

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

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

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

```

示例
--

### 设置粉色外边界

#### HTML

```html
<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>
```

#### CSS

```css
div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}
```

#### 结果

规范
--

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

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

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


<length> - CSS：层叠样式表

<length>
========

长度 **`<length>`** 是用于表示距离尺寸的 CSS 数据类型。许多 CSS 属性会用到长度，比如 `width`、`margin`、`padding`、`font-size`、`border-width` 和 `text-shadow`。

**备注：** 虽然 `<percentage>` 值也是 CSS 维度，并且可以在接受 `<length>` 值的某些相同属性中使用，但它们本身不是 `<length>` 值。具体请参阅`<length-percentage>`。

语法
--

`<length>` 数据类型由一个 `<number>` 和一个长度单位构成。与所有 CSS 维度一样，单位的字面值与数字之间没有空格。数字为 `0` 时，长度单位是可选的。

>
> 有些属性支持使用负数的长度值，而有些不支持
>
>
>

### 单位

#### 相对长度单位

相对长度代表着以其他距离为单位的一种尺寸。这个单位可以是指定字符的大小，行高，或者是 viewport 的大小。

##### 字体相对长度

字体的相对长度指的是根据一个特定字符的大小或当前字符所在元素的父元素所定义的字符大小来定义长度值。

**备注：** 这些相对单位，尤其是 em 和 rem, 经常被用于满足即使用户更改字体大小，也可以保持页面的垂直阅读节奏可拓展布局中

`cap`
实验性

表示元素字体 `font` 的“上限高度”（cap height，大写字母的标称高度（nominal height））。

`ch`

 这一单位代表元素所用字体 `font` 中“0”这一字形的宽度（"0"，Unicode 字符 U+0030），更准确地说，是“0”这一字形的预测尺寸（advance measure）。
 如果无法确定“0”字形的大小，则必须假定其宽为 `0.5em`，高为 `1em`。

`em`

相对长度单位，这个单位表示元素的 `font-size` 的计算值。如果用在`font-size` 属性本身，它则表示元素*继承*的 `font-size` 值。

`ex`

这个单位表示元素`font`的 x-height 。在含有“X”字母的字体中，它是该字体的小写字母的高度；对于很多字体来说，`1ex ≈ 0.5em`。

`ic`
实验性

等于在用于渲染的字体中找到的“水”（CJK 表意文字 "水"，U + 6C34）字形的使用预先测量（used advance measure）。

`lh`
实验性

等于使用它的元素的 `line-height` 属性的计算值，转换为绝对长度。

`rem`

这个单位代表根元素（通常为`<html>` 元素）的 `font-size` 大小。当用在根元素的 `font-size` 上面时，它代表了它的初始值。

`rlh`
实验性

等于根元素行高 `line-height` 的计算值。当用于设置根元素的行高 `line-height` 或是字体大小 `font-size` 时，该 rlh 指的是根元素行高 `line-height` 或字体大小 `font-size` 的初始值。

##### 视口比例的长度

视口百分比长度定义相对于 viewport 的大小的 `<length>` 值，即文档的可见部分。视口长度在 `@page` 声明块中无效。

`vh`

视口的初始包含块的高度的 1%。

`vw`

视口的初始包含块的宽度的 1%。

`vi`
实验性

等于初始包含块大小的 1%，在根元素的行内轴方向上。

`vb`
实验性

等于初始包含块大小的 1%，在根元素的区块轴方向上。

`vmin`

视口高度 `vw` 和宽度 `vh` 两者之间的最小值。

`vmax`

视口高度 `vw` 和宽度 `vh` 两者之间的最大值。

#### 绝对长度单位

当输出介质的物理性质已知时，如用于打印布局，绝对长度单位代表一个物理度量单位。这是通过：将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个，来实现的。对于低分辨率的设备（如屏幕），高分辨率设备（如打印机），该锚定是不同的。

对于低 dpi 设备，单位 px 表示物理参考像素;其他单位是相对于它定义的。因此，1 in 定义为 96px，等于 72pt。此定义的后果是，在此类设备上，以英寸（in）、厘米（cm）或 毫米（mm）表示的尺寸不需要与同名的物理单位的大小相匹配。

对于高 dpi 设备，英寸（in）、厘米（cm）和毫米（mm）与物理设备相同。因此，px 单位是相对于它们定义的（1/96 of 1 inch）。

**备注：** 很多用户选择增加用户代理 user agent 的字体大小以提高文本可读性。因为绝对长度是固定值，无法根据用户的设置进行缩放，因此会降低页面友好性，因此在设置字体大小 `font-size` 相关的长度值时，最好优先选择使用相对长度单位，比如 `em` 或 `rem`。

**译者注：** 一些浏览器还支持设置最低字体大小。常见的最低字体大小限制为 9px 到 12px，

`px`

 一像素（pixel）。对于普通的屏幕，通常是一个设备像素（点）。
 对于*打印机*和*高分辨率屏幕*，一个 CSS 像素往往占多个设备像素。一般来说，每英寸的像素的数量保持在 96 左右， `1px` = `1in` 的 96 分之一。

`cm`

一厘米。 `1cm = 96px / 2.54`。

`mm`

一毫米。 `1mm = 1/10 * 1cm`。

`Q`
实验性

四分之一毫米。`1Q = 1/40 * 1cm`。

`in`

一英寸。`1in = 2.54cm = 96px`。

`pc`

一**十二点活字**（pica），六分之一英寸。 `1pc = 12pt = 1/6 * 1in`。

`pt`

一磅（point），72 分之一英寸。`1pt = 1/12 * 1pc = 1/72 * 1in`。

`mozmm`
非标准
, 在 Firefox 59 中被移除

一个实验单位，无论显示器的尺寸或分辨率如何，都会尝试在一毫米处进行渲染。很少会用到，但可能在移动设备上特别有用。

插值
--

当包含动画效果时，动画中`<length>`的值是由计算出的值使用插值法得出的浮点实数。插值的速度由动画的定时函数决定。

示例
--

### 长度单位的比较

下面的示例为你提供了一个输入框，在框中输入一个`<length>`值（比如：`300px`, `50%`, `30vw`），按下`Return`，一个由你设置宽度的结果条将出现在下方。

这允许你对比不同长度单位的效果。

#### HTML

```html
<div class="outer">
  <div class="input-container">
    <label>Enter width:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>
```

#### CSS

```css
html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.5),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}

.result {
  height: 20px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.5),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}
```

#### JavaScript

```js
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});
```

#### 结果

规范
--

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

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

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

参见
--

* CSS 属性值与单位教程
* CSS 属性值与单位参考
* 框盒模型


page-break-after - CSS：层叠样式表

page-break-after
================

**`page-break-after`** CSS 属性调整当前元素之后的分页符。

此属性适用于生成一个盒子的块元素。它不适用于不会生成一个盒子的空 `<div>`。
```

/* Keyword values */
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

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

**备注：** 这个属性正在被更通用的 `break-after` 取代。这个新的属性也处理列和区域中断，并在语法上兼容 `page-break-after`。

在使用 `page-break-after` 之前，请检查是否可以使用 `break-after` 代替。在将来， `page-break-after` 将只是它的一些值的别名。

语法
--

```css
/\* Keyword values \*/
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

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

### Values

`auto`

初始值。自动分页符（既不强制也不禁止）。

`always`

始终在元素后强制分页。

`avoid`

避免在元素后出现分页符。

`left`

在元素之后足够的分页符，一直到一张空白的左页为止。

`right`

在元素之后足够的分页符，一直到一张空白的右页为止。

`recto`
实验性

If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.

`verso`
实验性

If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.

### Formal syntax
```

page-break-after =
  auto     |
  always   |
  avoid    |
  left     |
  right    |
  inherit

```

Examples
--------

```css
/\* move to a new page after footnotes \*/
div.footnotes {
  page-break-after: always;
}
```

Specification
-------------

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

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

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

See also
--------

* `page-break-before`, `page-break-inside`
* `orphans`, `widows`


<time-percentage> - CSS：层叠样式表

<time-percentage>
=================

CSS 数据类型`<time-percentage> 的值`可以表示为时间或百分比。

Syntax
------

有关此类型允许的各个语法的详细信息，请参阅`<time>`和`<percentage>`的文档。

Use in calc()
-------------

如果将`<time percentage>`指定为允许的类型，这意味着该百分比解析为时间，因此可以在`calc()`表达式中使用。

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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


border-color - CSS：层叠样式表

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

概括
--

CSS 属性 **`border-color`** 是一个用于设置元素四个边框颜色的快捷属性： `border-top-color`、`border-right-color`、`border-bottom-color`、`border-left-color`。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-top-color`: `currentcolor`
* `border-right-color`: `currentcolor`
* `border-bottom-color`: `currentcolor`
* `border-left-color`: `currentcolor`
 |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-bottom-color`: computed color
* `border-left-color`: computed color
* `border-right-color`: computed color
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-color`: a color
* `border-left-color`: a color
* `border-right-color`: a color
* `border-top-color`: a color
 |

语法
--

```css
/\* border-color: color; 单值语法 \*/
border-color: red;

/\* border-color: vertical horizontal; 双值语法\*/
border-color: red #f015ca;

/\* border-color: top horizontal bottom; 三值语法 \*/
border-color: red yellow green;

/\* border-color: top right bottom left; 四值语法 \*/
border-color: red yellow green blue;

border-color: inherit;
```

### 取值

`color`

使用 `<color>` 来表示四个边框的颜色，仅用于单值语法。

`horizontal`

使用 `<color>` 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。

`vertical`

使用 `<color>` 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。

`top`

使用 `<color>` 来表示上边框的颜色，仅用于三值或四值语法。

`bottom`

使用 `<color>` 来表示下边框的颜色，仅用于三值或四值语法。

`right`

使用 `<color>` 来表示右边框的颜色，仅用于四值语法。

`left`

使用 `<color>` 来表示左边框的颜色，仅用于四值语法。

`inherit`

这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。

### 语法定义
```

border-color =
  [ <color> | <image-1D> ]{1,4}

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

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

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

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

```

Complete\_border-color\_usage2
------------------------------

### HTML

```html
<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>
```

### CSS

```css
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}
```

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |

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

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

其他参考
----

* 与 border-color 相关的 CSS 属性：`border`, `border-top-color`, `border-right-color`, `border-bottom-color`, `border-left-color`,
* 与边框相关的其他 CSS 属性：`border-width`, `border-style`


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

animation-timing-function
=========================

**`animation-timing-function`** CSS 属性设置动画在每个周期的持续时间内如何进行。

尝试一下
----

使用简写属性 `animation` 一次性设置所有动画属性通常很方便。

语法
--

```css
/\* 关键字值 \*/
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/\* 函数值 \*/
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

/\* Steps 函数关键字 \*/
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/\* 多个动画 \*/
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

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

**备注：** 当你在 `animation-*` 属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 `animation-name` 属性中指定的动画。有关更多信息，请参阅设置多个动画属性值。

### 值

`<easing-function>`

`animation-name` 确定动画对应的缓动函数。

非阶跃（non-step）关键字值（如 ease、linear、ease-in-out 等）代表了固定的四点值的三次贝塞尔曲线，而 cubic-bezier() 函数允许使用非预定义值。而阶跃时间函数将输入时间分成一定数量相等的间隔，由步数和步骤位置定义。

`ease`

等同于 `cubic-bezier(0.25, 0.1, 0.25, 1.0)`，即默认值，表示动画在中间加速，在结束时减速。。

`linear`

等同于 `cubic-bezier(0.0, 0.0, 1.0, 1.0)`，表示动画以匀速运动。

`ease-in`

等同于 `cubic-bezier(0.42, 0, 1.0, 1.0)`，表示动画一开始较慢，随着动画属性的变化逐渐加速，直至完成。

`ease-out`

等同于 `cubic-bezier(0, 0, 0.58, 1.0)`，表示动画一开始较快，随着动画的进行逐渐减速。

`ease-in-out`

等同于 `cubic-bezier(0.42, 0, 0.58, 1.0)`，表示动画属性一开始缓慢变化，随后加速变化，最后再次减速变化。

`cubic-bezier(p1, p2, p3, p4)`

开发者自定义的三次贝塞尔曲线，其中 p1 和 p3 的值必须在 0 到 1 的范围内。

`steps(n, <jumpterm>)`

按照 n 个定格在过渡中显示动画迭代，每个定格等长时间显示。例如，如果 n 为 5，则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停，或者在动画的 0% 和 100% 之间设置 5 个定格，又或是在包括 0% 和 100% 的情况下设置 5 个定格（在 0%、25%、50%、75% 和 100% 处）取决于使用以下跳跃项之一：

`jump-start`

表示一个左连续函数，因此第一个跳跃发生在动画开始时。

`jump-end`

表示一个右连续函数，因此最后一个跳跃发生在动画结束时。

`jump-none`

两端都没有跳跃。相反，在 0% 和 100% 标记处分别停留，每个停留点的持续时间为总动画时间的 1/n。

`jump-both`

在 0% 和 100% 标记处停留，有效地在动画迭代过程中添加一个步骤。

`start`

等同于 `jump-start`。

`end`

等同于 `jump-end`。

`step-start`

等同于 `steps(1, jump-start)`。

`step-end`

等同于 `steps(1, jump-end)`。

描述
--

在 `@keyframes` 规则中，可以在单个关键帧上指定时间函数。如果没有在关键帧上指定 `animation-timing-function`，则该关键帧将使用应用动画的元素的 `animation-timing-function` 属性相应的值。

在关键帧内，`animation-timing-function` 是一个 at-rule-specific 描述符，而不是同名的属性。时间并没有被动画化。相反，关键帧的时间函数会在逐个属性的基础上应用，从指定该函数的关键帧开始，直到下一个指定该属性的关键帧，或者直到动画结束（如果没有后续关键帧指定该属性）。因此，在 `100%` 或 `to` 关键帧上指定的 `animation-timing-function` 永远不会被使用。

形式定义
----

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

形式语法
----
```

animation-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 > div[class] {
  animation-name: changeme;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  margin-bottom: 4px;
}
@keyframes changeme {
  0% {
    min-width: 12em;
    width: 12em;
    background-color: black;
    border: 1px solid red;
    color: white;
  }
  100% {
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
  }
}
```

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

### 阶跃动画示例
```

<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="start">start</div>
  <div class="end">end</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>
```

```
.parent > div[class] {
  animation-name: changeme;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  margin-bottom: 4px;
}
@keyframes changeme {
  0% {
    min-width: 12em;
    width: 12em;
    background-color: black;
    border: 1px solid red;
    color: white;
  }
  100% {
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
  }
}
```

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

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-timing-function |

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

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

参见
--

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


letter-spacing - CSS：层叠样式表

letter-spacing
==============

`CSS` 的 `letter-spacing` 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。`letter-spacing` 的正值会导致字符分布得更远，而 `letter-spacing` 的负值会使字符更接近。

尝试一下
----

语法
--

```css
/\* Keyword value \*/
letter-spacing: normal;

/\* <length> values \*/
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/\* Global values \*/
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
```

### 值

`normal`

此间距是按照当前字体的正常间距确定的。和 `0` 不同的是，`normal` 会让用户代理调整文字之间空间来对齐文字。

`<length>`

指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。

### 形式语法
```

letter-spacing =
  normal    |
  <length>

```

示例
--

### HTML

```html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
```

### CSS

```css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}
```

### 结果

可解决的问题
------

一个很大的正或负的 `letter-spacing`值会将应用这个样式的单词变为不可读的。给文本 `letter-spacing` 属性应用了一个很大的正值，字母之间的距离会很远，以至于文本中的单词将显示为一系列单独的，无有任何关联的字母。给文本 `letter-spacing` 属性应用了一个很大的负值，字母将会互相重叠到一个点，在这个点上单词可能无法识别了。

最佳的易辨认的字母间距（letter-spacing）必须根据具体情况来确定，因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。

无障碍考量
-----

A large positive or negative `letter-spacing` value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

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

| Specification |
| --- |
| CSS Text Module Level 3 # letter-spacing-property |

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | an optimum value consisting of either an absolute length or the keyword `normal` |
| Animation type | a length |

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

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

参见
--

* `font-kerning`


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

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

CSS 属性 **`border-bottom-width`** 设置一个元素的底部边框宽度。

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

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

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

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

Syntax
------

### Values

<`br-width>`

定义边框宽度，取值为非负的宽度值`<length>`或关键字。如果是关键字的话，其取值必须是以下之一：

| `thin` |  | 细边框 |
| --- | --- | --- |
| `medium` |  | 中等边框 |
| `thick` |  | 粗边框 |

**备注：** 因为规范没有具体定义每个关键字对应的宽度值，所以实际显示效果依赖于实现。但是宽度值的取值一定遵循 `thin ≤ medium ≤ thick` 的规律且在单文档中是常数。

### Formal syntax
```

border-bottom-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-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}
```

### Result

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

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

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-top-width`, and `border-width`.
* The other border-bottom-related CSS properties: `border`, `border-bottom`, `border-bottom-style`, and `border-bottom-color`.


box-decoration-break - CSS：层叠样式表

box-decoration-break
====================

**`box-decoration-break`** 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

尝试一下
----

指定的值将影响元素以下属性的表现：

* `background`
* `border`
* `border-image`
* `box-shadow`
* `clip-path`
* `margin`
* `padding`
语法
--

```css
/\* Keyword values \*/
box-decoration-break: slice;
box-decoration-break: clone;

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

`box-decoration-break` 的合法值包括下列几种：

### 值

`slice`

元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段。请注意，假设框对于每个片段可以是不同的，因为如果中断发生在行内方向，则它使用自己的高度，如果中断发生在块方向，则它使用自己的宽度。有关详细信息，请参阅 CSS 规范。

`clone`

每个框片段与指定的边框、填充和边距独立呈现。`border-radius`、`border-image`、`box-shadow`独立地应用于每个片段，每个片段的背景也是独立绘制的，这意味着使用 `background-repeat``: no-repeat` 的背景图片仍然可能重复多次。

形式定义
----

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

形式语法
----
```

box-decoration-break =
  slice  |
  clone

```

示例
--

### 行内盒子片段

包含换行符的内联元素：

```css
.example {
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    8px 8px 10px 0px deeppink,
    -5px -5px 5px 0px blue,
    5px 5px 15px 0px yellow;
  padding: 0em 1em;
  border-radius: 16px;
  border-style: solid;
  margin-left: 10px;
  font: 24px sans-serif;
  line-height: 2;
}

...
<span class="example">The<br>quick<br>orange fox</span>
```

... 效果：

![A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.](/zh-CN/docs/Web/CSS/box-decoration-break/box-decoration-break-inline-slice.png)

添加 `box-decoration-break: clone` 样式之后：

```css
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
```

... 效果：

![A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example](/zh-CN/docs/Web/CSS/box-decoration-break/box-decoration-break-inline-clone.png)

你可以尝试这两个例子。

下面是一个使用大圆角值的内联元素示例。第二个“iM”在“i”和“M”之间有一个分界线，作为比较，第一个“iM”是没有换行符的。请注意，如果你将两个片段的呈现水平地排列在一起，就会导致非分段呈现。

![A screenshot of the rendering of the second inline element example.](/zh-CN/docs/Web/CSS/box-decoration-break/box-decoration-break-slice-inline-2.png)

你可以尝试这个例子。

### 块状盒子片段

与上述样式相似且没有碎片的块元素的表现：

![A screenshot of the rendering of the block element used in the examples without any fragmentation.](/zh-CN/docs/Web/CSS/box-decoration-break/box-decoration-break-block.png)

将上述块分割成三列，表现为：

![A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.](/zh-CN/docs/Web/CSS/box-decoration-break/box-decoration-break-block-slice.png)

注意，垂直堆叠这些部分将导致非碎片渲染。

现在，同样的例子，但使用 `box-decoration-break` 的效果：

![A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.](/zh-CN/docs/Web/CSS/box-decoration-break/box-decoration-break-block-clone.png)

请注意，每个片段都具有相同的 border、box-shadow 和 background。

你可以尝试这个例子。

规范
--

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # break-decoration |

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

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

参见
--

* `break-after`、`break-before` (en-US)、`break-inside`


animation-fill-mode - CSS：层叠样式表

animation-fill-mode
===================

CSS 属性 **`animation-fill-mode`** 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

尝试一下
----

使用简写属性 `animation` 一次性设置所有动画属性通常很方便。

语法
--

```css
/\* Single animation \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* Multiple animations \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
```

### 值

`none`

当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

`forwards`

目标将保留由执行期间遇到的最后一个关键帧 (en-US)计算值。最后一个关键帧取决于`animation-direction`和`animation-iteration-count`的值：

| `animation-direction` | `animation-iteration-count` | last keyframe encountered |
| --- | --- | --- |
| `normal` | even or odd | `100%` or `to` |
| `reverse` | even or odd | `0%` or `from` |
| `alternate` | even | `0%` or `from` |
| `alternate` | odd | `100%` or `to` |
| `alternate-reverse` | even | `100%` or `to` |
| `alternate-reverse` | odd | `0%` or `from` |

`backwards`

动画将在应用于目标时立即应用第一个关键帧中定义的值，并在`animation-delay`期间保留此值。第一个关键帧取决于`animation-direction`的值：

| `animation-direction` | first relevant keyframe |
| --- | --- |
| `normal` or `alternate` | `0%` or `from` |
| `reverse` or `alternate-reverse` | `100%` or `to` |

`both`

动画将遵循`forwards`和`backwards`的规则，从而在两个方向上扩展动画属性。

**备注：** 当你在`animation-*`属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 `animation-name` 属性中指定的动画。有关更多信息，请参阅设置多个动画属性值。

### 正式语法
```

animation-fill-mode =
  <single-animation-fill-mode>#

<single-animation-fill-mode> =
  none       |
  forwards   |
  backwards  |
  both

```

示例
--

你可以在以下示例中看到 `animation-fill-mode` 的效果。它演示了如何对于运行无限时间的动画，可以使其保持最终状态而不是恢复到原始状态（这是默认状态）。

### HTML

```html
<p>Move your mouse over the gray box!</p>
<div class="demo">
  <div class="growsandstays">This grows and stays big.</div>
  <div class="grows">This just grows.</div>
</div>
```

### CSS

```css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
```

更多示例请查看 CSS 动画 。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-fill-mode |

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

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

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

参见
--

* Using CSS animations
* JavaScript `AnimationEvent` (en-US) API


Alternative style sheets - CSS：层叠样式表

Alternative style sheets
========================

Specifying **alternative style sheets** in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.

在网页中指定可替代样式表允许用户为网页选择他们喜欢的样式。

Firefox lets the user select the stylesheet using the *View > Page Style* submenu. Internet Explorer also supports this feature (beginning with IE 8), also accessed from *View > Page Style*. Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.

Firefox 允许用户通过菜单栏中 查看 > 页面样式 选择样式表。Internet Explorer 也支持这一功能（从 IE8 开始）（菜单栏 查看 > 页面样式）。网页也可提供自己的用户界面让用户

在 Firefox 和 Internet Explorer（从 IE8（6？）开始）中，用户可以通过菜单栏中的 查看 > 页面样式 来选择网页的样式。网页也可以提供选择样式的界面。

An example: specifying the alternative stylesheets
--------------------------------------------------

示例：提供可替代样式表
-----------

The alternate stylesheets are commonly specified using a `<link>` element with `rel="alternate stylesheet"` and `title="..."` attributes. For example:

一般使用<`<link>`>指定可替换样式表。在这个标签中指定`rel="alternate stylesheet"` 属性和 `title="..."`属性

```html
<link href="reset.css" rel="stylesheet" type="text/css" />

<link
 href="default.css"
 rel="stylesheet"
 type="text/css"
 title="Default Style" />
<link
 href="fancy.css"
 rel="alternate stylesheet"
 type="text/css"
 title="Fancy" />
<link
 href="basic.css"
 rel="alternate stylesheet"
 type="text/css"
 title="Basic" />
```

In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the *Page Style* submenu, with "Default Style" pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.

在此例中，“页面样式”菜单中会出现“Default Style”、“Fancy”和“Basic”的选项。“Default Style”默认选中。如果用户选择一个不同的样式，浏览器就使用用户选择的样式。

No matter what style is selected, the rules from the reset.css stylesheet will always be applied.

无论用户选择何种样式，reset.css 总会被应用。

### 尝试

Click here for a working example you can try out.

点击此处进入示例。

细节
--

网页中的样式表分为三类：

Any stylesheet in a document falls into one of the following categories:

* **Persistent** (no `rel="alternate"`, no `title=""`): always applies to the document.
* **Preferred** (no `rel="alternate"`, with `title="..."` specified): applied by default, but disabled if an alternate stylesheet is selected. **There can only be one preferred stylesheet**, so providing stylesheets with different title attributes will cause some of them to be ignored. See Correctly Using Titles With External Stylesheets for a more detailed discussion.
* **Alternate** (`rel="alternate stylesheet"`, `title="..."` must be specified): disabled by default, can be selected.

When style sheets are referenced with a `title` attribute on the <link rel="stylesheet"> or `<style>` element, the title becomes one of the choices offered to the user. Style sheets linked with the same `title` are part of the same choice. Style sheets linked without a `title` attribute are always applied.

Use `rel="stylesheet"` to link to the default style, and `rel="alternate stylesheet"` to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.

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

| Specification |
| --- |
| HTML Standard # rel-alternate |
| HTML Standard # the-link-is-an-alternative-stylesheet |
| HTML Standard # attr-style-title |
| HTML Standard # attr-meta-http-equiv-default-style |
| CSS Object Model (CSSOM) # css-style-sheet-collections |

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

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


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

:focus-within
=============

**`:focus-within`** CSS 伪类表示当元素或其任意后代元素被聚焦时，将匹配该元素。换言之，它表示 `:focus` 伪类匹配到该元素自身或它的后代时，该伪类生效。（这也包括 shadow 树中的后代元素。）

尝试一下
----

这个选择器非常有用，举个常见的例子，当用户聚焦于一个 `<input>` 字段时，可以用它来突出显示整个 `<form>` 容器。

语法
--

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

示例
--

此例子中，当表单某个文本输入框获得焦点后，表单会被设置颜色样式。

### HTML

```html
<p>试试在这个表单中输入点什么。</p>

<form>
  <label for="given\_name">给定名称：</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">家庭名称：</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS

```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### 结果

规范
--

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

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

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

参见
--

* `:focus`
* `:focus-visible`
* 使用 focus-within 选择器吸引用户的注意力


box-shadow - CSS：层叠样式表

box-shadow
==========

CSS **`box-shadow`** 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

尝试一下
----

你几乎可以在任何元素上使用`box-shadow`来添加阴影效果。如果元素同时设置了 `border-radius`属性，那么阴影也会有圆角效果。多个阴影在 z 轴上的顺序和多个 text shadows 规则相同 (第一个阴影在最上面)。

Box-shadow generator 是一个允许你生成 `box-shadow` 的交互式工具。

语法
--

```css
/\* x 偏移量 | y 偏移量 | 阴影颜色 \*/
box-shadow: 60px -16px teal;

/\* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 \*/
box-shadow: 10px 5px 5px black;

/\* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 \*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/\* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 \*/
box-shadow: inset 5em 1em gold;

/\* 任意数量的阴影，以逗号分隔 \*/
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

/\* 全局关键字 \*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
```

向元素添加单个 box-shadow 效果时使用以下规则：

* 当给出两个、三个或四个 `<length>`值时。
    + 如果只给出两个值，那么这两个值将会被当作 `<offset-x><offset-y>` 来解释。
    + 如果给出了第三个值，那么第三个值将会被当作`<blur-radius>`解释。
    + 如果给出了第四个值，那么第四个值将会被当作`<spread-radius>`来解释。
* 可选，`inset`关键字。
* 可选，`<color>`值。

若要对同一个元素添加多个阴影效果，请使用逗号将每个阴影规则分隔开。

### 取值

`inset`

 如果没有指定`inset`，默认阴影在边框外，即阴影向外扩散。
 使用 `inset` 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。

`<offset-x>` `<offset-y>`

 这是头两个 `<length>` 值，用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的，只不过 y 垂直方向向下。 `<offset-x>` 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。 `<offset-y>` 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。可用单位请查看 `<length>` 。
 如果两者都是 0，那么阴影位于元素后面。这时如果设置了`<blur-radius>` 或`<spread-radius>` 则有模糊效果。需要考虑 `inset`

`<blur-radius>`

这是第三个 `<length>` 值。值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为 0，此时阴影边缘锐利。本规范不包括如何计算模糊半径的精确算法，但是，它详细说明如下：

>
> 对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。 （译者注：对此有兴趣的可以了解下数字图像处理的模糊算法。）
>
>
>

`<spread-radius>`

这是第四个 `<length>` 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为 0，此时阴影与元素同样大。需要考虑 `inset`

`<color>`

相关事项查看 `<color>` 。如果没有指定，则由浏览器决定——通常是`color`的值，不过目前 Safari 取透明。

### 合成

将 none 看做是长度为 0 的列表。

列表中的每个阴影通过`color`组件（作为颜色），以及 x，y，blur，（合适的时候）加上 spread 组件（作为长度）进行合成。对于每个阴影，如果两个输入的阴影都是 inset 或者都不是 inset，那么要添加的阴影必须考虑已存在的阴影。如果任何一对输入阴影中，一个是 inset，另一个不是 inset，那么整个阴影列表就是不可合成的。如果阴影列表有不同的长度，那么较短的列表会在尾部补上这类阴影：颜色透明，所有长度为 0，inset 还是非 inset 同较长的列表。

### 正规文法
```

box-shadow =
  <spread-shadow>#

<spread-shadow> =
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?

```

例子
--

### 设置三种阴影

第一个例子中，包括了三种 shadow，内置的阴影，常规的下沉阴影，和一个 2 个像素宽度的 border 式的阴影 (可以用 `outline` 来替代第三种)。

#### HTML

```html
<blockquote>
  <q
 >You may shoot me with your words,<br />
    You may cut me with your eyes,<br />
    You may kill me with your hatefulness,<br />
    But still, like air, I'll rise.</q
 >
  <p>— Maya Angelou</p>
</blockquote>
```

#### CSS

```css
blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgba(0, 0, 0, 0.1),
    0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
```

### 设置偏移量和 blur 为零

#### HTML

```html
<div><p>Hello World</p></div>
```

#### CSS

```css
p {
  box-shadow:
    0 0 0 2em #f4aab9,
    0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}
```

当 `x-offset`、`y-offset` 和 `blur` 都是 0，盒阴影将是一个四边都是一样长度的带有颜色的`outline`。当设置了多个阴影时，阴影绘制由最后一个开始，故第一个设置的阴影将覆盖在后设置的阴影之上。当 `border-radius` 设置为 0 时（也是其默认值），阴影的四角将没有弧度。当我们设置了 `border-radius` 为其他不为 0 的值时，阴影的四角也随之形成弧度。

我们通常在元素上增加一个大小为最大阴影宽度的`margin`值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的`border`上。`box-shadow`属性不会影响到盒模型的构成。

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # box-shadow |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | any length made absolute; any specified color computed; otherwise as specified |
| Animation type | a shadow list |

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

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

参见
--

* `<color>` 数据类型
* 其他与 color 相关的属性：`color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color` (en-US), `caret-color`, and `column-rule-color`
* 使用 CSS 给 HTML 元素添加颜色


atan() - CSS：层叠样式表

atan()
======

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

语法
--

```css
/\* 单个 <number> 值 \*/
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));

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

### 参数

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

`number`

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

### 返回值

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

* 若 `number` 为 `0⁻`，则结果为 `0⁻`。
* 若 `number` 为 `+∞`，则结果为 `90deg`。
* 若 `number` 为 `-∞`，则结果为 `-90deg`。

即：

* `atan(-infinity)` 表示 `-90deg`。
* `atan(-1)` 表示 `-45deg`。
* `atan(0)` 表示 `0deg`。
* `atan(1)` 表示 `45deg`。
* `atan(infinity)` 表示 `90deg`。
### 形式语法
```

<atan()> =
  atan( <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

```

示例
--

### 旋转元素

由于 `atan()` 函数返回 `<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(atan(-99999));
}
div.box-2 {
  transform: rotate(atan(-1));
}
div.box-3 {
  transform: rotate(atan(0));
}
div.box-4 {
  transform: rotate(atan(1));
}
div.box-5 {
  transform: rotate(atan(99999));
}
```

#### 结果

规范
--

| 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()`
* `asin()`
* `acos()`
* `atan2()`


::view-transition-image-pair - CSS：层叠样式表

::view-transition-image-pair
============================

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

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

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

**`::view-transition-image-pair`** CSS 伪元素表示一个视图过渡的旧视图状态和新视图状态的容器——即过渡前和过渡后的状态。

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

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

```css
html::view-transition-image-pair(\*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}
```

默认情况下，`::view-transition-image-pair` 在视图过渡样式表中设置了 `isolation: isolate`，以便其子元素可以使用非正常混合模式进行混合，而不会影响其他视觉输出。

语法
--

```css
::view-transition-image-pair(<pt-name-selector>) {
  /\* ... \*/
}
```

`<pt-name-selector>` 可以是以下任何值之一：

`*`

使伪元素选择器匹配所有视图过渡组。

`root`

使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 `view-transition-name` 属性分配给特定视图过渡组的元素。

`<custom-ident>`

使伪元素选择器匹配（通过 `view-transition-name` 属性将 `<custom-ident>` 分配给元素而创建的）特定视图转换组。

示例
--

```css
::view-transition-image-pair(root) {
  isolation: auto;
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |

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

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

参见
--

* View Transitions API
* 使用 View Transitions API 实现平滑、简单的过渡


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

::-webkit-progress-bar
======================

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

概述
--

**`::-webkit-progress-bar`** CSS 伪元素 选择 `<progress>` 元素的未完成部分。 `::-webkit-progress-value` 选择完成的部分。**`::-webkit-progress-bar`** 是`::-webkit-progress-inner-element` 伪元素的子元素，同时是 `::-webkit-progress-value` 伪元素的父元素。

**备注：** 为了能让`::-webkit-progress-value`起作用，需要添加 CSS `-webkit-appearance` (en-US) 至 `<progress>` 元素。

示例
--

### CSS

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

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

### HTML

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

### 结果

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

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

规范
--

没有规范。这是一个 WebKit/Blink 独有的规范。

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

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

参见
--

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


CSS 逻辑属性与逻辑值 - CSS：层叠样式表

CSS 逻辑属性与逻辑值
============

**CSS 逻辑属性与逻辑值**这一 CSS 模块引入了逻辑属性和逻辑值，由此得以通过逻辑的——而不是实体的——方向与尺度映射控制布局。

此模块也为之前在 CSS 2.1 中定义的属性定义了逻辑属性和逻辑值。逻辑属性定义了在相对方向下与对应的实体属性相等价的属性。

### 块向与行向

逻辑属性和逻辑值用抽象术语*块向*和*行向*描述其流向。这些术语的实体含义取决于书写模式。

块向尺度

与行内文本流向垂直的方向上的尺度，如横排书写模式中的竖直尺度，以及竖排书写模式中的水平尺度。对于标准的英文文本，此尺度指竖直尺度。

行向尺度

与行内文本流向平行的方向上的尺度，如横排书写模式中的水平尺度，以及横排书写模式中的竖直尺度。对于标准的英文文本，此尺度指水平尺度。

参考
--

### 尺寸属性

* `block-size`
* `inline-size`
* `max-block-size` (en-US)
* `max-inline-size`
* `min-block-size`
* `min-inline-size`
### 用于外边距、边框和内边距的属性

* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-color`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-start-start-radius`
* `border-start-end-radius`
* `border-end-start-radius`
* `border-end-end-radius`
* `border-style`
* `border-width`
* `margin`（`logical`
实验性
 关键词）
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `padding`（`logical`
实验性
 关键词）
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
### 用于浮动和定位的属性

* `clear`（`inline-end` 和 `inline-start` 关键词）
* `float`（`inline-end` 和 `inline-start` 关键词）
* `inset`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
### 用于尺寸局限的属性

* `contain-intrinsic-block-size`
* `contain-intrinsic-inline-size`
### 其他属性

* `caption-side`（`inline-end` 和 `inline-start` 关键词）
* `overflow-block`
* `overflow-inline`
* `overscroll-behavior-block` (en-US)
* `overscroll-behavior-inline` (en-US)
* `resize`（`block` 和 `inline` 关键词）
* `text-align`（`end` 和 `start` 关键词）
### 弃用属性

* `offset-block-end`
非标准

已弃用
（现为 `inset-block-end`）
* `offset-block-start`
非标准

已弃用
（现为 `inset-block-start`）
* `offset-inline-end`
非标准

已弃用
（现为 `inset-inline-end`）
* `offset-inline-start`
非标准

已弃用
（现为 `inset-inline-start`）
指南
--

* 逻辑属性和逻辑值的基本概念
* 逻辑尺寸属性
* 用于外边距、边框和内边距的逻辑属性
* 用于浮动和定位的逻辑属性
规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |

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

完整的兼容性信息见各属性的页面。


::spelling-error - CSS：层叠样式表

::spelling-error
================

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

**`::spelling-error`** CSS 伪元素 表示浏览器标记为不正确拼写的文本段。

```css
::spelling-error {
  color: red;
}
```

可用的属性
-----

只有一小部分 CSS 属性可用于 `::spelling-error` 伪元素选择器：

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` and its longhands
* `text-decoration` and its associated properties
* `text-emphasis-color` (en-US)
* `text-shadow`
语法
--
```

::spelling-error
```

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-spelling-error |

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

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

参见
--

* `::grammar-error`


mask-repeat - CSS：层叠样式表

mask-repeat
===========

CSS 的 **`mask-repeat`** 属性定义了遮罩图片是否重复显示多个副本，以及如何重复。一个遮罩图片可以水平重复、垂直重复或双向重复，也可以不重复。

```css
/\* One-value syntax \*/
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/\* Two-value syntax: horizontal | vertical \*/
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/\* Multiple values \*/
mask-repeat:
  space round,
  no-repeat;
mask-repeat:
  round repeat,
  space,
  repeat-x;

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

默认情况下，重复的图片会被剪切为图片的大小，但他们可以自行缩放适应（使用 `round`），或者从一端到另一端均匀分布（使用 `space`）。

|  |  |
| --- | --- |
| 初始值 | `repeat` |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| 计算值 | Consists of two keywords, one per dimension |
| Animation type | discrete |

语法
--

One or more `<repeat-style>` values, separated by commas.

### 取值

`<repeat-style>`

单值语法可将两个值简写为一个：

| **单值** | **与之等效的双值** |
| --- | --- |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

在双值语法中，第一个值代表了水平方向的行为，第二个值代表了垂直方向的行为。下面是每个选项的用法解释：

| `repeat` | The image is repeated as much as needed to cover the whole mask painting area. The last image will be clipped if it doesn't fit. |
| --- | --- |
| `space` | The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The `mask-position` (en-US) property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using `space` is when there isn't enough room to display one image. |
| `round` | As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px. |
| `no-repeat` | The image is not repeated (and hence the mask painting area will not necessarily be entirely covered). The position of the non-repeated mask image is defined by the `mask-position` (en-US) CSS property. |

### 形式语法
```

mask-repeat =
  <repeat-style>#

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

```

示例
--

### 单值

#### CSS

```css
#masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  mask-image: url(star.svg);
  mask-repeat: repeat; /\* 可在实时示例 live sample 中修改 \*/
  margin-bottom: 10px;
}
```

```
<div id="masked"></div>
<select id="repetition">
  <option value="repeat-x">repeat-x</option>
  <option value="repeat-y">repeat-y</option>
  <option value="repeat" selected>repeat</option>
  <option value="space">space</option>
  <option value="round">round</option>
  <option value="no-repeat">no-repeat</option>
</select>
```

```
var repetition = document.getElementById("repetition");
repetition.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskRepeat = evt.target.value;
});
```

### 使用多个遮罩图片

You can specify a different `<repeat-style>` for each mask image, separated by commas:

```css
.examplethree {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-repeat: repeat-x, repeat-y;
}
```

Each image is matched with the corresponding repeat style, from first specified to last.

规范
--

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

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

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


will-change - CSS：层叠样式表

will-change
===========

CSS 属性 `will-change` 为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

**警告：** `will-change` 应该被视为最后的应对手段，用于解决现有的性能问题。不应该被用来预测性能问题。

```css
/\* 关键字值 \*/
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /\* <custom-ident> 示例 \*/
will-change: opacity; /\* <custom-ident> 示例 \*/
will-change: left, top; /\* 两个 <animatable-feature> 例子 \*/

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

想要用好该属性可能有些棘手：

* *不要将 will-change 应用于过多的元素*。浏览器已经尽力优化了所有东西。一些较强的优化可能与 `will-change` 相关联，它们可能会使用大量机器资源，当过度使用时会导致页面变慢或消耗大量资源。
* *谨慎使用*。浏览器进行的优化通常是在尽可能短的时间内删除优化并恢复到正常状态。但是，将 `will-change` 直接添加到样式表中意味着目标元素通常会在不久的将来发生变化，而浏览器会保留优化更长的时间。因此，最好的做法是在更改发生之前和之后使用脚本代码开启和关闭 `will-change`。
* *不要为了过早优化而将 `will-change` 应用于元素*。如果你的页面表现良好，则不要仅仅为了提高一点速度而将 `will-change` 属性添加到元素中。`will-change` 旨在作为最后的手段使用，以尝试解决现有的性能问题。不应该用来预测性能问题。过度使用 `will-change` 将导致内存使用过多，并导致更复杂的渲染发生，因为浏览器试图为可能的更改做准备。这将导致更差的性能。
* *要给它足够的时间来发挥作用*。该属性旨在为开发者提供一种方法，让用户代理提前了解可能会发生变化的属性。然后浏览器可以选择在实际属性更改之前应用所需的任何提前优化。因此，重要的是给浏览器一些时间来实际执行优化。找到一些方法，预测某些事情将会在稍微提前的时间内发生，并在那时设置 `will-change`。
* *请注意*。当与创建层叠上下文的属性值一起使用（例如 will-change: opacity）时，`will-change` 实际上可能会影响元素的视觉外观，因为层叠上下文是提前创建的。
语法
--

### 取值

`auto`

表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化。

`<animateable-feature>` 可以是以下值：

`scroll-position`

表示开发者希望在不久后改变滚动条的位置或者使之产生动画。

`contents`

表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

`<custom-ident>`

该属性表示开发者期望在不久的将来对元素上给定名称的属性进行动画或更改。如果给定的属性是一个缩写，它表示对缩写展开的所有属性的期望。它不能是以下任何值：`unset`、`initial`、`inherit`、`will-change`、`auto`、`scroll-position` 或 `contents`。规范没有定义特定值的行为，但是 `transform` 通常被用作合成层提示。在给定特定的 CSS 属性标识时，Chrome 目前会执行两个操作：建立新的合成层或新的层叠上下文。

### 通过样式表设置

在需要通过按键进行页面翻转的应用程序中（例如相册或幻灯片演示文稿），或者在页面内容较大、较复杂的应用程序中，将 `will-change` 属性包含在样式表中可能是合适的。这将让浏览器提前准备好转换，并允许在按键按下时实现流畅的页面转换效果。但是，在样式表中直接使用 `will-change` 属性时需要谨慎。这可能会导致浏览器将优化保留在内存中的时间比实际需要的时间更长。

```css
.sidebar {
  will-change: transform;
}
```

形式定义
----

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

形式语法
----
```

will-change =
  auto                    |
  <animateable-feature>#

<animateable-feature> =
  scroll-position  |
  contents         |
  <custom-ident>

```

示例
--

### 通过脚本设置

这是一个示例，演示如何通过脚本应用 `will-change` 属性，这可能是在大多数情况下你应该采用的方法。

```js
const el = document.getElementById("element");

// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // 将在动画关键帧块中发生变化的可优化属性
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}
```

规范
--

| Specification |
| --- |
| CSS Will Change Module Level 1 # will-change |

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

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

参见
--

* `transform`
* 独立的 transform 属性：
    + `translate`
    + `scale`
    + `rotate`
    + 备注：并没有单独的 `skew` 属性


border-top-left-radius - CSS：层叠样式表

border-top-left-radius
======================

概要
--

**`border-top-left-radius`** 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为 0，那么将无圆角效果（见 **`border-top-left-radius`** 取值方式)。

![border-radius.png](/zh-CN/docs/Web/CSS/border-top-left-radius/border-radius.png)

盒模型的背景，可以是一张图片或一种颜色，会在边框处被剪裁，更甚至可以是一个圆；剪切的额外定位通过另一个 CSS 属性"background-clip"来定义。

**备注：** 在 border-top-left-radius 属性值之后，如果作用的元素上没有设置“border-radius”属性，那么这个属性值就会通过简写属性重新设置成它的初始值。

语法
--

```css
/\* the corner is a circle \*/
/\* border-top-left-radius: radius \*/
border-top-left-radius: 3px;

/\* the corner is an ellipsis \*/
/\* border-top-left-radius: horizontal vertical \*/
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;
```

##### 属性值：

*radius*

可以是 `<length>` 或者 `<percentage>`，表示左上角边框的圆角半径。

*horizontal*

可以是 `<length>` 或者 `<percentage>`，表示椭圆的水平半长轴在被用作边框左上角的半径。

*vertical*

可以是 `<length>` 或者 `<percentage>`，表示椭圆的垂直半长轴在被用作边框左上角的半径。

### 取值

`<length>`

`<length>` 定义圆形半径或椭圆的半长轴，半短轴。不能用负值。

`<percentage>`

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值。

### Formal syntax
```

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

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

```

示例
--

| 实例 | 代码 |
| --- | --- |
|  | 椭圆的弧被用作左上角边框

```css
div {
  border-top-left-radius: 40px 40px;
}
```

 |
|  | 椭圆的弧被用作左上角边框

```css
div {
  border-top-left-radius: 40px 20px;
}
```

 |
|  | 盒子是方形的，圆弧被用作左上角边框

```css
div
  border-top-left-radius: 40%;
}
```

 |
|  | 盒子不是方形的，椭圆的弧被用作左上角边框

```css
div {
  border-top-left-radius: 40%;
}
```

 |
|  | 背景色在左上角被剪切

```css
div {
  border-top-left-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}
```

 |

规范
--

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

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

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

参见
--

* border-radius 相关 CSS 属性：`border-radius`, 其他边角属性： `border-top-right-radius`, `border-bottom-right-radius` (en-US), and `border-bottom-left-radius`.


行内格式化上下文（Inline formatting context） - CSS：层叠样式表

行内格式化上下文（Inline formatting context）
===================================

这篇文章将解释什么是行内格式化上下文（Inline formatting context）

核心概念
----

行内格式化上下文是一个网页的渲染结果的一部分。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

* 对于水平书写模式，各个框从左边开始水平地排列
* 对于垂直书写模式，各个框从顶部开始水平地排列

在下面给出的例子中，带黑色边框的两个 (`<div>`) 元素组成了一个块级格式化上下文（block formatting context），其中的每一个单词都参与一个行内格式化上下文中。水平书写模式下的各个框水平地排列，垂直书写模式下的各个框垂直地排列。

各个框组成了一行，而该行位于一个称为“行框（line box）”的矩形区域之中。该行框的大小将足以包含该行中所有的行内框（inline boxes）；当行内方向上没有剩余空间时，将会创建新行。因此，一个段落实际上是一系列行框的集合，这些行框在块的方向上排列。

一个行内框（inline box）被分割到多行中时，margins, borders, 以及 padding 的设定均不会在断裂处生效。下例中有一个 (`<span>`) 元素，它包裹了一系列单词，占据了两行。可以看见在断裂处，`<span>` 的 border 同样发生了断裂。

Margins, borders, 以及 padding 的设置，在行的方向上是生效的。在下例中，可以看见行内元素 `<span>` 的 margin，border 以及 padding 是被加上了的。

**备注：** 此处使用了 logical, flow-relative properties — `padding-inline-start`，而不是 `padding-left` — so that they work in the inline dimension whether the text is horizontal or vertical. Read more about these properties in Logical Properties and Values.

在块的方向上对齐
--------

行内框（Inline boxes）可使用`vertical-align`属性，以不同的方式在块的方向上进行对齐（因此在垂直书写模式下，`vertical-align` 中的“vertical”根本是名不副实——此时行内框将在水平方向上进行对齐）。下例中，字号较大的文本使得第一个句子的行框变大，因此 `vertical-align` 能让行内框（inline boxes）分布于上侧或下侧。例子里用的值是 `top`, 可以试试 `middle`, `bottom`, 或 `baseline` 这些值。

在行内方向上对齐
--------

如果行内方向上还有额外空间，那么 `text-align` 可用于将各行内框（inline boxes）在行框（line box）内对齐。可以试试把 `text-align` 的值改成 `end` 。

浮动造成的效果
-------

在行内方向上，各行框（Line Boxes）通常具有相同的尺寸，即在水平书写模式下，它们有同样的宽度；在垂直书写模式下，它们有同样的高度。但是，如果同一个块格式化上下文中存在一个 `float`，则这个浮动元素将导致包裹了它的各行框变短。

另见
--

* Block formatting context
* Visual Formatting Model


border-left - CSS：层叠样式表

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

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

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

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

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

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

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

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

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

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

Syntax
------

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

### Values

`<br-width>`

请参阅`border-left-width`.

`<br-style>`

请参阅`border-left-style`.

``<color>``

请参阅 `border-left-color`.

### Formal syntax
```

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

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

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

```

Example
-------

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

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

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

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

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

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


<blend-mode> - CSS：层叠样式表

<blend-mode>
============

**`<blend-mode>`** 是一种 CSS 数据类型，用于描述当元素重叠时，颜色应当如何呈现。它被用于 `background-blend-mode` 和 `mix-blend-mode` 属性。

当层重叠时，混合模式是计算像素最终颜色值的方法，每种混合模式采用前景和背景的颜色值，执行其计算并返回最终的颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。

语法
--

`<blend-mode>` 数据类型被定义为下列关键词中的任意一个。

### 属性值

* `normal`
    + : 最终颜色永远是顶层颜色，无论底层颜色是什么。
     其效果类似于两张不透明的纸重叠（overlapping）在一起。
* `multiply`
    + : 最终颜色为顶层颜色与底层颜色相乘的结果。
     如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。
     其效果类似于在透明薄膜上重叠印刷的两个图像。
* `screen`
    + : 最终的颜色是**反转顶层颜色和底层颜色，将反转后的两个颜色相乘，再反转相加得到的和**得到的结果。
     黑色层不会造成变化，白色层导致白色最终层。
     其效果类似于（被投影仪）投射到投影屏幕上的两个图像。
* `overlay`
    + : 如果底层颜色比顶层颜色深，则最终颜色是 `multiply` 的结果，如果底层颜色比顶层颜色浅，则最终颜色是 `screen` 的结果。
     此混合模式相当于顶层与底层互换后的 `hard-light`。
* `darken`
    + : 最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色。
* `lighten`
    + : 最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色。
* `color-dodge`
    + : 最终颜色是将底部颜色除以顶部颜色的反色的结果。
     黑色前景不会造成变化。前景如果是背景的反色，会得到白色（fully lit color，完全亮起的颜色，应当为白色）。
     此混合模式类似于 `screen`，但是，前景只需要和背景的反色一样亮，最终图像就会变为全白。
* `color-burn`
    + : 最终颜色是**反转底部颜色，将反转后的值除以顶部颜色，再反转除以后的值**得到的结果。
     白色的前景不会导致变化，前景如果是背景的反色，会得到黑色。
     此混合模式类似于 `multiply`，但是，前景只需要和背景的反色一样暗，最终图像就会变为全黑。
* `hard-light`
    + : 如果顶层颜色比底层颜色深，则最终颜色是 `multiply` 的结果，如果顶层颜色比底层颜色浅，则最终颜色是 `screen` 的结果。
     此混合模式相当于顶层与底层互换后的 `overlay`。
     其效果类似于在背景层上（用前景层）打出一片*刺眼*的聚光灯。
* `soft-light`
    + : 最终颜色类似于 `hard-light` 的结果，但更加柔和一些。
     此混合模式的表现类似 `hard-light`。
     其效果类似于在背景层上（用前景层）打出一片*发散*的聚光灯。
    + : 最终颜色是 两种颜色中较浅的颜色 减去 两种颜色中较深的颜色 得到的结果。
     黑色层不会造成变化，而白色层会反转另一层的颜色。
* `exclusion`
    + : 最终颜色类似于 `difference`，但对比度更低一些。
     和 `difference` 相同，黑色层不会造成变化，而而白色层会反转另一层的颜色。
* `hue`
    + : 最终颜色由顶部颜色的*色调*和底部颜色的*饱和度*与*亮度*组成。
* `saturation`
    + : 最终颜色由顶部颜色的*色调*和底部颜色的*饱和度*与*发光度*组成。
     饱和度为零的纯灰色背景层不会造成变化。
* `color`
    + : 最终颜色由顶部颜色的*色调*与*饱和度*和底部颜色的*亮度*组成。
     此效果保留了灰度级别，可用于为前景着色。（The effect preserves gray levels and can be used to colorize the foreground.）
* `luminosity`
    + : 最终颜色由顶部颜色的亮度和底部颜色的色调和饱和度组成。此混合模式相当于顶层与底层互换后的 `color`。
示例
--

### 示例：使用“normal”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}
```

### 示例：使用“multiply”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: multiply;
}
```

### 示例：使用“screen”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

### 示例：使用“overlay”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: overlay;
}
```

### 示例：使用“darken”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: darken;
}
```

### 示例：使用“lighten”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: lighten;
}
```

### 示例：使用“color-dodge”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-dodge;
}
```

### 示例：使用“color-burn”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-burn;
}
```

### 示例：使用“hard-light”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hard-light;
}
```

### 示例：使用“soft-light”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: soft-light;
}
```

### 示例：使用“difference”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: difference;
}
```

### 示例：使用“exclusion”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: exclusion;
}
```

### 示例：使用“hue”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hue;
}
```

### 示例：使用“saturation”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: saturation;
}
```

### 示例：使用“color”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color;
}
```

### 示例：使用“luminosity”
```

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

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: luminosity;
}
```

### 混合模式比较

在以下示例中，我们有一个带有两张背景图片（在线性渐变之上有一个 Firefox 的 logo）的 `<div>`。它的下面，我们提供两一个 `<select>` 菜单，允许你改变应用到 `<div>` 上的 `background-blend-mode`，你可以借此比较不同的混合模式的效果。

#### HTML

```html
<div></div>
<p>选择 blend-mode：</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background:
    url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png)
      no-repeat center,
    linear-gradient(to bottom, blue, orange);
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");

selectElem.addEventListener("change", () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});
```

#### 结果

规范
--

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

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

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

参见
--

* 使用此类型的属性值：`background-blend-mode` 和 `mix-blend-mode`

其他网站上对各种混合模式的说明与介绍：

* Wikipedia 上的混合模式（暂无中文）
* Adobe 提供的 Blending modes in Adobe Photoshop（英文）


视口概念 - CSS：层叠样式表

视口概念
====

这篇文章阐述了**视口**（viewport）的概念，对视觉视口（visual viewport）和布局视口（layout viewport）进行区分，并让你了解视口的意义是什么，以及它在 CSS、SVG 和移动设备方面的影响。

什么是视口？
------

视口代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。

文档，比如这篇文章，可能会非常长。你的视口就是你现在所能见到的所有事物。值得注意的是“什么是视口区域”这个问题，页面中的一些导航菜单也包括在其中。视口的大小取决于屏幕的大小，无论浏览器是否处于全屏模式，是否被用户缩放了。视口外的区域，比如这个文档的*参见*部分，可能需要滚动到其所在的区域才会出现在屏幕上。

* 在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，视口是浏览器窗口的大小。
* 在大多数移动设备中，浏览器是全屏的，视口是整个屏幕的大小。
* 在全屏模式下，视口是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比视口长或宽。

概括地说，视口基本上是当前文档的可见部分。

### 视口大小是可变的

视口的宽度并不总是窗口的宽度。如果你测试 Chrome 或 Firefox 浏览器中 window 和 document 的宽度和高度，你会得到如下值：

```js
document.documentElement.clientWidth; /\* 1200 \*/
window.innerWidth; /\* 1200 \*/
window.outerWidth; /\* 1200 \*/
```

```js
document.documentElement.clientHeight; /\* 800 \*/
window.innerHeight; /\* 800 \*/
window.outerHeight; /\* 900 \*/
```

下面是一些帮助你查询视口大小和其他类似的长度属性的 DOM 属性：

* 文档的 `Element.clientWidth` 是指一个文档使用 CSS pixels 单位表示的内部宽度，包括其 padding（不包括 border、margin 或垂直滚动条）。**这就是视口的宽度**。
* `Window.innerWidth` 是用 CSS 像素单位表示的浏览器窗口的视口宽度，包括垂直滚动条。
* `Window.outerWidth` 是指包括了浏览器外边框的窗口宽度。

在实测中，`innerWidth` 和 `outerWidth` 是相同的，但是 `outerHeight` 比 `innerHeight` 高 100px。这是因为 `outerHeight` 的测量包括浏览器框架在内，包括了地址栏和书签栏总共 100px 的高度，而浏览器没有左右边框。

`innerHeight` 和 `innerWidth` 所组成的区域通常被认为是**布局视口（layout viewport）**。浏览器的框架不被认为是视口的一部分。

当缩放时，Firefox 和 Chrome 对 `innerWidth` 和 `clientWidth` 给出了新的 CSS 像素大小。浏览器对 `outerWidth` 和 `outerHeight` 的返回值有差异。Firefox 返回了缩放后的 CSS 像素值，Chrome 返回了默认的像素值：

```js
document.documentElement.clientWidth; /\* 800 \*/
window.innerWidth; /\* 800 \*/
window.outerWidth; /\* 800 in Firefox, 1200 in chrome \*/
```

```js
document.documentElement.clientHeight; /\* 533 \*/
window.innerHeight; /\* 533 \*/
window.outerHeight; /\* 596 in Firefox, 900 in chrome \*/
```

原始的视口大小是 1200 x 800 像素。缩放后变成了 800 x 533。这是布局视口。该网页有固定的头部和尾部，带有下列样式，它们将会固定在相对布局视口的顶部和底部。

```css
body > header {
  position: fixed;
  top: 0;
}
body > footer {
  position: fixed;
  bottom: 0;
}
```

缩放后，我们得到了 800 x 533 的测量值。头部和尾部仍然固定在窗口的顶部和底部。但是当使用触屏双指缩放或者当键盘在手机上弹出的时候呢？

Web 浏览器包含两个视口，**布局视口**和**视觉视口**。视觉视口指当前浏览器中可见的部分，并且可以变化。当使用双指缩放，或键盘在手机上弹出的时候，或者之前隐藏的地址栏变得可见的时候，视觉视口缩小了，但是布局视口却保持不变。

我们上面说到的固定的头部和尾部，固定在布局视口的底部和顶部，所以当我们对视觉视口使用键盘放大的时候，头部和尾部仍保留在视野中。当你缩放页面时，布局视口可能不能被全部看到。如果你放大布局视口的中间部分，内容将在四个方向上扩展。如果你有一个固定的头部和底部，它们依然固定在布局视口的顶部和底部，因此它们可能会在设备屏幕的底部和顶部不可见——视觉视口。视觉视口是布局视口当前的可见部分。如果你向下滚动，视觉视口的内容就会改变，并布局视口的底部就会滚动到可视区域。

视觉视口是屏幕的可视部分，不包括屏幕键盘，缩放外的区域。视觉视口要么跟布局视口相同，要么更小。

对于一个包含框架，对象或外部 svg 的页面，两者都有它们自己的 window 对象，只有最外层的 window 的视觉视口不同于布局视口。对于包含的文档，视觉视口与布局视口是相同的。

### CSS

在上面描述的布局视口和视觉视口不是你将遇到的唯一视口。在布局视口中完全或部分显示的任何子视口都被视为可视视口。

我们通常认为宽度和高度的媒体查询是相对于浏览器窗口的宽度和高度而言的。它们实际上是相对于视口的，即主文档（document）中的窗口（window 对象），但它也是嵌套浏览上下文（如对象，iframe 和 SVG）中元素父级的本身的大小。在 CSS 中，我们也有基于视口大小的长度单位。1vh 单位是 1% 布局视口的高度，vw 单位与此类似。

#### `<iframe>`

对于一个 `iframe` 来说，视觉视口是其内部高度和宽度的大小而不是其父文档的大小。你可以为其高度和宽度设置任意数值，但过大的值可能会使 `iframe` 部分内容超出视口导致超出部分不可见。

在 CSS 中，可以使用相对于视口的长度单位 `vh` 和 `vw`。1vh 意味着值为视口高度的 1%，同理 1vw 即值为视口宽度的 1%。

需要注意的是，当你在 CSS 中使用 `vw` 和 `vh` 设置 `iframe` 的样式时，1vh 表示的是 `iframe` 高度的 1%，但 1vw 表示的则是 document 宽度的 1%。

```css
iframe {
  width: 50vw;
}
```

在上面的例子中，一个 `iframe` 宽度被设置为 50vw，假设父文档宽度为 1200px，按照上面的规则，它的的实际宽度将会是父文档宽度的 50%，即 600px。在这个例子中，每 1vw 将折算 6px。如果因为缩放，父文档宽度变为 800px，则 1vw 将代表 4px，iframe 的宽度将会是 400px。

此外，一个在 `iframe` 文档内基于宽度的媒体查询将会使用 `iframe` 的视口宽度进行参照。

```css
@media screen and (min-width: 500px) {
  p {
    color: red;
  }
}
```

如果上述 CSS 代码块包含于一个 `iframe` 所指向的一个文档头部，那么当用户放大该文档时，p 标签颜色将变红；当用户不使用缩放时，该样式则不会被应用。

#### SVG

在 SVG 文档中，视口即 SVG 图片的可视区域。同样，你也可以为 SVG 设置任何高度和宽度，但不恰当的大小可能无法显示整个 SVG 图片。在 SVG 中的可见部分被称为这个 SVG 的视口。你可以使用 `<svg>` 上的 width 和 height 属性来修改 SVG 的视口大小。

```html
<svg height="300" width="400"></svg>
```

在这个示例中，这个 SVG 的视口长宽比被设置为了 3:4，默认情况下宽为 400 像素，高为 300 像素。

SVG 参照 viewbox 属性，内置了一个与视口无关的坐标系。

如果你在你的 HTML 文档中使用了 SVG，这个 SVG 的视口默认为包含它的块级容器或者 SVG 容器上所设置的宽度和高度大小。当你使用 `@media` 来对 SVG 进行媒体查询时，其参照的高度和宽度取决于包裹着 SVG 的容器，而不是整个浏览器视口。

```css
@media screen and (min-width: 400px) and (max-width: 500px) {
  /\* css goes here \*/
}
```

如果你在其他元素上使用上面这个示例的媒体查询，当视口（通常为浏览器的视口）满足条件：宽度为 400px 至 500px 的范围内时，媒体查询内的 CSS 样式将会自动应用。但对于 SVG 来说，其媒体查询基于包裹着它的元素。

如使用 `<img>` ，通过设置 src 指向 SVG 文件时，SVG 的外部容器，或者说包裹着 SVG 的元素就是这个 img。如果在这个外部容器上应用了 width 属性，则对应的视口就是这个属性的值，而不是整个文档的视口宽度。

如果把上面的 CSS 媒体查询样式添加到 SVG 文件中去，当 SVG 容器的宽度在 400 - 500 px 时，将应用该 CSS 样式。

### JavaScript

视觉视口 API [草案] (en-US) 提供了查询和修改视觉视口的接口。

移动设备的视口
-------

对于各种不同形状，不同设备像素比移动设备，其浏览器的视口（窗口中显示网页信息的区域）不一定与渲染页面大小相同。移动设备的视口的默认值为 980px，一般情况下都要比这些设备的屏幕尺寸要大。

为了让页面能够全部展示，这些浏览器在渲染时会对页面进行缩放。比如在一个宽 320px 的移动设备显示一个视觉视口宽为 980px 的页面，移动设备浏览器会对这个页面进行缩放直至其视觉视口宽度为 320px（具体取决于浏览器实现）。但直接缩放页面会导致页面字体变小，使得缩放后的页面显示效果都不会很理想。

如果开发者想让移动端浏览器使用屏幕宽度作为视口替换默认的 980px 宽度视口，则可以在 HTML 的头部添加以下标签：

```html
<meta name="viewport" content="width=device-width" />
```

这里 `width` 属性指的是视口宽度，现在视口的宽度被设置为了设备的屏幕宽度，即文档视口宽度大小与设备宽度大小 100% 对应（转换为 CSS 像素值相同）。除了 `width` 属性外，还有 `initial-scale`、`maximum-scale`、`minimum-scale`，以及 `user-scalable` 属性可供设置。这些属性分别设置了文档的初始缩放比例、最大缩放比例、最小缩放比例以及是否允许用户进行缩放操作。但这些属性的默认值已经很好了，开发时可以忽略掉这些属性。

参见
--

* Visual viewport API (en-US)
* `<meta>`，特别是 `<meta name="viewport">`
* Using the viewport meta tag to control layout on mobile browsers


CSS 层叠 - CSS：层叠样式表

CSS 层叠
======

层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。

哪些 CSS 实体会参与层叠计算
----------------

只有 CSS 声明，就是属性名值对，会参与层叠计算。这表示包含 CSS 声明以外实体的 @规则不参与层叠计算，比如包含描述符（descriptors）的`@font-face`。对于这些情形，@规则是做为一个整体参与层叠计算，比如 @font-face 的层叠是由其描述符 font-family 确定的。如果对同一个描述符定义了多次 @font-face，则最适合的 @font-face 是做为一个整体而被考虑的。

包含在大多数 @规则的 CSS 声明是参与层叠计算的，比如包含于`@media`、`@documents`或者`@supports`的 CSS 声明，但是包含于`@keyframes`的声明不参与计算，正如`@font-face`，它是作为一个整体参与层叠算法的筛选。

最后，注意 `@import` 和 `@charset` 遵循特定的算法，并且不受层叠算法影响。

CSS 声明的源
--------

CSS 层叠算法期望通过挑选 CSS 声明来给 CSS 属性设置正确的值。CSS 声明可以有不同的来源：

* 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称**用户代理样式**。一些浏览器通过使用真正的样式表，而其他则通过代码模拟，但无论是哪种情形都应是不可被检测的。而且部分浏览器允许用户修改用户代理样式。尽管 HTML 标准对用户代理样式做了诸多限制，浏览器仍大有可为，具体表现在不同浏览器间会存在重大的差异。为了减轻开发成本以及降低样式表运行所需的基本环境，网页开发者通常会使用一个 CSS reset 样式表，强制将常见的属性值转为确定状态。
* 网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即主题。
* 读者，作为浏览器的用户，可以使用自定义样式表定制使用体验。

尽管 CSS 样式会来自这些不同的源，但它们的作用范围是重叠的，而层叠算法则定义了它们如何相互作用。

层叠顺序
----

层叠算法决定如何找出要应用到每个文档元素的每个属性上的值。

1. 它首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的 @规则（at-rule）的一部分。
2. 其次，它依据重要性对这些规则进行排序。即是指，规则后面是否跟随者 !import 以及规则的来源。层叠是按升序排列的，这意味着来着用户自定义样式表的 !important 值比用户代理样式表的普通值优先级高：

|  | 来源 | 重要程度 |
| --- | --- | --- |
| 1 | 用户代理 | 普通 |
| 2 | 用户 | 普通 |
| 3 | 页面作者 | 普通 |
| 4 | CSS 动画 | 见下节 |
| 5 | 页面作者 | `!important` |
| 6 | 用户 | `!important` |
| 7 | 用户代理 | `!important` |
| 8 | css 过渡 (css transitions) |  |
3. 假如层叠顺序相等，则使用哪个值取决于优先级。
重置样式
----

当你的 css 对样式完成更改之后，也许会在某种情况下希望把他们还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS 属性`all`能够让你快速地把（几乎）所有 CSS 属性设置到一个已知样式上。

all 属性让你能够立刻把所有的属性都还原到它们初始（默认）的状态，或是继承自前一个层叠顺序等级的状态，又或是指定一个特定的来源（用户代理、页面作者或者用户），甚至还可以选择完全清除所有的属性。

CSS 动画与层叠
---------

CSS 动画 (en-US)，指使用`@keyframes` @规则定义状态间的动画。关键帧不参与层叠，意味着在任何时候 CSS 都是取单一的 @keyframes 的值而不会是某几个 @keyframe 的混合。

当有多个满足条件的关键帧时，在最重要的文档里面最后定义的关键帧会被选中，而不会是将它们组合在一起。

同时仍应注意用 @keyframes @规则定义的值会覆盖全部普通值，但会被 !important 的值覆盖。

例子
--

**用户代理 CSS：**

```css
li {
  margin-left: 10px;
}
```

**网页作者 CSS1：**

```css
li {
  margin-left: 0;
} /\* This is a reset \*/
```

**网页作者 CSS2：**

```css
@media screen {
  li {
    margin-left: 3px;
  }
}

@media print {
  li {
    margin-left: 1px;
  }
}
```

**用户 CSS：**

```css
.specific {
  margin-left: 1em;
}
```

**HTML：**

```html
<ul>
  <li class="specific">1<sup>st</sup></li>
  <li>2<sup>nd</sup></li>
</ul>
```

对于这个情形，应当应用 li 和.specific 里面的声明。由于没有声明被标记为 !important，所以优先顺序为页面作者样式优于用户样式，用户代理样式最低。

故是这 3 条声明的竞争：

```css
margin-left: 0;
```

```css
margin-left: 3px;
```

```css
margin-left: 1px;
```

由于是在屏幕显示，所以最后一条舍弃，而前两条的选择器相同，因此优先级也相同，故最终选择的是后者：

```css
margin-left: 3px;
```

注意尽管定义在用户 CSS 里面的声明有更高的优先级，但它并不会被选中，因为层叠算法是先于优先级算法的。

规范
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4  |

参见
--

* CSS 教程中层叠知识的介绍 (en-US)。
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素


pow() - CSS：层叠样式表

pow()
=====

CSS 函数 **`pow()`** 为指数型函数，返回底数的某数次方的值。

`exp()` 函数为 `pow()` 的特例，其底数为数学常数 e。

语法
--

```css
/\* <number> 值 \*/
width: calc(10px * pow(5, 2)); /\* 10px \* 25 = 250px \*/
width: calc(10px * pow(5, 3)); /\* 10px \* 125 = 1250px \*/
width: calc(10px * pow(2, 10)); /\* 10px \* 1024 = 10240px \*/
```

### 参数

`pow(base, number)` 函数接受两个以逗号分隔的值作为其参数。

`base`

解析为 `<number>` 的计算式，表示底数。

`number`

解析为 `<number>` 的计算式，表示指数。

### 返回值

返回表示 basenumber 的 `<number>`，即 `base` 的 `number` 次方。

形式语法
----
```

<pow()> =
  pow( <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

```

示例
--

### 以固定比值缩放标题

`pow()` 函数可用于如 CSS 模块式缩放等策略，即将页面上的所有字体尺寸以固定比值互相联系在一起。

#### HTML

```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```

#### CSS

```css
h1 {
  font-size: calc(1rem * pow(1.5, 4));
}
h2 {
  font-size: calc(1rem * pow(1.5, 3));
}
h3 {
  font-size: calc(1rem * pow(1.5, 2));
}
h4 {
  font-size: calc(1rem * pow(1.5, 1));
}
h5 {
  font-size: calc(1rem * pow(1.5, 0));
}
h6 {
  font-size: calc(1rem * pow(1.5, -1));
}
```

#### 结果

规范
--

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

参见
--

* `sqrt()`
* `hypot()`
* `exp()`
* `log()`


background-origin - CSS：层叠样式表

background-origin
=================

摘要
--

`background-origin` 规定了指定背景图片`background-image` 属性的原点位置的背景相对区域。

注意：当使用 `background-attachment` 为 fixed 时，该属性将被忽略不起作用。

**备注：** 假如`background`简写中没有设置该值，那么在 background 简写值后指定 background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。

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

语法
--
```

Formal syntax:
```
background-origin =
  <visual-box>#

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

```

```
```

background-origin: border-box
background-origin: padding-box
background-origin: content-box

background-origin: inherit
```

### 属性值

`border-box`

背景图片的摆放以 border 区域为参考

`padding-box`

背景图片的摆放以 padding 区域为参考

`content-box`

背景图片的摆放以 content 区域为参考

### 形式化语法

How to read CSS syntax.
```

background-origin =
  <visual-box>#

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

```

例子
--

```css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  /\* 背景将在内容区 padding 内部填充 \*/
  background-origin: content-box;
}
```

```css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```

```css
div {
  background-image: url("logo.jpg"), url("mainback.png");
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

规范
--

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

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

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

相关文献
----

* 【CSS3】background-origin 和 background-clip 的区别


布局和包含块 - CSS：层叠样式表

布局和包含块
======

一个元素的尺寸和位置经常受其**包含块**（containing block）的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区域，但也不是总是这样。在本文中，我们来过一遍确定包含块的所有因素。

当一个客户端代理（比如说浏览器）展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域：

1. 内容区
2. 内边距区
3. 边框区
4. 外边距区

![Diagram of the box model](/zh-CN/docs/Web/CSS/Containing_block/box-model.png)

许多开发者认为一个元素的包含块就是他的父元素的内容区，但这不一定正确。接下来让我们来看看，确定元素包含块的因素都有哪些。

包含块的影响
------

在学习如何确定元素包含块之前，先了解一下它的重要性。

元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 `width`, `height`, `padding`, `margin`，绝对定位元素的偏移值（比如 `position` 被设置为 `absolute` 或 `fixed`），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

确定包含块
-----

确定一个元素的包含块的过程完全依赖于这个元素的 `position` 属性：

1. 如果 position 属性为 **`static`**、**`relative`** **或 `sticky`**，包含块可能由它的最近的祖先**块元素**（比如说 inline-block, block 或 list-item 元素）的内容区的边缘组成，也可能会建立格式化上下文 (比如说 a table container, flex container, grid container, 或者是 the block container 自身)。
2. 如果 position 属性为 **`absolute`** ，包含块就是由它的最近的 position 的值不是 `static` （也就是值为`fixed`, `absolute`, `relative` 或 `sticky`）的祖先元素的内边距区的边缘组成。
3. 如果 position 属性是 **`fixed`**，在连续媒体的情况下 (continuous media) 包含块是 viewport ,在分页媒体 (paged media) 下的情况下包含块是分页区域 (page area)。
4. 如果 position 属性是 **`absolute`** 或 **`fixed`**，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
    1. `transform` 或 `perspective` 的值不是 `none`
    2. `will-change` 的值是 `transform` 或 `perspective`
    3. `filter` 的值不是 `none` 或 `will-change` 的值是 `filter`（只在 Firefox 下生效）。
    4. `contain` 的值是 `layout`、`paint`、`strict` 或 `content`（例如：`contain: paint;`）
    5. `backdrop-filter` 的值不是 `none`（例如：`backdrop-filter: blur(10px);`）

**备注：** 根元素（`<html>`）所在的包含块是一个被称为**初始包含块**的矩形。它具有视口（对于连续媒体）或页面区域（对于分页媒体）的尺寸。

**备注：** `perspective` 和 `filter` 属性对形成包含块的作用存在浏览器之间的不一致性。

根据包含块计算百分值
----------

如上所述，当某些属性被赋予一个百分比值时，它的计算值取决于这个元素的包含块。以这种方式工作的属性包括**盒模型属性**和**偏移属性**：

1. `height`、`top` 及 `bottom` 属性根据包含块的 `height` 计算百分比值。
2. `width`、`left`、`right`、`padding` 和 `margin` 属性根据包含块的 `width` 计算百分比值。

**备注：** 一个**块容器**（比如 inline-block、block 或 list-item 元素）要么只包含参与行级格式化上下文的行级盒子，要么只包含参与块级格式化上下文的块级盒子。只有包含块级或行级盒子的元素才是块容器。

示例
--

接下来的示例，都使用如下 HTML 代码：

```html
<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

下面的示例，只有 CSS 不同。

### Example 1

这个示例中，P 标签设置为静态定位，所以它的包含块为 `<section>` ，因为距离最近的父节点即是她的包含块。
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%; /\* == 400px \* .5 = 200px \*/
  height: 25%; /\* == 160px \* .25 = 40px \*/
  margin: 5%; /\* == 400px \* .05 = 20px \*/
  padding: 5%; /\* == 400px \* .05 = 20px \*/
  background: cyan;
}
```

### Example 2

在这个示例中，P 标签的包含块为 `<body>` 元素，因为 `<section>` 不再是一个块容器，所以并没有形成一个格式上下文。
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%; /\* == half the body's width \*/
  height: 200px; /\* Note: a percentage would be 0 \*/
  background: cyan;
}
```

### Example 3

这个示例中，P 元素的包含块是 `<section`>，因为 `<section>` 的 `position` 为 `absolute` 。P 元素的百分值会受其包含块的 `padding` 所影响。不过，如果包含块的 `box-sizing` 值设置为 `border-box` ，就没有这个问题。
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%; /\* == (400px + 20px + 20px) \* .5 = 220px \*/
  height: 25%; /\* == (160px + 30px + 30px) \* .25 = 55px \*/
  margin: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  padding: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  background: cyan;
}
```

### Example 4

这个示例中，P 元素的 `position` 为 `fixed`，所以它的包含块就是初始包含块（在屏幕上，也就是 viewport）。这样的话，P 元素的尺寸大小，将会随着浏览器窗框大小的变化，而变化。
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%; /\* == (50vw - (width of vertical scrollbar)) \*/
  height: 50%; /\* == (50vh - (height of horizontal scrollbar)) \*/
  margin: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  padding: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  background: cyan;
}
```

### Example 5

这个示例中，P 元素的 `position` 为 `absolute`，所以它的包含块是 `<section>`，也就是距离它最近的一个 `transform` 值不为 none 的父元素。
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%; /\* == 200px \*/
  height: 25%; /\* == 40px \*/
  margin: 5%; /\* == 20px \*/
  padding: 5%; /\* == 20px \*/
  background: cyan;
}
```

参见
--

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


cursor - CSS：层叠样式表

cursor
======

**`cursor`** CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。

尝试一下
----

语法
--

```css
/\* 关键字值 \*/
cursor: pointer;
cursor: auto;

/\* 使用 URL，并提供一个关键字值作为备用 \*/
cursor: url(hand.cur), pointer;

/\* URL 和 xy 的坐标偏移值，最后提供一个关键字值作为备用 \*/
cursor:
  url(cursor1.png) 4 12,
  auto;
cursor:
  url(cursor2.png) 2 2,
  pointer;

/\* 全局属性 \*/
cursor: inherit;
cursor: initial;
cursor: unset;
```

cursor 属性为零个或多个<url>值，它们之间用逗号分隔，最后必填一个关键字值。每个<url>指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值代表的指针类型。

每个<url>后面都可选跟一对空格分隔的数字<x><y>表示偏移。它们用来设置指针的热点 (即自定义图标的实际点击位置)，位置相对于图标的左上角。

例如，下面的例子使用<url>值指定两个图像，为第二个图像提供<x><y>坐标，如果两个图像都无法加载，则返回`progress`关键字值：

```css
cursor:
  url(one.svg),
  url(two.svg) 5 5,
  progress;
```

### 值

<`url`>

`url(…)`或者逗号分隔的`url(…), url(…), …`，指向图片文件。用大于一个`<url>()`值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。详情参见cursor 属性中使用 URL 值。

`<x>` `<y>`
实验性

可选 x，y 坐标。两个小于 32 的无单位非负数。

关键字值

鼠标悬浮于值上可实时演示

| 类型 | CSS 值 | 例子 | 描述 |
| --- | --- | --- | --- |
| General | `auto` |  | 浏览器根据当前内容决定指针样式例如当内容是文字时使用 text 样式 |
| `default` | default.gif | 默认指针，通常是箭头。 |
| `none` |  | 无指针被渲染 |
| 链接及状态 | `context-menu` | context-menu.png | 指针下有可用内容目录。 |
| `help` | help.gif | 指示帮助 |
| `pointer` | pointer.gif | 悬浮于连接上时，通常为手 |
| `progress` | progress.gif | 程序后台繁忙，用户仍可交互 (与`wait 相反`). |
| `wait` | wait.gif |
 程序繁忙，用户不可交互
 (与`progress 相反`).图标一般为沙漏或者表。
  |
| 选择 | `cell` | cell.gif | 指示单元格可被选中 |
| `crosshair` | crosshair.gif | 交叉指针，通常指示位图中的框选 |
| `text` | text.gif | 指示文字可被选中 |
| `vertical-text` | vertical-text.gif | 指示垂直文字可被选中 |
| 拖拽 | `alias` | alias.gif | 复制或快捷方式将要被创建 |
| `copy` | copy.gif | 指示可复制 |
| `move` | move.gif | 被悬浮的物体可被移动 |
| `no-drop` | no-drop.gif |
 当前位置不能扔下Firefox bug 275173Windows 或 Mac OS X 中
 "no-drop 与 not-allowed 相同".
  |
| `not-allowed` | not-allowed.gif | 不能执行 |
| `grab` | grab.gif | 可抓取
译者注:grab 和 grabbing 在比较后期才被支持，见浏览器兼容表 |
| `grabbing` | grabbing.gif | 抓取中 |
| 重设大小及滚动 | `all-scroll` | all-scroll.gif |
 元素可任意方向滚动（平移）.Firefox bug 275174Windows
 中，"*all-scroll* 与 *move 相同*".
  |
| `col-resize` | col-resize.gif | 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头 |
| `row-resize` | row-resize.gif | 元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头 |
| `n-resize` | Example of a resize towards the top cursor | 某条边将被移动。例如元素盒的东南角被移动时`使用 se-resize` |
| `e-resize` | Example of a resize towards the right cursor |
| `s-resize` | Example of a resize towards the bottom cursor  |
| `w-resize` | Example of a resize towards the left cursor |
| `ne-resize` | Example of a resize towards the top-right corner cursor |
| `nw-resize` | Example of a resize towards the top-left corner cursor |
| `se-resize` | Example of a resize towards the bottom-right corner cursor |
| `sw-resize` | Example of a resize towards the bottom-left corner cursor |
| `ew-resize` | 3-resize.gif | 指示双向重新设置大小 |
| `ns-resize` | 6-resize.gif |
| `nesw-resize` | 1-resize.gif |
| `nwse-resize` | 4-resize.gif |
| 缩放 | `zoom-in` | zoom-in.gif | 指示可被放大或缩小 |
| `zoom-out` | zoom-out.gif |

### 语法形式
```

cursor =
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]

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

<x> =
  x

<y> =
  y

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

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

```

注意事项
----

尽管规范没有为游标定义任何大小限制，但是不同的user agents可能进行了限制。使用超出浏览器支持的大小范围的图像进行的光标更改通常只会被忽略。

查阅浏览器兼容性表格来获取指针大小的限制信息。

示例
--
```

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}
```

规范
--

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

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

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

参见
--

* Using URL values for the cursor property
* `pointer-events`
* `url()` function
* Webkit's cursor demos (including the extended ones: `zoom`, `zoom-out`, `grab`, `grabbing`)
* Cursor Property (MSDN)
* CSS 2.1 and CSS 3 cursor propery test