使用 CSS 自定义属性（变量） - CSS：层叠样式表

使用 CSS 自定义属性（变量）
================

**自定义属性**（有时候也被称作**CSS 变量**或者**级联变量**）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： **`--main-color: black;`**），由 var() 函数来获取值（比如： `color: var(--main-color);`）复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，`--main-text-color` 会比 `#00ff00` 更易理解，尤其是这个颜色值在其他上下文中也被使用到。自定义属性受级联的约束，并从其父级继承其值。

基本用法
----

声明一个自定义属性，属性名需要以两个减号（`--`）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：

```css
element {
  --main-bg-color: brown;
}
```

注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 `:root` 下，这样就可以在 HTML 文档的任何地方访问到它了：

```css
:root {
  --main-bg-color: brown;
}
```

然而这条规则不是绝对的，如果有理由去限制你的自定义属性，那么就应该限制。

**备注：** 自定义属性名是大小写敏感的，`--my-color` 和 `--My-color` 会被认为是两个不同的自定义属性。

如前所述，使用一个局部变量时用 `var()` 函数包裹以表示一个合法的属性值：

```css
element {
  background-color: var(--main-bg-color);
}
```

使用自定义属性的第一步
-----------

我们从这个简单的 CSS 代码开始，它将相同的颜色应用在了不同 class 的元素上：

```css
.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}
```

应用在如下 HTML 上：

```html
<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three" />
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>
```

其呈现是：

注意到在 CSS 代码中的重复：背景色 `brown` 被多处设置。对于一些 CSS 声明，是可以在级联关系更高的位置设置，通过 CSS 继承自然地解决这个重复的问题。但在一般项目中，是不可能通过这样的方式去解决。通过在 `:root` 伪类上设置自定义属性，然后在整个文档需要的地方使用，可以减少这样的重复性：

```css
:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}
```

这里呈现的结果和前面的例子是一致的，但允许对所需属性值进行一个规范的声明。

自定义属性的继承性
---------

自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。看这一段 HTML：

```html
<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>
```

配套的 CSS：

```css
.two {
  --test: 10px;
}

.three {
  --test: 2em;
}
```

在这个情况下， `var(--test)` 的结果分别是：

* 对于元素 `class="two"` ：`10px`
* 对于元素 `class="three"` ：`2em`
* 对于元素 `class="four"` ：`10px` （继承自父属性）
* 对于元素 `class="one"` ：*非法值*，会变成自定义属性的默认值

注意，这些是自定义属性，并不是你在其他编程语言中遇到的实际的变量。这些值仅当需要的时候才会计算，而并不会按其他规则进行保存。比如，你不能为元素设置一个属性，然后让它从兄弟或旁支子孙规则上获取值。属性仅用于匹配当前选择器及其子孙，这和通常的 CSS 是一样的。

自定义属性备用值
--------

用 `var()` 函数可以定义多个**备用值**（fallback value），当给定值未定义时将会用备用值替换。这对于 Custom Element 和 Shadow DOM 都很有用。

**备注：** 备用值并不是用于实现浏览器兼容性的。如果浏览器不支持 CSS 自定义属性，备用值也没什么用。它仅对支持 CSS 自定义属性的浏览器提供了一个备份机制，该机制仅当给定值未定义或是无效值的时候生效。

函数的第一个参数是自定义属性的名称。如果提供了第二个参数，则表示备用值，当自定义属性值无效时生效。第二个参数可以嵌套，但是不能继续平铺展开下去了，例如：

```css
.two {
  color: var(--my-var, red); /\* Red if --my-var is not defined \*/
}

.three {
  background-color: var(
    --my-var,
    var(--my-background, pink)
  ); /\* pink if --my-var and --my-background are not defined \*/
}

.three {
  background-color: var(
    --my-var,
    --my-background,
    pink
  ); /\* Invalid: "--my-background, pink" \*/
}
```

第二个例子展示了如何处理一个以上的 fallback。该技术可能会导致性能问题，因为它花了更多的时间在处理这些变量上。

**备注：** 像自定义属性这些 fallback 语法允许使用逗号。比如 `var(--foo, red, blue)` 定义了一个 `red, blue` 的备用值——从第一个逗号到最后的全部内容，都会被作为备用值的一部分。

有效性和值
-----

传统的 CSS 概念里，有效性和属性是绑定的，这对自定义属性来说并不适用。当自定义属性值被解析，浏览器不知道它们什么时候会被使用，所以必须认为这些值都是*有效的*。

不幸的是，即便这些值是有效的，但当通过 `var()` 函数调用时，它在特定上下文环境下也可能不会奏效。属性和自定义变量会导致无效的 CSS 语句，这引入了一个新的概念：*计算时有效性*。

无效变量会导致什么？
----------

当浏览器遇到无效的 `var()` 时，会使用继承值或初始值代替。

考虑如下代码：

### HTML

```html
<p>This paragraph is initial black.</p>
```

### CSS

```css
:root {
  --text-color: 16px;
}
p {
  color: blue;
}
p {
  color: var(--text-color);
}
```

毫不意外，浏览器将 `--text-color` 的值替换给了 `var(--text-color)`，但是 `16px` 并不是 `color` 的合法属性值。代换之后，该属性不会产生任何作用。浏览器会执行如下两个步骤：

1. 检查属性 color 是否为继承属性。是，但是 `<p>` 没有任何父元素定义了 color 属性。转到下一步。
2. 将该值设置为它的**默认初始值**，比如 black。
### 结果

段落颜色并不是蓝色，因为无效代换导致了它被替换成了默认初始值的黑色。如果你直接写 `color: 16px` 的话，则会导致语法错误，而前面的定义则会生效（段落显示为蓝色）。

**备注：** 当 CSS 属性 - 值对中存在语法错误，该行则会被忽略。然而如果自定义属性的值无效，它并不会被忽略，从而会导致该值被覆盖为默认值。

JavaScript 中的值
--------------

在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：

```js
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);
```

参见
--

* `Custom properties`


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

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

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

尝试一下
----

语法
--

```css
border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;

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

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

### 取值

`<'color'>`

边框颜色。见 `color`。

形式定义
----

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

形式语法
----
```

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

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

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

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

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

```

示例
--

### HTML

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

### CSS

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

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

规范
--

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

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

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

参见
--

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


@font-face - CSS：层叠样式表

@font-face
==========

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

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

* Learn more
* See full compatibility
* Report feedback
`@font-face` CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载。如果提供了 local() 函数，从用户本地查找指定的字体名称，并且找到了一个匹配项，本地字体就会被使用。否则，字体就会使用 url() 函数下载的资源。通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络 - 安全"字体所限制 (字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。在同时使用 url() 和 local() 功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。@font-face 规则不仅仅使用在 CSS 的顶层，还可以用在任何 CSS 条件组规则中。

```css
@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
```

概述
--

这是一个叫做`@font-face` 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，`@font-face` 可以消除对用户电脑字体的依赖。 `@font-face` 不仅可以放在在 CSS 的最顶层，也可以放在 @规则 的 条件规则组 中。

语法
--
```

@font-face =
  @font-face { <declaration-list> }

```

### 取值

`font-family`

所指定的字体名字将会被用于 font 或 font-family 属性 ( i.e. font-family: <family-name>; )

`src`

远程字体文件位置的 URL 或者用户计算机上的字体名称，可以使用 local 语法通过名称指定用户的本地计算机上的字体 ( i.e. src: local('Arial'); )。如果找不到该字体，将会尝试其他来源，直到找到它。

`font-variant` (en-US)

A `font-variant` value.

`font-stretch` (en-US)

A `font-stretch` value.

`font-weight` (en-US)

A `font-weight` value.

`font-style`

对于 src 所指字体的描述。如果所需字体符合描述，则采用本 font-face 所定义的字体。

`unicode-range` (en-US)

在该 @font-face 中定义的 unicode 字体范围

示例
--

下面的例子简单定义了一个可下载的字体，并应用到了文档的整个 body 标签上。

```html
<html>
  <head>
    <title>Web Font Sample</title>
    <style type="text/css" media="screen, print">
 @font-face {
 font-family: "Bitstream Vera Serif Bold";
 src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
 }

 body {
 font-family: "Bitstream Vera Serif Bold", serif;
 }
 </style>
  </head>
  <body>
    This is Bitstream Vera Serif Bold.
  </body>
</html>
```

在接下来的例子中，用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户 (浏览器) 未安装该字体 (两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替：

```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```

**备注：** 接下来的例子在英文原文中已被删除。

这个例子新定义了一个字体，正常粗细的字采用字体 Times New Roman，粗体字采用 Consolas。

```css
@font-face {
  font-family: myFirstFont;
  src: local("Times New Roman");
  font-weight: normal;
}

@font-face {
  font-family: myFirstFont;
  src: local(Consolas);
  font-weight: bold;
}
```

注意
--

* 这里使用的 Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls (en-US) 解除这一限制。
* 因为这里没有为 TrueType(ttf), OpenType(otf) 和 Web Open File Format(WOFF) 字体定义 MIME，因此不能为这些字体类型设置特定的 MIME（实际上 WOFF 的 MIME 将会是 application/font-woff，但浏览器对此 MIME 的识别还不统一，其他字体情况也类似，可暂时使用 application/octet-stream）。
* 你不能在一个 CSS 选择器中定义 @font-face。例如，这样写是无效的：

```css
.className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

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

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

参考
--

* About WOFF
* FontSquirrel @font-face generator
* Beautiful fonts with @font-face
* Open Font Library
* Microsoft Developer Network (MSDN) @font-face reference
* When can I use WOFF?
* When can I use SVG Fonts?


overflow-y - CSS：层叠样式表

overflow-y
==========

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

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

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

尝试一下
----

语法
--

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

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

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

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

### 取值

`visible`

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

`hidden`

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

`clip`

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

`scroll`

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

`auto`

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

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

形式定义
----

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

形式语法
----
```

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

```

示例
--

### 设置 overflow-y 行为

#### HTML

```html
<ul>
  <li>
    <code>overflow-y:hidden</code>——在盒外隐藏文本
    <div id="div1">
      歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
    </div>
  </li>

  <li>
    <code>overflow-y:scroll</code>——总是添加滚动条
    <div id="div2">
      歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
    </div>
  </li>

  <li>
    <code>overflow-y:visible</code>——必要时在盒外显示文本
    <div id="div3">
      歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
    </div>
  </li>

  <li>
    <code>overflow-y:auto</code>——在多数浏览器上等价于 <code>scroll</code>
    <div id="div4">
      歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
    </div>
  </li>
</ul>
```

#### CSS

```css
div {
  border: 1px solid black;
  width: 350px;
  height: 100px;
}

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

#### 结果

规范
--

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

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

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

参见
--

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


文本渲染 - CSS：层叠样式表

文本渲染
====

概述
--

`text-rendering` CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。

**备注：** 该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox）和 Webkit（Chrome、Safari）内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。

一个视觉上很明显的效果是，`optimizeLegibility` 属性值会在某些字体（比如，微软的 *Calibri*、*Candara*、*Constantia* 和 *Corbel*，或者 *DejaVu* 系列字体）小于 20px 时把某些相邻字符连接起来（比如 ff、fi、fl 等）。

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

语法
--

```css
/\* Keyword values \*/
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

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

### 值

`auto`

浏览器依照某些根据去推测在绘制文本时，何时该优化速度，易读性或者几何精度。对于该值在不同浏览器中解释的差异，请看兼容性表。

`optimizeSpeed`

浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度。它会使字间距和连字无效。

`optimizeLegibility`

浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度。它会使字间距和连字有效。**该属性值在移动设备上会造成比较明显的性能问题**，详细查看 text-rendering。

`geometricPrecision`

浏览器在绘制文本时将着重考虑几何精度，而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该值可以使使用某些字体的文本看起来不错。

对于 SVG，当文本缩放时，浏览器会计算文本最终大小（取决于特定的字体大小和相应的缩放比例）并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小，比如 9 并且 140% 的缩放，这个最终的字体大小为 12.6，字体系统中明显不存在，所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。

但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放，你可能看到并不太漂亮的文本渲染，但这个字体大小是你期望的，而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。

**提示**: WebKit 准确地的实现了这个值，但是 Gecko 把这个值按照 `optimizeLegibility` 处理。

示例
--

```css
/\* make sure all fonts in the HTML document display in all its glory,
 but avoid inadequate ligatures in class foo elements \*/

body {
  text-rendering: optimizeLegibility;
}
.foo {
  text-rendering: optimizeSpeed;
}
```

#### Live Example

**备注：** 没有在 Chrome 中看出例子中的区别来，可以移步看看这篇文章 text-rendering。

| CSS code | Kerning | Ligatures |
| --- | --- | --- |
| font: 19.9px 'DejaVu Serif',Constantia; | LYoWAT | ff fi fl ffl |
| font: 20px 'DejaVu Serif',Constantia; | LYoWAT | ff fi fl ffl |
| font: 3em 'DejaVu Serif',Constantia; text-rendering: optimizeSpeed; | LYoWAT | ff fi fl ffl |
| font: 3em 'Dejavu Serif',Constantia; text-rendering: optimizeLegibility; | LYoWAT | ff fi fl ffl |

### Gecko 注释

auto 选项的 20px 字体大小的阈值可以被 `browser.display.auto_quality_min_font_size` 值改变。

`optimizeSpeed` 选项在 Gecko 2.0 上已经没有效果了，因为标准的文字渲染代码已经非常快，而且目前还没有更快的渲染方法。详见 Firefox bug 595688。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextRenderingProperty |

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

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


padding - CSS：层叠样式表

padding
=======

**`padding`** CSS 简写属性控制元素所有四条边的内边距区域。

尝试一下
----

一个元素的内边距区域指的是其内容与其边框之间的空间。

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

属性构成
----

该属性是以下属性的简写：

* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`
语法
--

```css
/\* 应用于所有边 \*/
padding: 1em;

/\* 上边下边 | 左边右边 \*/
padding: 5% 10%;

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

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

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

`padding` 属性接受 1~4 个值。每个值可以是 `<length>` 或 `<percentage>`。取值不能为负。

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

**`<length>`**

以固定值为内边距。

`<percentage>`

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

标准定义
----

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

语法格式
----
```

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

```

示例
--

### 以像素为单位设置内边距

#### HTML

```html
<h4>此元素有合适的内边距。</h4>
<h3>此元素的内边距很大！</h3>
```

#### CSS

```css
h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}
```

#### 结果

### 以像素和百分数为单位设置内边距

```css
padding: 5%; /\* 所有边：5% 的内边距 \*/

padding: 10px; /\* 所有边：10px 的内边距 \*/

padding: 10px 20px; /\* 上边和下边：10px 的内边距 \*/
/\* 左边和右边：20px 的内边距 \*/

padding: 10px 3% 20px; /\* 上边：10px 的内边距 \*/
/\* 左边和右边：3% 的内边距 \*/
/\* 下边：20px 的内边距 \*/

padding: 1em 3px 30px 5px; /\* 上边：1em 的内边距\*/
/\* 右边：3px 的内边距\*/
/\* 下边：30px 的内边距\*/
/\* 左边：5px 的内边距\*/
```

规范
--

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

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

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

参阅
--

* CSS 基础框盒模型介绍
* `padding-top`, `padding-right`, `padding-bottom`，和 `padding-left`。
* 逻辑相关的属性：`padding-block-start`，`padding-block-end`，`padding-inline-start`，和 `padding-inline-end` 与其简称 `padding-block` 和 `padding-inline`


CSS 值函数 - CSS：层叠样式表

CSS 值函数
=======

**CSS 值函数**是调用特殊数据处理或计算的语句，以返回一个 CSS 属性的 CSS 值。CSS 值函数代表更复杂的数据类型，它们可能需要一些输入参数来计算返回值。

语法
--

```css
selector {
  property: function([argument]? [, argument]!);
}
```

值的语法以**函数名称**开始，后面是一个左括号 `(`。接下来是参数，然后用闭合小括号 `)` 结束函数。

函数可以接受多个参数，这些参数的格式与 CSS 属性值类似。允许有空白字符，但在括号内是可选的。在一些函数符号中，多个参数用逗号隔开，而其他参数则使用空格。

**备注：** CSS 值函数是作为属性值使用的，不应该与伪类相混淆。函数式伪类、语言伪类和几种树状结构伪类都需要参数值，但它们不是值函数。条件 @ 规则也不是值函数；括号是用来分组的。

转换函数
----

`<transform-function>` CSS 数据类型代表外观变换。它被用作 `transform` 属性的一个值。

### 转换函数

`translateX()`

水平移动一个元素。

`translateY()`

垂直移动一个元素。

`translateZ()` (en-US)

沿 z 轴方向移动一个元素。

`translate()`

在 2D 平面上移动一个元素。

`translate3d()`

在 3D 空间中移动一个元素。

### 旋转函数

`rotateX()`

沿水平轴旋转元素。

`rotateY()`

沿垂直轴旋转元素。

`rotateZ()`

沿 z 轴旋转元素。

`rotate()`

围绕 2D 平面的一个定点旋转一个元素。

`rotate3d()`

围绕 3D 平面的一个定轴旋转一个元素。

### 缩放函数

`scaleX()`

沿水平方向缩放元素。

`scaleY()` (en-US)

沿垂直方向缩放元素。

`scaleZ()` (en-US)

沿 z 轴方向缩放元素。

`scale()`

在 2D 平面上缩放元素。

`scale3d()` (en-US)

在 3D 空间中缩放元素。

### 倾斜函数

`skewX()`

沿水平方向倾斜元素。

`skewY()`

沿竖直方向倾斜元素。

`skew()`

在 2D 平面上倾斜元素。

### 矩阵函数

`matrix()`

描述一个齐次的二维变换矩阵。

`matrix3d()`

以 4x4 齐次矩阵的形式描述一个三维变换。

### 透视函数

`perspective()`

设置用户与平面 z=0 之间的距离。

数学函数
----

数学函数允许将 CSS 数字值写成数学表达式。

### 基本运算

`calc()`

在数字值上进行基本的算术运算。

### 比较函数

`min()`

计算一系列值的最小值。

`max()`

计算一系列值的最大值。

`clamp()`

计算最小值、中间值、最大值的中值。

### 阶跃值函数

`round()` (en-US)
实验性

根据舍入策略计算一个舍入的数字。

`mod()` (en-US)
实验性

计算一个数除以另一个数的模（与除数的符号相同）。

`rem()` (en-US)
实验性

计算一个数字除以另一个数字的余数（与被除数的符号相同）。

### 三角函数

`sin()`

计算一个数的三角正弦值。

`cos()`

计算一个数的三角余弦值。

`tan()`

计算一个数的三角正切值。

`asin()`

计算一个数的三角反正弦值。

`acos()`

计算一个数的三角反余弦值。

`atan()`

计算一个数的三角反正切值。

`atan2()`

计算平面内两个数字的三角反正切值。

### 指数函数

`pow()`

计算基数的幂次方值。

`sqrt()`

计算一个数的平方根。

`hypot()`

计算其参数平方之和的平方根。

`log()`

计算一个数的对数值。

`exp()`

计算一个数的 `e` 次方值。

### 符号函数

`abs()` (en-US)
实验性

计算一个数的绝对值。

`sign()` (en-US)
实验性

计算一个数的符号值（正值或负值）。

过滤器函数
-----

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

`blur()`

增加图像的高斯模糊度。

`brightness()`

增加或减少图像的亮度。

`contrast()`

增加或减少图像的对比度。

`drop-shadow()`

在图像背后应用阴影。

`grayscale()`

转换图像为灰度图。

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

改变图像的整体色调。

`invert()` (en-US)

反转图像的颜色。

`opacity()`

增加图像的透明度。

`saturate()` (en-US)

改变图像的整体饱和度。

`sepia()` (en-US)

增加图像偏棕褐色的程度。

颜色值函数
-----

`<color>` CSS 数据类型指定了不同的颜色表示方法。

`rgb()`

根据红、绿、蓝和 alpha（透明度）成分来定义一个给定的颜色。

`hsl()`

根据色调、饱和度、亮度和 alpha（透明度）成分来定义一个给定的颜色。

`hwb()` (en-US)

根据色调、白度和黑度成分来定义一个给定的颜色。

`lch()`
实验性

根据亮度、色度和色调成分来定义一个给定的颜色。

`oklch()`
实验性

根据亮度、色度、色调和 alpha（透明度）成分来定义一个给定的颜色。

`lab()`
实验性

根据实验室色彩空间中的亮度、a 轴距离和 b 轴距离来定义一个给定的颜色。

`oklab()`
实验性

根据实验室色彩空间中的亮度、a 轴距离、b 轴距离和 alpha（透明度）来定义一个给定的颜色。

`color()` (en-US)
实验性

指定一个特定的色彩空间，而不是隐含的 sRGB 色彩空间。

`color-mix()`
实验性

在一个给定的色彩空间中，将两个颜色值按给定的数量混合。

`color-contrast()`
实验性

从一个颜色列表中选择最高的颜色对比度，与一个基础颜色值相比较。

`device-cmyk()`
实验性

以独立于设备的方式定义 CMYK 颜色。

图像函数
----

`<image>` CSS 数据类型提供了图像或渐变的图形化表示。

### 渐变函数

`linear-gradient()`

线性渐变沿着一条假想线逐渐过渡颜色。

`radial-gradient()`

径向渐变从一个中心点（原点）逐步过渡颜色。

`conic-gradient()`

锥形渐变是在一个圆周上逐步过渡颜色。

`repeating-linear-gradient()`

类似于 `linear-gradient()`，接受相同的参数，但它在所有方向上无限重复使用色标，以覆盖其整个容器。

`repeating-radial-gradient()`

类似于 `radial-gradient()`，接受相同的参数，但它在所有方向上无限重复使用色标，以覆盖其整个容器。

`repeating-conic-gradient()` (en-US)

类似于 `conic-gradient()`，接受相同的参数，但它在所有方向上无限重复使用色标，以覆盖其整个容器。

### 图像函数

`image()` (en-US)
实验性

定义一个 `<image>`，与 `url()` 函数类似，但增加了一些功能，包括指定图片的方向性和首选图片不被支持时的后备图片。

`image-set()` (en-US)

从一组给定的 CSS 图片中挑选最合适的图片，主要用于高像素密度的屏幕。

`cross-fade()` (en-US)

以定义的透明度混合两个或多个图像。

`element()`
实验性

定义一个由任意 HTML 元素生成的 `<image>` 值。

`paint()` (en-US)

定义了一个用 PaintWorklet 生成的 `<image>` 值。

计数器函数
-----

CSS 计数器函数通常与 `content` 属性一起使用，不过理论上，只要支持 `<string>`，就可以使用。

`counter()`

如果存在计数器，返回一个代表指定计数器当前值的字符串。

`counters()`

启用嵌套的计数器，如果存在，返回一个拼接字符串，代表命名计数器的当前值。

`symbols()` (en-US)

定义内联的计数器样式，直接作为一个属性的值。

形状函数
----

`<basic-shape>` CSS 数据类型表示一个图形形状。它被用于 `clip-path`、`offset-path` (en-US) 和 `shape-outside` 属性中。

`circle()` (en-US)

定义一个圆形。

`ellipse()` (en-US)

定义一个椭圆形。

`inset()` (en-US)

定义一个嵌入矩形。

`polygon()` (en-US)

定义一个多边形。

`path()` (en-US)

接受 SVG 路径字符串，以便绘制一个形状。

引用函数
----

以下函数被用作属性的值，以引用其他地方定义的值。

`attr()`

使用定义在 HTML 元素上的属性值。

`env()`

使用用户代理定义的环境变量。

`url()`

使用指定 URL 定义的文件。

`var()`

使用自定义属性值，而不是其他属性值的任何部分。

网格函数
----

以下函数用于定义一个 CSS 网格。

`fit-content()`

根据公式 `min(maximum size, max(minimum size, argument))` 将一个给定的尺寸固定在一个可用的尺寸范围中。

`minmax()`

定义了一个大于等于 *min* 且小于等于 *max* 的尺寸范围。

`repeat()`

代表轨道列表的一个重复片段，允许有大量的列或行表现出重复的模式。

字体函数
----

CSS 字体函数与 `font-variant-alternates` 属性一起使用，可以控制备用字形的使用。

`stylistic()`

启用单个字符的风格替代。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `salt`，如 `salt 2`。

`styleset()`

启用字符集的风格选择。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `ssXY`，例如 `ss02`。

`character-variant()`

为字符启用特定的风格选择。它类似于 `styleset()`，但不会为一组字符创建连贯的字形；单个字符会有独立的、不一定连贯的风格。参数是一个映射到数字的特定字体名称。它对应于 OpenType 值 `cvXY`，例如 `cv02`。

`swash()`

启用 swash 字形。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `swsh` 和 `cswh`，例如 `swsh 2` 和 `cswh 2`。

`ornaments()`

启用诸如 fleurons 和其他丁字形的装饰物。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `ornm`，例如 `ornm 2`。

`annotation()`

启用注解，如圈出的数字或倒置的字符。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `nalt`，例如 `nalt 2`。

缓动函数
----

以下函数在过渡和动画属性中作为一个值使用。

`cubic-bezier()`

定义三次贝塞尔曲线的缓动函数。

`steps()`

在过渡中迭代若干次定格，每次定格停留相同的时间。

动画函数
----

以下函数被用作不同 `animation` 属性的值。

`scroll()` (en-US)
实验性

设置一个元素的 `animation-timeline` (en-US)，使其依赖于最近的父级（有该滚动条）或根容器的特定轴上的滚动条。

参见
--

* CSS 值和单位
* CSS 介绍：值和单位


grid-row - CSS：层叠样式表

grid-row
========

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-row`** 属性是一种 `grid-row-start` (en-US) 和 `grid-row-end` (en-US) 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。

尝试一下
----

如果指定了两个 <grid-line> 值，那么斜杠号前的值就被指定为 `grid-row-start`，斜杠后面的值就被指定为 `grid-row-end` 的值。

语法
--

```css
/\* 不同类型的属性值 \*/
/\* Keyword values \*/
grid-row: auto;
grid-row: auto / auto;

/\* <custom-ident> values \*/
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/\* <integer> + <custom-ident> values \*/
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/\* span + <integer> + <custom-ident> values \*/
grid-row: span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;

/\* Global values \*/
grid-row: inherit;
grid-row: initial;
grid-row: unset;
```

### 值

`auto`

表示对网格的布置行为不做干涉，即自动布置，自动的 span 或者默认 span 值为 1。

`<custom-ident>`

如果存在自定义的基线名（'<custom-ident>-start'/'<custom-ident>-end'），它就将第一个这样的基线贡献给网格单元。

**注意：** 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 `grid-row: foo;` 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 `foo-start`/`foo-end` 命名的其他基线）。

否则，它就会被当作整数 `1` 与 `<custom-ident>` 一起指定。

`<integer> && <custom-ident>?`

 将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是 <custom-ident>，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。
 `<integer>` 值不能为 `0`。

`span && [ <integer> || <custom-ident> ]`

为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是 <custom-ident>，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。

如果忽略 <integer> ，它就默认设为 `1`。它的值也不能为 0。

### 形式语法
```

grid-row =
  <grid-line> [ / <grid-line> ]?

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

示例
--

### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

### CSS

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

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}
```

IE 中的问题
-------

IE11 不支持网格单元的自动布置。除非显式地注释 `-ms-``grid-column` 和 `-ms-``grid-row`，否则所有单元都会在网格的第一行/列结束。这里有一个使用 JavaScript 提供自动注释的工具：source repository.

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # placement-shorthands |

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `grid-row-start` (en-US): `auto`
* `grid-row-end` (en-US): `auto`
 |
| 适用元素 | grid items and absolutely-positioned boxes whose containing block is a grid container |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `grid-row-start` (en-US): as specified
* `grid-row-end` (en-US): as specified
 |
| Animation type | discrete |

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

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

参见
--

* Related CSS properties: `grid-row-start` (en-US), `grid-row-end` (en-US), `grid-column`, `grid-column-start` (en-US), `grid-column-end` (en-US)
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Video tutorial: *Line-based placement*


font-family - CSS：层叠样式表

font-family
===========

CSS 属性 `font-family` 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

尝试一下
----

属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 `@font-face` 指定的可以直接下载的字体。

通常会使用属性缩写 `font` 来设置 `font-size` 和其他与字体相关的属性。

应当至少在使用的 `font-family` 列表中添加一个通用的字体族名，因为无法保证用户的计算机内已经安装了指定的字体，也不能保证使用 `@font-face` 提供的字体移动能够正确地下载。提供通用的字体族使得浏览器可以在无法得到最佳字体的情况下使用一个相对接近的备选字体。

`font-family` 属性指定的是一个优先级从高到低的字体列表。字体的选定*不是*在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是*逐字*进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。当一个字体只在某些特定的样式、变体或大小下有效时，这些属性的值也可能对字体族的选择造成影响。

语法
--

```css
/\* 一个字体族名和一个通用字体族名 \*/
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/\* 仅有一个通用字体族名 \*/
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

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

属性 `font-family` 列举一个或多个由逗号隔开的字体族。每个字体族由 `<family-name>` 或 `<generic-name>` 值指定。

下面的例子列举了两个字体族，其中第一个是 `<family-name>`，第二个是 `<generic-name>`：

```css
font-family: "Gill Sans Extrabold", sans-serif;
```

### 取值

`<family-name>`

一个字体族的名字。例如"Times" 和 "Helvetica" 都是字体族名。字体族名可以包含空格，但包含空格时应该用引号。

`<generic-name>`

通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。在列表的末尾应该至少有一个通用字体族名。以下是该属性可能的取值以及他们的定义。

`serif`

带衬线字体，笔画结尾有特殊的装饰线或衬线。

例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。

`sans-serif`

无衬线字体，即笔画结尾是平滑的字体。

例如：Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans、Nimbus Sans L、sans-serif。

`monospace`

等宽字体，即字体中每个字宽度相同。

例如：Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco、Lucida Console、monospace。

`cursive`

草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。

例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。

`fantasy`

Fantasy 字体主要是那些具有特殊艺术效果的字体。

例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。

`system-ui`

从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异，因此为那些不适合其他通用字体的字体提供了这个通用字体。

`ui-serif`

默认用户界面的带衬线字体。

`ui-sans-serif`

默认用户界面的无衬线字体。

`ui-monospace`

默认用户界面的等宽字体。

`ui-rounded`

默认用户界面的圆体。

`math`

针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的 double struck glyphs。

`emoji`

专门用于呈现 Emoji 表情符号的字体。

`fangsong`

一种汉字字体，介于宋体和楷体之间。这种字体常用于某些政府文件。

### 有效的字体族名

字体族名或者是引号包括的字符串，或者是不含引号的一个或多个合法标识串构成的。这意味着在没有带引号的字体族名的开头是不能使用标点符号字符和数字字符的。

例如，以下的声明是有效的：

```css
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
```

以下的声明是**无效的**：

```css
font-family:
  Goudy Bookletter 1911,
  sans-serif;
font-family: Red/Black, sans-serif;
font-family:
  "Lucida" Grande,
  sans-serif;
font-family: Ahem!, sans-serif;
font-family:
  test @foo,
 sans-serif;
font-family: #POUND, sans-serif;
font-family:
  Hawaii 5-0,
  sans-serif;
```

### 形式语法
```

font-family =
  [ <family-name> | <generic-family> ]#

<family-name> =
  <string>         |
  <custom-ident>+

<generic-family> =
  generic( <custom-ident>+ )  |
  <string>                    |
  <custom-ident>+

```

示例
--

### 一些通用字体

```css
.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.emoji {
  font-family: emoji;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}
```

```
<div class="serif">This is an example of a serif font.</div>

<div class="sansserif">This is an example of a sans-serif font.</div>

<div class="monospace">This is an example of a monospace font.</div>

<div class="cursive">This is an example of a cursive font.</div>

<div class="fantasy">This is an example of a fantasy font.</div>

<div class="math">This is an example of a math font.</div>

<div class="emoji">This is an example of an emoji font.</div>

<div class="fangsong">This is an example of a fangsong font.</div>
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |

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

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

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


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

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

CSS 属性 **`-webkit-text-stroke-width`** 指定了文本的笔触宽度。

语法
--

```css
/\* 关键词值 \*/
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

/\* 长度值 \*/
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-width: 0.1em;
-webkit-text-stroke-width: 1mm;
-webkit-text-stroke-width: 5pt;

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

### 取值

`<line-width>`

笔触宽度。

形式定义
----

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

形式语法
----
```

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

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

```

示例
--

### 不同的笔触宽度

#### CSS

```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-color: red;
}

#thin {
  -webkit-text-stroke-width: thin;
}

#medium {
  -webkit-text-stroke-width: 3px;
}

#thick {
  -webkit-text-stroke-width: 1.5mm;
}
```

#### HTML

```html
<p id="thin">细笔触</p>
<p id="medium">中笔触</p>
<p id="thick">粗笔触</p>
```

#### 结果

规范
--

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

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

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

参见
--

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


-webkit-overflow-scrolling - CSS：层叠样式表

-webkit-overflow-scrolling
==========================

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

### 概述

**`-webkit-overflow-scrolling`** 属性控制元素在移动设备上是否使用滚动回弹效果。

### 值

`auto`

使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。

`touch`

使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

### 示例

```css
-webkit-overflow-scrolling: touch; /\* 当手指从触摸屏上移开，会保持一段时间的滚动 \*/

-webkit-overflow-scrolling: auto; /\* 当手指从触摸屏上移开，滚动会立即停止 \*/
```

### 规范

尚未有相关规范。另在 Apple 提供的Safari CSS 参考文档中有所提及。

### 浏览器兼容性

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


content-visibility - CSS：层叠样式表

content-visibility
==================

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

CSS 属性 **`content-visibility`** 控制元素是否渲染其内容，以及施加一组强局限，由此允许用户代理有机会在不需要时省略大片的布局和渲染工作。此属性使用户代理得以在不需要时跳过元素的渲染工作（包括布局和绘制）——由此使页面的初始加载明显变快。

**备注：** 对于设置了 `content-visibility: auto` 的任意元素，在其渲染工作开始或不再被跳过时将触发 `contentvisibilityautostatechange` 事件。此事件为应用代码在不需要时开始或停止渲染过程（如在 `<canvas>` 上绘画）提供了便利，进而节约了处理能力。

语法
--

```css
/\* 关键词值 \*/
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

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

### 取值

`visible`

无效果。元素内容照常进行布局和渲染。

`hidden`

元素跳过其内容。被跳过的内容必须不可被例如页内查找和 tab 键顺序导航等用户代理特性访问，亦不可被选中或获得焦点。此值类似于为内容赋予 `display: none`。

`auto`

元素启用布局局限、样式局限和绘制局限。若元素不与用户相关，则元素还跳过其内容。与 `hidden` 不同的是，被跳过的内容必须仍可照常被例如页内查找和 tab 键顺序导航等用户代理特性访问，且必须照常可获得焦点或被选中。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `visible` |
| 适用元素 | elements for which size containment can apply |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Discrete behavior except when animating to or from `hidden` is visible for the entire duration |

形式语法
----
```

content-visibility =
  visible  |
  auto     |
  hidden

```

无障碍考虑
-----

`content-visibility: auto` 属性中的屏外内容仍在文档对象模型和无障碍树中。由此允许在改善页面性能时不负面影响无障碍性。

因为屏外内容的样式不被渲染，被特意用 `display: none` 或 `visibility: hidden` 隐藏的元素*仍将出现在无障碍树中*。若不想让元素出现在无障碍树中，请用 `aria-hidden="true"`。

示例
--

### 使用 auto 减少长页面的渲染开销

下列示例展示了使用 `content-visibility: auto` 跳过屏外章节的绘制和渲染。当某个章节（`section`）在视口外时，其内容绘制被跳过，直至章节靠近视口，由此有助于页面加载和交互。

#### HTML

```html
<section>
  <!-- 每节的内容…… -->
</section>
<section>
  <!-- 每节的内容…… -->
</section>
<section>
  <!-- 每节的内容…… -->
</section>
<!-- … -->
```

#### CSS

`contain-intrinsic-size` 属性为每个 `section` 元素的高度和宽度添加了 500px 的默认尺寸。章节在被渲染后，即使被滚动到视口外也将保持其渲染的固有尺寸。

```css
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
```

### 使用 hidden 管理可见性

下列示例展示了如何用 Javascript 管理内容可见性。使用 `content-visibility: hidden;` 代替 `display: none;` 在内容被隐藏时保留了其渲染状态且渲染更快。

#### HTML

```html
<div class="hidden">
  <button class="toggle">显示</button>
  <p>此内容初始时被隐藏，可点击按钮显示。</p>
</div>
<div class="visible">
  <button class="toggle">隐藏</button>
  <p>此内容初始时可见，可点击按钮隐藏。</p>
</div>
```

#### CSS

在有 `visible` 和 `hidden` 类的元素的直系子元素段落上设置了 `content-visibility` 属性。在此示例中，可通过 div 父元素的 CSS 类显示和隐藏段落内容。

为表示内容尺寸，此代码包含了 `contain-intrinsic-size` 属性。此属性有助于在内容被隐藏时减少布局漂移。

```css
p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}
```

#### JavaScript

```js
const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "显示" : "隐藏";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Containment Module Level 2 # content-visibility |

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

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

参见
--

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


grid-template-columns - CSS：层叠样式表

grid-template-columns
=====================

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-template-columns`** 该属性是基于网格列的维度，去定义网格线的名称和网格轨道的尺寸大小。

尝试一下
----

语法
--

```css
/\* Keyword value \*/
grid-template-columns: none;

/\* <track-list> values \*/
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/\* <auto-track-list> values \*/
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

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

### 值

`none`

这个关键字表示不明确的网格。所有的列和其大小都将由`grid-auto-columns` 属性隐式的指定。

`<length>`

非负值的长度大小。

`<percentage>`

 非负值且相对于网格容器的 `<percentage>`。如果网格容器的尺寸大小依赖网格轨道的大小（比如 inline-grid），则百分比值将被视为 `auto`。
 为了遵守网格的百分比，网格轨道本身定义的大小，将自动被调整为相对网格容器大小，并且是以最小量将网格轨道调整到最终的大小。

`<flex>`

非负值，用单位 `fr` 来定义网格轨道大小的弹性系数。每个定义了 `<flex>` 的网格轨道会按比例分配剩余的可用空间。当外层用一个 `minmax()` 表示时，它将是一个自动最小值（即 `minmax(auto, <flex>)`）。

`max-content`

是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。

`min-content`

是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。

`minmax(min, max)`

是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。如果 max 值小于 min 值，则该值会被视为 min 值。最大值可以设置为网格轨道系数值`<flex>` ，但最小值则不行。

Note: 该规范在将来可能会允许设置最小值为 `flex`，也会调整网格轨道算法计算出正确的大小。

`auto`

如果该网格轨道为最大时，该属性等同于 `<max-content>`，为最小时，则等同于 `<min-content>`。

**备注：** 网格轨道大小为 `auto`（且只有为 `auto`）时，才可以被属性 `align-content` 和 `justify-content` 拉伸。

`fit-content( [ <length> | <percentage> ] )`

相当于公式 `min(max-content, max(auto, argument))`，类似于 `auto` 的计算（即 `minmax(auto, max-content)`），除了网格轨道大小值是确定下来的，否则该值都大于 `auto` 的最小值。

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )`

表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | grid containers |
| 是否是继承属性 | 否 |
| Percentages | refer to corresponding dimension of the content area |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

形式语法
----
```

grid-template-columns =
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?

<track-list> =
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>?

<line-name-list> =
  [ <line-names> | <name-repeat> ]+

<line-names> =
  '[' <custom-ident>\* ']'

<track-size> =
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

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

<fixed-breadth> =
  <length-percentage [0,∞]>

```

示例
--

### CSS

```css
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

### 结果

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

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

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

参见
--

* 相关 CSS 属性：`grid-template-rows`、`grid-template-areas`、`grid-template`
* 网格布局教程：*Basic concepts of grid layout - Grid Tracks*
* 视频教程：*Defining a Grid*
* 子网格 (en-US)


CSS 值与单位 - CSS：层叠样式表

CSS 值与单位
========

所有的 CSS 声明都包括一个“属性/值”对。由于属性不同，对应的值可能是单个整数或关键字，也可能是一串包含或不包含单位的关键字和值的集合。CSS 属性接受一组共同的数据类型（属性的值和对应的单位）。下面是大多数这些数据类型的概览。想要获知每一种数据类型的更详细信息，请分别查看它们的链接。

文本数据类型
------

* `<custom-ident>`
* 作为 `<ident>` 预定义的关键字
* `<string>`
* `<url>()`

文本数据类型要么是 `<string>`，要么是一系列字符的合集，或者是 `<ident>`——一个实质上是不带引号的字符串的"CSS 标识符"。一个 `<string>` 必须被单引号或者双引号所包围。CSS 标识符，在标准中所列出的 `<ident>` 或者 `<custom-ident>` 则必须不带引号。

在 CSS 标准中，属性的值可以由 Web 开发者指定，例如关键帧动画（keyframe animations），字体的名称（font-family names），或者是被列为 `<custom-ident>` 和 / 或 `<string>` 的栅格区域（grid-areas）。

当允许使用带引号或者不带引号的两种用户定义的文本属性值时，标准列出为 `<custom-ident> | <string>`，也就是说引号是可选的。例如在指定动画的名称时：

```css
@keyframe validIdent {
  /\* keyframes go here \*/
}
@keyframe 'validString' {
  /\* keyframes go here \*/
}
```

有些文本属性值不允许被引号包围。例如， `grid-area` 属性对应的值可以是`<custom-ident>`，所以假设有一个栅格区域名为 `content` ，我们必须不带引号地使用：

```css
.item {
  grid-area: content;
}
```

相比之下，另一种数据类型是 `<string>`，例如 `content` 属性的值则必须被引号包围：

```css
.item::after {
  content: "This is my content.";
}
```

大多数时候你可以随心所欲地创建任何名称作为标识符，甚至包括使用 emoji 表情。然而标识符不能是 `none`，`unset`，`initial`，或者 `inherit`，以两条短横线开头。并且，你也不可以使用任何已经预定义的 CSS 关键字。查看 `<custom-ident>` 和 `<string>` 页面了解更多信息。

### 预定义的关键值

预定义的关键值是由 CSS 标准为属性定义的文本值。这些关键字也属于 CSS 标识符，因此在使用时无需用引号包围。

当在 CSS 标准或者 MDN 属性页面中查看某个 CSS 属性时，该属性所有允许的取值都会以下面表格的形式列出。下面的值是 `float` 属性可以取的预定义值：
```

left | right | none | inline-start | inline-end
```

这些值在使用时不需要引号：

```css
.box {
  float: left;
}
```

### CSS 全局范围内的值

预定义的关键值往往是针对某一个属性的。作为补充，所有 CSS 属性都可以接受 CSS 全局范围内的值：`initial`，`inherit` 和 `unset`。这些全局范围的值往往指定了一种默认的行为。

`initial`指定了当前值作为属性的初始值。`inherit`关键字则指定当前元素的属性值基于父元素进行计算，即继承。

`unset`关键字的作用是`inherit`或`initial`中的一者，取决于某个 CSS 属性是否可以自父元素继承。

`revert` (en-US) 在 Cascade Level 4 标准中被引入，但这一属性值还没有较好的浏览器支持现状。

### URLs

`<url>()` 类型使用一个函数符号，接收一个`<string>`类型的 URL。这个 URL 可以是绝对地址或者相对地址。例如，如果你想要设置一张背景图片，那么你可以采用如下两种做法：

```css
.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}
```

`url()`的参数可以也可以不使用引号。如果使用引号包围了 URL，那么它会被解析为一个`<url-token>`，包含对某些字符的额外转义。查看 `<url>()` 以获取更多信息。

数值数据类型
------

* `<integer>`
* `<number>`
* `<dimension>`
* `<percentage>`
### 整数

一个整数包含 `0` 到 `9`的一个或多个十进制数字，例如 `1024` 或 `-55`。一个整数可能额外包含 `+` 或 `-` 前缀，在正负号和数值之间没有任何空格。

### 数值

`<number>` 表示一个真正的数，有可能又或者没有小数点和小数部分。例如 `0.255`，`128` 或 `-1.2`。数值也可能包含前缀 `+` 或 `-` 标识正负。

### 尺寸

`<dimension>` 是一个包含单位的 `<number>`，例如 `45deg`，`100ms`，或者 `10px`。单位是大小写敏感的，且数值和单位之间不允许有任何的空格或其他字符。例如 `1 cm` 不是一个合法的值。

CSS 使用尺寸来指定：

* `<length>` （距离单位）
* `<angle>`
* `<time>`
* `<frequency>`
* `<resolution>`

这些都将在下面的部分里一一介绍。

#### 距离单位

一个距离单位，或这也称为长度（length），允许作为属性的值。它被描述为 `<length>` 类型。CSS 中有两种长度：相对和绝对。

相对长度单位基于其他元素的长度。例如 `em` 基于该元素的字号大小，`vh` 则与设备视口的高度有关。

| 单位 | 基于... |
| --- | --- |
| `em` | 元素的字号 |
| `ex` | 字体的 X 字高（x-height） |
| `cap` | 字体中大写字母的标称高度 |
| `ch` | Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph. |
| `ic` | Average character advance of a full width glyph in the element’s font, as represented by the“水” (CJK water ideograph, U+6C34) glyph. |
| `rem` | 根元素的字体大小。 |
| `lh` | 元素的行高。 |
| `rlh` | 根元素的行高。 |
| `vw` | 1% of viewport's width. |
| `vh` | 1% of viewport's height. |
| `vi` | 1% of viewport's size in the root element's inline axis. |
| `vb` | 1% of viewport's size in the root element's block axis. |
| `vmin` | 1% of viewport's smaller dimension. |
| `vmax` | 1% of viewport's larger dimension. |

Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, `mm` is a physical millimeter, 1/10th of a centimeter.

| Unit | Name | Equivalent to |
| --- | --- | --- |
| `cm` | Centimeters | 1cm = 96px/2.54 |
| `mm` | Millimeters | 1mm = 1/10th of 1cm |
| `Q` | Quarter-millimeters | 1Q = 1/40th of 1cm |
| `in` | Inches | 1in = 2.54cm = 96px |
| `pc` | Picas | 1pc = 1/16th of 1in |
| `pt` | Points | 1pt = 1/72th of 1in |
| `px` | Pixels | 1px = 1/96th of 1in |

When including a length value, if the length is `0`, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.

#### Angle units

Angle values are represented by the type `<angle>` and accept the following values:

| Unit | Name | Description |
| --- | --- | --- |
| `deg` | Degrees | There are 360 degrees in a full circle. |
| `grad` | Gradians | There are 400 gradians in a full circle. |
| `rad` | Radians | There are 2π radians in a full circle. |
| `turn` | Turns | There is 1 turn in a full circle. |

#### Time units

Time values are represented by the type `<time>`. When including a time value, the unit identifier — the `s` or `ms` — is required. It accepts the following values.

| Unit | Name | Description |
| --- | --- | --- |
| `s` | Seconds |  |
| `ms` | Milliseconds | There are 1,000 milliseconds in a second. |

#### Frequency units

Frequency values are represented by the type `<frequency>`. It accepts the following values.

| Unit | Name | Description |
| --- | --- | --- |
| `Hz` | Hertz | Represents the number of occurrences per second. |
| `kHz` | KiloHertz | A kiloHertz is 1000 Hertz. |

`1Hz`, which can also be written as `1hz` or `1HZ`, is one cycle per second.

#### Resolution unit

Resolution units are represented by the type `<resolution>`. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

| Unit | Description |
| --- | --- |
| `dpi` | Dots per inch. |
| `dpcm` | Dots per centimetre. |
| `dppx`, `x` | Dots per px unit. |

### Percentages

A `<percentage>` is a type that represents a fraction of some other value.

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

As an example, if you specify the `width` of a box as a percentage, it refers to the percentage of the box's parent's computed width:

```css
.box {
  width: 50%;
}
```

### Mixing percentages and dimensions

Some properties accept a dimension that could be either one of two types, for example a `<length>` **or** a `<percentage>`. In this case the allowed value is detailed in the specification as a combination unit, e.g. `<length-percentage>`. Other possible combinations are as follows:

* `<frequency-percentage>` (en-US)
* `<angle-percentage>`
* `<time-percentage>`
### Special data types (defined in other specs)

* `<color>`
* `<image>`
* `<position>`

#### Color

The `<color>` value specifies the color of an element feature (e.g. it's background color), and is defined in the CSS Color Module.

#### Image

The `<image>` value specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

#### Position

The `<position>` type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a `background-position` and therefore specified in the CSS Backgrounds and Borders specification.

### Functional notation

* `calc()`
* `min()`
* `max()`
* `clamp()`
* `toggle()`
* `attr()`

Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis `(` followed by the argument(s) to the notation followed by a right parenthesis `)`. Functions can take multiple arguments, which are formatted similarly to a CSS property value.

White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for `min()`, `max()` and `clamp()` functions.)

Some legacy functional notations such as `rgba()` use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.

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

| Specification |
| --- |
| CSS Values and Units Module Level 4  |
| CSS Color Module Level 4  |
| CSS Images Module Level 3  |

See also
--------

* CSS Basic Data Types
* Introduction to CSS: Values and Units


attr - CSS：层叠样式表

attr
====

概述
--

**备注：** `attr()` 理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 `content` 属性，其他的属性和高级特性目前是实验性的

译者注：如果发现浏览器兼容表里 attr() 的高级用法依旧没有良好的支持的话，本文大部分内容都是纸上谈兵

CSS 表达式 `attr()` 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

`attr()` 表达式可以用于任何 CSS 属性。
实验性

用法
--
```

语法：attr( attribute-name <type-or-unit>? [, <fallback> ]? )
```

### 解释

`attribute-name`

是 CSS 所引用的 HTML 属性名称。

`<type-or-unit>`

表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么`attr()`表达式也不合法。若省略，则默认值为`string`。其合法值包括：

| 关键字 | 类型 | 备注 | 默认值 |
| --- | --- | --- | --- |
| `string` | `<string>` | 属性值将被解析为 `<string>` | 空字符串 |
| `color`
实验性
 | `<color>` | 属性值将被解析为#xxx、#xxxxxx 或关键字的形式，且必须为合法 CSS `<string>` 值。前缀与后缀空格将被截掉。 | 当前颜色 |
| `url`
实验性
 | `<uri>()` (en-US) | 属性值将被解析为可用于`url()`函数的字符串。相对 URL 是根据 HTML 文档的路径解析，而不是样式文件所在的路径。前缀与后缀空格将被截掉。 | URL `about:invalid`，表示资源不存在。 |
| `integer`
实验性
 | `<integer>` | 属性值将被解析为 CSS `<integer>`。若不是合法值（不是整数或超出 CSS 属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。 | `0`，或该属性允许的最小值（如果 0 是不合法的值）。 |
| `number`
实验性
 | `<number>` | 属性值将被解析为 CSS `<number>`。若不是合法值（不是数字或超出 CSS 属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。 | `0`，或该属性允许的最小值（如果 0 是不合法的值）。 |
| `length`
实验性
 | `<length>` | 属性值将被解析为 CSS `<length>`，带单位，比如 `12.5em`。若不是合法值（不是长度值或超出 CSS 属性规定的范围），则使用默认值。若属性值是一个相对长度， `attr()`会将其计算为绝对长度。前缀与后缀空格将被截掉。 | `0`，或该属性允许的最小值（如果 0 是不合法的值）。 |
| `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc`
实验性
 | `<length>` | 属性值将被解析为 CSS `<number>`，不带单位，如 `12.5`，并被解释为带有所规定单位的 `<length>` 值。若不是合法值（不是长度值或超出 CSS 属性规定的范围），则使用默认值。若属性值是一个相对长度， `attr()`会将其计算为绝对长度。前缀与后缀空格将被截掉。 | `0`，或该属性允许的最小值（如果 0 是不合法的值）。 |
| `angle`
实验性
 | `<angle>` | 属性值将被解析为 CSS `<angle>`，带单位，如`30.5deg`。若不是合法值（不是角度值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 | `0deg`，或该属性允许的最小值（如果 0deg 是不合法的值）。 |
| `deg`, `grad`, `rad`
实验性
 | `<angle>` | 属性值将被解析为 CSS `<number>`，不带单位，如`12.5`)，并被解释为带有所规定单位的 `<angle>` 值。若不是合法值（不是角度值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 | `0deg`，或该属性允许的最小值（如果 0deg 是不合法的值）。 |
| `time`
实验性
 | `<time>` | 属性值将被解析为 CSS `<time>`，带单位，如`30.5ms`。若不是合法值（不是时间值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 | `0s`，或该属性允许的最小值（如果 0s 是不合法的值）。 |
| `s`, `ms`
实验性
 | `<time>` | 属性值将被解析为 CSS `<time>`，不带单位，如`30.5`，并被解释为带有所规定单位的 `<time>` 值。。若不是合法值（不是时间值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 | `0s`，或该属性允许的最小值（如果 0s 是不合法的值）。 |
| `frequency`
实验性
 | `<frequency>` | 属性值将被解析为 CSS `<frequency>`，带单位，如`12.5kHz`)。若不是合法值（不是频率值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 | `0Hz`，或该属性允许的最小值（如果 0Hz 是不合法的值）。 |
| `Hz`, `kHz`
实验性
 | `<frequency>` | 属性值将被解析为 CSS `<frequency>`，不带单位，如`12.5`)，并被解释为带有所规定单位的`<frequency>`值。若不是合法值（不是频率值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 | `0Hz`，或该属性允许的最小值（如果 0Hz 是不合法的值）。 |
| `%`
实验性
 | `<percentage>` | 属性值将被解析为 CSS `<number>`，不带单位，如`12.5`)，并被解释为带有所规定单位的 `<percentage>`值。若不是合法值（不是数字或超出 CSS 属性规定的范围），则使用默认值。若属性值用作长度，`attr()`将其计算为绝对长度。前缀与后缀空格将被截掉。 | `0%`，或该属性允许的最小值（如果 0% 是不合法的值）。 |

`<fallback>`

如果 HTML 元素缺少所规定的属性值或属性值不合法，则使用`fallback`值。该值必须合法，且不能包含另一个`attr()`表达式。如果`attr()`不是所在 CSS 属性值的唯一值，其`<fallback>`值必须为`<type-or-unit>`所指定的类型，否则 CSS 会使用相应`<type-or-unit>`定义的默认值（见上表）。

示例
--

```css
p:before {
  content: attr(data-foo) " ";
}
```

```html
<p data-foo="hello">world</p>
```

### 结果

hello world

### 示例 1

#### HTML

```html
<p data-foo="hello">world</p>
```

#### CSS

```css
[data-foo]::before {
  content: attr(data-foo) " ";
}
```

#### Result

### 示例 2

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

#### HTML

```html
<div class="background" data-background="lime">
  颜色应该是红色而不是绿色因为浏览器并不支持 attr() 的高级用法
</div>
```

#### CSS

```css
.background {
  height: 100vh;
}
```

```css
.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 5 # attr-notation |

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

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

参见
--

* Attribute selectors
* HTML `data-*` attributes
* SVG `data-*` attributes (en-US)


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

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

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

尝试一下
----

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

属性构成
----

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

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

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

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

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

### 取值

`<length-percentage>`

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

`auto`

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

形式定义
----

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

形式语法
----
```

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

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

```

规范
--

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

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

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

参见
--

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


transform - CSS：层叠样式表

transform
=========

CSS **`transform`** 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

尝试一下
----

**警告：** 只能转换由盒模型定位的元素。根据经验，如果元素具有`display: block`，则由盒模型定位元素。

语法
--

```css
/\* Keyword values \*/
transform: none;

/\* Function values \*/
transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/\* Multiple function values \*/
transform: translateX(10px) rotate(10deg) translateY(5px);

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

`transform`属性可以指定为关键字值 `none` 或一个或多个 `<transform-function>` 值。

### 值

`<transform-function>`

要应用的一个或多个 CSS 变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。

`none`

不应用任何变换。

### 语法格式
```

transform =
  none              |
  <transform-list>

<transform-list> =
  <transform-function>+

```

示例
--

### HTML

```html
<div>Transformed element</div>
```

### CSS

```css
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}
```

### 结果

有关更多示例，请参阅使用 CSS 变换和`<transform-function>`。

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the size of bounding box |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates stacking context | yes |

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

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

参见
--

* Using CSS transforms (en-US)
* `<transform-function>` data type
* A cross-browser 2D transform plugin for jQuery


::-webkit-slider-thumb - CSS：层叠样式表

::-webkit-slider-thumb
======================

总结
--

**`::-webkit-slider-thumb`**

这是 type 为 range 的 input 标签内的一种伪类样式，用于设置 range 的滑块的具体样式，该伪类只在内核为 webkit/blink 的浏览器中有效

使用方式
----

该伪类需要配和 **::-webkit-slider-runnable-track** 使用，否则会没有效果

```css
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /\*清除默认样式\*/
  height: 7vw; /\*设置滑块高度\*/
  width: 5vw; /\*设置滑块宽度\*/
  background: #000; /\*设置背景色\*/
  border-radius: 10vw 10vw; /\*加个圆角边\*/
  margin-top: -1vw; /\*使用 position 的话会导致滑块不滑动，但是绑定的 value 是改变的，所以这里使用 margin-top 去做定位\*/
}

input[type="range"]::-webkit-slider-runnable-track {
  border-radius: 30px;
  background: #128;
  height: 15px;
}
```

规范
--

这不是任何规范中的一部分，这是 webkit/bink 内核特有的 (chrome/safari)

参见
--

* ::-webkit-slider-runnable-track
* 其他浏览器内与该功能类似的伪类
    + ::-moz-range-thumb
    + ::-ms-thumb
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders


scrollbar-width - CSS：层叠样式表

scrollbar-width
===============

**`scrollbar-width`** 属性允许开发者在元素显示滚动条时设置滚动条的最大宽度。

语法
--

```css
/\* 关键字值 \*/
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

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

### 取值

*<scrollbar-width>*

将滚动条的宽度定义为数值宽度或者预定义宽度，当被定义为预定义宽度时，则必须为下列值之一：

|  |  |
| --- | --- |
| `auto` | 系统默认的滚动条宽度。 |
| `thin` | 系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度。 |
| `none` | 不显示滚动条，但是该元素依然可以滚动。 |

**备注：** 用户代理必须将应用于根元素的任何 `scrollbar-width` 值应用于视口。

无障碍考虑
-----

请注意使用此属性时需谨慎。如果开发者未提供替代的滚动机制，将 `scrollbar-width` 设置为 `thin` 或 `none` 可能会使内容难以或无法滚动。虽然在这种情况下，滑动手势或鼠标滚轮可以启用滚动，但某些设备没有滚动替代方案。

WCAG 标准 2.1.1（键盘）已经存在很长时间，以便为基本键盘可访问性提供建议，并且这应该包括内容区域的滚动。在 WCAG 2.1 中引入的标准 2.5.5（目标大小）建议触摸目标的宽度和高度至少为 44 像素（尽管在高分辨率屏幕上这个问题会更严重，建议进行全面测试）。

* MDN 理解 WCAG，指南 2.1 解释 (en-US)
* MDN 理解 WCAG，指南 2.5 解释 (en-US)
* 理解成功标准 2.1.1 | W3C 理解 WCAG 2.1
* 理解成功标准 2.5.5 | W3C 理解 WCAG 2.1
形式定义
----

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

形式语法
----
```

scrollbar-width =
  auto  |
  thin  |
  none

```

示例
--

### 调整溢出滚动条的大小

#### CSS

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}
```

#### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |

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

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

参见
--

* `::-webkit-scrollbar`


:right - CSS：层叠样式表

:right
======

**`:right`** CSS 伪类必须与@规则 `@page` 一起配套使用，表示打印文档的所有右页。

```css
/\* 当打印时会选择所有文档右页 \*/
@page :right {
  margin: 2in 3in;
}
```

这里的“左”或“右”不是固定的，取决与文档的写作方向。如果第一页主要文字方向是从左到右的，那么它就是`:right`右页，反之它就是`:left`左页。

**备注：** Note: 可通过 `bdo` 标签 的 `dir` 属性改变文字方向。

**备注：** 此伪类只能用于更改页面的 `margin`, `padding`, `border`, and `background` 属性。其他属性都将被忽略，只会影响页框，不会影响文档内容。

语法
--
```

@page:right{
    margin: * *;
}
```

示例
--

```css
@page :right {
  margin: 2in 3in;
}
```

规范
--

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

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

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

参见
--

* `@page`
* Other page-related pseudo-classes: `:first`, `:left`


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

border-image-outset
===================

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

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

* Learn more
* See full compatibility
* Report feedback
概述
--

`border-image-outset` 属性定义边框图像可超出边框盒的大小。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |

语法
--
```

Formal syntax:
```
border-image-outset =
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}

```

```
```

/* border-image-outset: sides */
border-image-outset: 30%;

/* border-image-outset:垂直 水平 */
border-image-outset: 10% 30%;

/* border-image-outset: 顶 水平 底 */
border-image-outset: 30px 30% 45px;

/* border-image-outset:顶 右 底 左  */
border-image-outset: 7px 12px 14px 5px;

border-image-repeat: inherit;
```

### 值

*sides*

边框图像在四个方向超出边框盒的`<length>`或`<number>`数量。

*horizontal*

边框图像在水平方向（左和右）超出边框盒的`<length>`或`<number>`数量。

*vertical*

边框图像在垂直方向（上和下）超出边框盒的`<length>`或`<number>`数量。

*top*

边框图像在上方超出边框盒的`<length>`或`<number>`数量。

*bottom*

边框图像在下方超出边框盒的`<length>`或`<number>`数量。

*right*

边框图像在右方超出边框盒的`<length>`或`<number>`数量。

*left*

边框图像在左方超出边框盒的`<length>`或`<number>`数量。

`inherit`

四个方向的值都继承于父元素的该属性计算后值。

规范
--

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

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

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


font-size - CSS：层叠样式表

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

**`font-size`** CSS 属性设置字体大小。更改字体大小还会更新字体大小相关的 `<length>` 单位，例如 `em`、`ex` 等。

尝试一下
----

语法
--

```css
/\* <absolute-size> 值 \*/
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/\* <relative-size> 值 \*/
font-size: smaller;
font-size: larger;

/\* <length> 值 \*/
font-size: 12px;
font-size: 0.8em;

/\* <percentage> 值 \*/
font-size: 80%;

/\* math 值 \*/
font-size: math;

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

`font-size` 属性可以通过以下方式之一进行指定：

* 通过绝对大小、相对大小或 `math` 关键字之一
* 通过 `<length>` 或 `<percentage>`，相对于元素的字体大小。
### 值

`xx-small`、`x-small`、`small`、`medium`、`large`、`x-large`、`xx-large`、`xxx-large`

基于用户默认字体大小（`medium`）的绝对大小关键字。

`larger`、`smaller`

相对大小关键字。字体大小将相对于父元素的字体大小变大或变小，大致按照上面用于区分绝对大小关键字的比率。

`<length>`

一个正的 `<length>` 值。对于大多数相对于字体的单位（例如 `em` 和 `ex`），字体大小相对于父元素的字体大小。

对于基于根元素的字体相关单位（例如 `rem`），字体大小相对于 `<html>`（根）元素使用的字体大小。

`<percentage>`

一个正的 `<percentage>` 值，相对于父元素的字体大小。

**备注：** 为了最大化无障碍性，通常最好使用相对于用户默认字体大小的值。

* `math`
实验性

 使用特殊的数学缩放规则来确定 `font-size` 属性的计算值。
描述
--

有几种指定字体大小的方法，包括关键字，像素或 em 的数字值。根据特定网页的需求选择适当的方法。

### 关键字

关键词是在网页上设置字体大小的好方法。通过在 `<body>` 元素上设置关键字字体大小，你可以在页面上的其他任何地方设置相对字体大小，从而使你能够轻松地按比例缩放整个页面上的字体大小。

### 像素

以像素值（`px`）设置字体大小是需要像素级精度时的不错选择。px 值是静态的。这是一种跨操作系统和跨浏览器的方式，可以确切地告诉浏览器以你指定的像素高度呈现字母。因为可能使用不同的算法来实现类似的效果，结果可能在不同浏览器间略有差异。

字体大小设置也可以组合使用。例如，如果父元素设置为 `16px`，其子元素设置为 `larger`，则子元素在页面上显示比父元素更大。

**备注：** 使用 `px` 定义字体大小会破坏无障碍，因为用户在某些浏览器中无法更改字体大小。例如，视力有限的用户可能希望将字体大小设置得比网页设计师选择的大小大得多。如果你希望创建包容性设计，请避免使用它们来定义字体大小。

### Em

使用 `em` 值创建动态或计算字体大小（历史上，`em` 单位是从给定字体中大写字母“M”的宽度派生的）。数字值作为当前元素的 `font-size` 属性的乘数。考虑以下示例：

```css
p {
  font-size: 2em;
}
```

在这种情况下，`<p>` 元素的大小将会是其通过继承得到的 `font-size` 计算值的两倍。因此，`1em` 的 `font-size` 等于元素所使用的 `font-size` 计算值。

为了计算所需像素值的等效 `em` 值，你可以使用以下公式：
```

em = 希望得到的像素大小 / 父元素字体像素大小
```

例如，假设页面的 `<body>` 的 `font-size` 设置为 `16px`。如果你想要的字体大小为 `12px`，那么应该指定 `0.75em`（因为 12/16 = 0.75）。同样，如果你想要字体大小为 `10px`，则应指定 `0.625em`（10/16 = 0.625）；对于 `22px`，请指定 `1.375em`（22/16）。

CSS 中的 `em` 是非常有用的单位，因为它会根据读者选择使用的字体自动调整其长度。

记住一个重要事实：em 值是复合的。看下面的 HTML 和 CSS：

```css
html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}
```

```html
<div>
  <span>Outer <span>inner</span> outer</span>
</div>
```

结果是：

假设浏览器的默认 `font-size` 为 16px，则单词“outer”将渲染为 25.6px，但单词“inner”将渲染为 40.96px。这是因为内部 `<span>` 的 `font-size` 为 1.6em，相对于其父级的 `font-size`，而其父级又相对于其父级的 `font-size`。这通常被称为复合。

### Rem

`rem` 值的发明是为了避免复合问题。`rem` 值是相对于根 `html` 元素而不是父元素的。换句话说，它允许你以相对方式指定字体大小，而不受到父元素大小的影响，从而消除了复合问题。

下面的 CSS 与前一个示例几乎相同。唯一的例外是单位已更改为 `rem`。

```css
html {
  font-size: 100%;
}
span {
  font-size: 1.6rem;
}
```

然后我们将这个 CSS 应用到相同的 HTML 上，它看起来像这样：

```html
<span>Outer <span>inner</span> outer</span>
```

在这个例子中，“outer inner outer”这些单词都以 25.6 像素的大小显示（假设浏览器的 `font-size` 已保留默认值 16px）。

### Ex

像 `em` 单位一样，使用 `ex` 单位设置元素的 `font-size` 是计算或动态的。它的行为方式完全相同，只是在使用 `ex` 单位设置 `font-size` 属性时，`font-size` 等于页面上使用的第一个可用字体的 x 字高度。数字值相对地乘以元素继承的 `font-size` 且 `font-size` 相对复合。

请参阅 W3C 编辑草案，了解有关 `ex` 等字体相对长度单位的更详细描述。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| Percentages | refer to the parent element's font size |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

形式语法
----
```

font-size =
  <absolute-size> (en-US)            |
  <relative-size> (en-US)            |
  <length-percentage [0,∞]>  |
  math

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

```

示例
--

### 设置字体大小

#### CSS

```css
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}
```

#### HTML

```html
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>
```

#### 结果

规范
--

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

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

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

参见
--

* `font-size-adjust`
* `font-style`
* `font-weight`
* `math-depth` (en-US)
* `math-style` (en-US)
* 基本文本和字体样式


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

border-top-right-radius
=======================

`border-top-right-radius` 属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是 0 的话，就是没有圆弧，换句话就是说拐角是方形的。

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

一个背景通常以一张图片或者颜色开始，在边框处被剪切，更甚至就是一个圆形；剪切的额外定位通过一个 CSS 属性"background-clip"来定义。

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

语法
--

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

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

border-top-right-radius: inherit;

/\* Global values \*/
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: revert-layer;
border-top-right-radius: unset;
```

之上：

*radius*

这是一个 `<length>` 或 `<percentage>`，标志着圆的半径在这个拐角用作边框。

*horizontal*

这是一个 `<length>` 或 `<percentage>`，标志着椭圆的水平半长轴在这个拐角被用作边框。

*vertical*

这是一个 `<length>` 或 `<percentage>`，标志着椭圆的垂直半长轴在这个拐角被用作边框。

### 属性值

`<长度>`

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过`<length>`，负值是无效的。

`<百分数>`

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。

形式定义
----

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

形式语法
----
```

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

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

```

示例
--

| 实例 | 代码 |
| --- | --- |
|  | 圆形的弧被用作边框
```

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

 |
|  | 椭圆的弧被用作边框
```

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

 |
|  | 盒子是方形，圆形的弧被用作边框
```

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

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

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

 |
|  | 背景颜色在边框处剪切
```

div {
  border-top-right-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.

参见
--

边框半径相关的 CSS 属性：CSS 速记 `border-radius`, 其他角的属性：`border-top-left-radius`, `border-bottom-right-radius` (en-US)和 `border-bottom-left-radius`。


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

margin-block-end
================

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

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
margin-block-end: 10px; /\* 绝对长度 \*/
margin-block-end: 1em; /\* 相对于文本尺寸 \*/
margin-block-end: 5%; /\* 相对于最近区块容器的宽度 \*/

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

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

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

与此属性相关的有 `margin-block-start`、`margin-inline-start` 和 `margin-inline-end` 等定义元素的其他外边距的属性。

### 取值

`margin-block-end` 属性的取值与 `margin-left` 属性相同。

形式定义
----

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

形式语法
----
```

margin-block-end =
  <'margin-top'>

```

示例
--

### 设置块末外边距

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  margin-block-end: 20px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

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

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

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

参见
--

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


var() - CSS：层叠样式表

var()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
**`var()`** CSS 函数可以插入一个自定义属性（有时也被称为“CSS 变量”）的值，用来代替非自定义属性中值的任何部分。

尝试一下
----

`var()` 函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

语法
--

函数的第一个参数是要替换的自定义属性的名称。函数的第二个参数是可选的，用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。
```

<var()> =
  var( <custom-property-name> , <declaration-value>? )

```

**备注：** 自定义属性的回退值允许使用逗号。例如，`var(--foo, red, blue)` 将 `red, blue` 同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

### 值

`<custom-property-name>` 自定义属性名

在实际应用中它被定义为以两个破折号开始的任何有效标识符。自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。

`<declaration-value>` 声明值（回退值）

回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如 `)`、`]` 或 `}`）、感叹号以及顶层分号（不被任何非 `var()` 的括号包裹的分号，例如 `var(--bg-color, --bs;color)` 是不合法的，而 `var(--bg-color, --value(bs;color))` 是合法的）。

示例
--

### 在 :root 上使用自定义属性

```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```

### 当第一个值未定义，回退值生效

```css
/\* 回退值 \*/

/\* 在 component 的样式中：\*/
.component .header {
  /\* header-color 没有被设置，将使用回退值 blue \*/
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/\* In the larger application's style: \*/
.component {
  --text-color: #080;
}
```

### 使用自定义属性作为回退值

```css
:root {
  --backup-bg-color: teal;
}

body {
  /\* main-bg-color 没有被设置，将使用回退值 backup-bg-color。如果 backup-bg-color 没有被设置，将使用回退值 white。 \*/
  color: var(--main-bg-color, var(--backup-bg-color, white));
}
```

规范
--

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |

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

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

参见
--

* `env(…)`——由 user‑agent 控制的只读环境变量。
* 使用 CSS 自定义属性


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

font-variant-position
=====================

The **`font-variant-position`** CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in `<sub>` and `<sup>` elements.

```css
/\* Keyword values \*/
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

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

When the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.

These alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.

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

语法
--

The `font-variant-position` property is specified as one of the keyword values listed below.

### 可选值

`normal`

Deactivates alternate superscript and subscript glyphs.

`sub`

Activates subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

`super`

Activates superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

### 形式语法
```

font-variant-position =
  normal  |
  sub     |
  super

```

示例
--

### HTML

```html
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
```

### CSS

```css
p {
  display: inline;
}

.normal {
  font-variant-position: normal;
}

.super {
  font-variant-position: super;
}

.sub {
  font-variant-position: sub;
}
```

### 结果

规范
--

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

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

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


outline-color - CSS：层叠样式表

outline-color
=============

**`outline-color`** CSS 属性 被用于设置一个元素轮廓的颜色。

尝试一下
----

大多时候使用`outline`而不是 `outline-style`, `outline-width` 和 `outline-color`会更方便。

元素轮廓是绘制于元素周围的一条线，位于`border`的外围，使元素突出。不像 border，轮廓在元素的 frame 外绘制并且可能与其他元素重叠。而 border 不会出现这种现象 (除非故意).

语法
--

```css
/\* <color> values \*/
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;

/\* Keyword value \*/
outline-color: invert;

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

`outline-color`可用以下这些值。

### 值

`<color>`

轮廓颜色，规则同 `<color>`.

`invert`

反色，用于确认轮廓的显示。注意不是所有浏览器都支持该属性，若不则该属性无效。

### 形式语法
```

outline-color =
  auto                      |
  [ <color> | <image-1D> ]

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

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

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

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

```

示例
--

### HTML

```html
<p>My outline is blue, as you can see.</p>
```

### CSS

```css
p {
  outline: 2px solid; /\* Set the outline width and style \*/
  outline-color: #0000ff; /\* Make the outline blue \*/
  margin: 5px;
}
```

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

Custom focus styles commonly involve making adjustments to the `outline` property. If the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-color |

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`. |
| Animation type | a color |

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

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

参见
--

* `<color>` 数据类型
* 其他与颜色有关的属性：`color`, `background-color`, `border-color`, `text-decoration-color`, `text-emphasis-color` (en-US), `text-shadow`, `caret-color`, 和`column-rule-color`
* Applying color to HTML elements using CSS


z-index - CSS：层叠样式表

z-index
=======

CSS **`z-index`** 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。

尝试一下
----

对于定位盒子（即 `position` 属性值非 `static` 的盒子），`z-index` 属性会指定：

1. 盒子在当前层叠上下文中的层叠等级。
2. 盒子是否会创建局部层叠上下文。
语法
--

```css
/\* 关键字值 \*/
z-index: auto;

/\* 整数值 \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* 使用负值降低优先级 \*/

/\* 全局值 \*/
z-index: inherit;
z-index: initial;
z-index: unset;
```

`z-index` 属性可以被设置为关键字 `auto` 或 `<integer>`。

### 取值

`auto`

盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 `0`。

`<integer>`

盒子在当前层叠上下文的层叠等级就是 `<integer>` 的值。盒子还会创建一个局部层叠上下文。这意味着该元素的后代元素不会和该元素的外部元素比较 `z-index`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | an integer |
| Creates stacking context | yes |

形式语法
----
```

z-index =
  auto       |
  <integer>  |
  inherit

```

示例
--

### 视觉上的分层元素

#### HTML

```html
<div class="wrapper">
  <div class="dashed-box">Dashed box</div>
  <div class="gold-box">Gold box</div>
  <div class="green-box">Green box</div>
</div>
```

#### CSS

```css
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* put .gold-box above .green-box and .dashed-box \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* put .green-box above .dashed-box \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |

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

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

参阅
--

* CSS `position` 属性
* 理解 CSS z-index


<image> - CSS：层叠样式表

<image>
=======

综述：
---

CSS 的<image>数据类型描述的是 2D 图形。在 CSS 中有两种类型的图像：简单的静态图像，经常被一个在使用的 URL 引用，动态生成的图像，比如 DOM 树的部分元素样式渐变或者计算样式产生。

CSS 可以处理以下情形中的不同类型图像：

* *具有固有尺寸*（大小）的图像，即图像具有自己的原始尺寸（大小），比如一个 jpeg 格式的图像有他自己的固有尺寸（大小）；
* 图像具有多个固定尺寸，可在一个文件中存在多个不同版本的\*尺寸，\*比如有些.ico 格式的图像。在这种情况下，图像表现出来的固有尺寸将是这些尺寸较大的一个，也就是最接近外层包含它的容器纵横比的那个图像；
* *没有固定大小*但有固定纵横比的图像，像一些矢量图形，比如 SVG 格式的图像；
* *没有固定大小也没有固定宽高比*的图像，比如 CSS 渐变（图像）；

CSS 确定一个图像对象实际尺寸的依据有三条：(1) 图像的原始尺寸；(2) 用 CSS 属性指定的宽和高，比如`width`, `height` or `background-size`中，(3) 图像对象默认大小，由图像使用用途的属性类型决定：

| 图像对象类型 | 默认的图像对象尺寸 |
| --- | --- |
| `background-image` | DOM 元素的背景定位的范围尺寸（大小） |
| `list-style-image` | 字符的 `1em` 尺寸（大小） |
| `border-image` | DOM 元素的边框图像范围尺寸（大小） |
| `cursor` | 浏览器定义的光标尺寸匹配在使用操作系统上常规的光标尺寸 |
| 用 CSS `content`属性，和 CSS 伪元素 `::after` 和 `::before`替换元素内容 | 一个 `300px × 150px` 矩形 |

图像对象的实际尺寸计算算法如下：

* 如果宽度和高度都被指定了，则使用这些值会作为图像对象实际尺寸；
* 如果指定了宽度和高度中的一个，恰好这个值匹配上了图像固有宽高比中的一个值，则另一个会使用固有宽高比来确定，否则就使用图像的原始大小来确定没定义的那个值；
* 如果宽度和高度都没有被指定，在不超过图像对象默认尺寸的前提下，将会根据图像的固有宽高比来计算图像对象的实际尺寸；如果图像没有固有宽高比，则会采用图像对象固有宽高比；如果图像对象也没有固有宽高比，则使用图像对象的默认大小（翻译可能会有误，求大神快来翻译）；

图像可以使用很多 CSS 属性，比如 `background-image`, `border-image`, `content`, `list-style-image` 和`cursor`；

**备注：** 不是所有的浏览器都支持任何类型的图像的任何属性，详情查看浏览器兼容性了全面的条目列表

语法
--

一个 <image> CSS 数据类型可能表示成如下几种类型：

* 一个图像被引用为 CSS `<url>()`数据类型使用 url() 方法；
* 一个 CSS`<gradient>`;
* 页面的一个部分，定义在`element()`方法中；
示例
--

以下是有效的图像引用值：

```css
url(test.jpg)                          url() 方法，只要 test.jpg 是图像文件
linear-gradient(to bottom, blue, red)  一个 <gradient>标签
element(#colonne3)                     页面的一部分，使用了 element() 方法，
                                       如果 colonne3 是存在于页面中的一个元素 id 即可
```

以下是无效的图像引用值：
```

cervin.jpg                             图像文件必须使用 url() 方法定义
url(report.pdf)                        url() 方法指向的文件链接必须是一个图像文件
element(#fakeid)                       如果 fakeid 是一个不存在与页面的元素 id
```

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # image-values |

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

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

参阅：
---

* Using CSS gradients, `<gradient>`, `linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `repeating-radial-gradient()` (en-US)
* `element()`


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

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

**`margin-inline-end`** CSS 属性定义元素的逻辑行末外边距，根据元素的书写模式、行内方向和文本朝向映射为实体外边距。换句话说，它根据 `writing-mode`、`direction` 和 `text-orientation` 属性的值对应于 `margin-top`、`margin-right`、`margin-bottom` 或 `margin-left` 属性。

尝试一下
----

语法
--

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

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

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

这个属性与 `margin-block-start`、`margin-block-end` 和 `margin-inline-start` 属性相关，它们均定义元素的其他边距。

### 值

`margin-inline-end` 属性接受与 `margin-left` 属性相同的值。

形式定义
----

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

形式语法
----
```

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

```

示例
--

### 设置逻辑行末外边距

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


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

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

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

尝试一下
----

语法
--

```css
border-block-start-color: blue;
border-block-start-color: #4c5d21;

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

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

### 取值

`<'color'>`

见 `border-color`

形式定义
----

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

形式语法
----
```

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

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

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

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

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

```

示例
--

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

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


tab-size - CSS：层叠样式表

tab-size
========

**`tab-size`** CSS 属性用于自定义制表符（U+0009）的宽度。

尝试一下
----

语法
--

```css
/\* <integer> 值 \*/
tab-size: 4;
tab-size: 0;

/\* <length> 值 \*/
tab-size: 10px;
tab-size: 2em;

/\* 全局值 \*/
tab-size: inherit;
tab-size: initial;
tab-size: unset;
```

### 取值

`<integer>`

制表符的宽度应为空格字符（U+0020）的宽度的倍数。必须是非负数

`<length>`

制表符的宽度。必须是非负数。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `8` |
| 适用元素 | block containers |
| 是否是继承属性 | yes |
| 计算值 | the specified integer or an absolute length |
| Animation type | a length |

形式语法
----
```

tab-size =
  <number [0,∞]>  |
  <length [0,∞]>

```

示例
--

### 按字符数扩展

```css
pre {
  tab-size: 4; /\* 将制表符大小设置为 4 个字符宽度。 \*/
}
```

### 折叠制表符

```css
pre {
  tab-size: 0; /\* 去除缩进 \*/
}
```

### 与默认尺寸相比较

这个例子比较了默认的制表符大小和自定义的制表符大小。请注意，设置了 `white-space` 属性为 `pre`，以防止制表符折叠。

#### HTML

```html
<p>no tab</p>
<p>	default tab size of 8 characters wide</p>
<p class="custom">	custom tab size of 3 characters wide</p>
<p>   3 spaces, equivalent to the custom tab size</p>
```

#### CSS

```css
p {
  white-space: pre;
}

.custom {
  tab-size: 3;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

参见
--

* `white-space`


CSS 生成内容 - CSS：层叠样式表

CSS 生成内容
========

CSS 生成内容（Generated Content）是 CSS 其中一个模块，定义了如何给一个元素添加内容。

参考
--

### 属性

* `content`
* `quotes`
规范
--

| Specification |
| --- |
| CSS Generated Content Module Level 3  |


repeat() - CSS：层叠样式表

repeat()
========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS **`repeat()`** 函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。

该函数可以用于 CSS Grid 属性中 `grid-template-columns` 和 `grid-template-rows`.

```css
/\* <track-repeat> values \*/
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/\* <auto-repeat> values \*/
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/\* <fixed-repeat> values \*/
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
```

语法
--

### 取值

`<length>`

正整数长度。

`<percentage>`

相对于列网格轨道中网格容器的行内大小以及行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于它的轨道大小，那么 `<percentage>` 必须被视为 `auto`. 用户代理（user-agent）可以将轨道的固有大小贡献调整为网格容器的大小，将轨道的最终大小增加到可以遵守该百分比的最小数量。

`<flex>`

带有 `fr` 单位的非负尺寸指定轨道的弹性系数。任何被 `<flex>` 指定大小的轨道会根据其弹性系数按比例分配剩余空间。

`max-content`

代表占据网格轨道的网格项目所分配的最大内容区域的最大值。

`min-content`

代表占据网格轨道的网格项目所分配的最小内容区域的最小值。

`auto`

作为最大值，等同于 `max-content`。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值（如同`min-width`/`min-height`所指定的)）。

`auto-fill`

如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。如果定义了，将每个轨道视为其最大轨道尺寸大小函数 ( `grid-template-rows` 或 `grid-template-columns`用于定义的每个独立值。否则，作为最小轨道尺寸函数，将网格间隙加入计算。如果重复次数过多，那么重复值是 `1` 。否则，如果网格容器在相关轴上具有确定的最小尺寸，重复次数是满足该最低要求的可能的最小正整数。否则，指定的轨道列表仅重复一次。

`auto-fit`

行为与 `auto-fill` 相同，除了放置网格项目后，所有空的重复轨道都将折叠。空轨道是指没有流入网格或跨越网格的网格项目。（如果所有轨道都为空，则可能导致所有轨道被折叠。）

折叠的轨道被视为具有单个固定轨道大小函数为 `0px`，两侧的槽都折叠了。

为了找到自动重复的轨道数，用户代理将轨道大小限制为用户代理指定的值（例如 `1px`），以避免被零除。

示例
--

### CSS

```css
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

### HTML

```html
<div id="container">
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>Inflexible item of 100 pixels width.</div>
</div>
```

### 结果

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # repeat-notation |

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

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


@layer - CSS：层叠样式表

@layer
======

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

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

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

CSS @规则 中的`@layer`声明了一个 *级联层*，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。

```css
@layer utilities {
  /\* 创建一个名为 utilities 的级联层 \*/
}
```

语法
--

`@layer` @规则可以通过三种方式其一来创建级联层。第一种方法如上方代码所示，它创建了一个块级的 @规则，其中包含作用于该层内部的 CSS 规则。

```css
@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}
```

一个级联层同样可以通过 `@import` 来创建，规则存在于被引入的样式表内：

```css
@import (utilities.css) layer(utilities);
```

你也可以创建带命名的级联层，但不指定任何样式。例如，单一的命名层：

```css
@layer utilities;
```

或者，多个命名层也可以被同时定义。例如：

```css
@layer theme, layout, utilities;
```

这一做法很有用，因为层最初被指定的顺序决定了它是否有优先级。对于声明而言，如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 `theme` 层和 `utilities` 层中存在冲突的规则，那么 `utilities` 层中的将优先被应用。

即使 `utilities` 层中规则的 *优先级低于* `theme` 层中的，该规则仍会被应用。一旦级联层顺序建立之后，优先级和出现顺序都会被忽略。这将使创建 CSS 选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的级联层中。

**备注：** 在已经声明级联层的名字后，它们的顺序随即被确立，你可以重复声明某级联层的名字来向其添加 CSS 规则。这些样式将被附加到该层的末尾，且级联层之间的顺序不会改变。

其他不属于任何一级联层的样式将被集中到同一匿名层，并置于所有层的后部，这意味着任何在层外声明的样式都会覆盖在层内声明的样式。

### 嵌套层

级联层允许嵌套，例如：

```css
@layer framework {
  @layer layout {
  }
}
```

向 `framework` 层内部的 `layout` 层附加规则，只需用 `.` 连接这两层。

```css
@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}
```

### 匿名层

如果创建了一个级联层但并未指定名字，例如：

```css
@layer {
  p {
    margin-block: 1rem;
  }
}
```

那么则称为创建了一个匿名层。除创建后无法向其添加规则外，该层和其他命名层功能一致。

形式语法
----
```

@layer =
  @layer <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;

<layer-name> =
  <ident> (en-US) [ '.' <ident> (en-US) ]\*

```

示例
--

### 基本示例

下方的例子创建了两条 CSS 规则。其中一条为 `type` 层内部的 `<p>` 元素创建。另一条规则创建于级联层外部，作用于 `.box p`。

没有级联层时，选择器 `.box p` 将会有最高的优先级，因此文字 `Hello, world!` 将被显示为绿色。当`type`层应用在匿名层创建之前时，文本将会是紫色的。

并且还要注意顺序，即使我们先声明了`non-layered style`，它仍然会应用在`layer`层级之后。

#### HTML

```html
<div class="box">
  <p>Hello, world!</p>
</div>
```

#### CSS

```css
p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}
```

#### 结果

### 向已存在的层中添加规则

下方的例子创建了两个没有规则的级联层，随后，CSS 规则被添加到这两层中。`base` 层定义了 color、border、font-size 和 padding。`special` 层定义了不同的 color 属性。因为 `special` 层在定义时排在最后，其中的 color 属性将被应用，文字的颜色将显示为`rebeccapurple`。`base` 层中的其他规则仍然有效。

#### HTML

```html
<div class="item">
  I am displayed in <code>color: rebeccapurple</code> because the
  <code>type</code> layer comes after the <code>base</code> layer. My green
  border, font-size, and padding come from the <code>base</code> layer.
</div>
```

#### CSS

```css
@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.5em;
    padding: 0.5em;
  }
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # layering |

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

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

参见
--

* The Future of CSS: Cascade Layers