文本片段

文本片段
====

**文本片段**（Text Fragment）允许你直接链接到 web 文档中的特定文本部分，而不需要作者使用 URL 片段中的特定语法对其进行注释。支持的浏览器可以自由选择如何引起对链接文本的注意，例如，用颜色突出显示和/或滚动到页面上的内容。文本片段允许 web 内容作者与他们不控制的其他内容进行深度链接，而不需要依赖 ID 的存在来实现，在这一点上它很有用途。在此基础上，它可以用来生成更有效的内容共享链接，让用户相互传递。

概念和用法
-----

从历史上来看，网络的关键特征之一一直是在不同文档间提供链接的能力——这就是让*网络*具有更强的互联作用的原因。

* 你可以通过文档的 URL 链接到其页面顶部，如：
    + https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
* 你可以通过文档的 URL 加上其*文档片段*（ID）链接到某一个特定的章节，如：
    + https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#浏览器兼容性

链接到特定的文档片段的问题是，链接页面的作者需要把一个锚放在那里，以便*实际地*链接到。上面的第二个例子链接到一个 h2 元素，ID 为`浏览器兼容性`：

```html
<h2 id="浏览器兼容性">
  <a href="#浏览器兼容性">浏览器兼容性</a>
</h2>
```

如果 ID 被改变或删除，文档片段就会被忽略，而链接只是链接到页面的顶部。这在优雅降级方面是合理的，但如果链接的作者能够完全控制它们链接到哪里，而不需要依赖页面作者，那可以说是更好的。

**文本片段**使这个想法成真——它们允许链接作者以灵活的方式指定要链接的文本内容，而不是文档片段。

语法
--

与文档片段行为类似，文本片段被附加到 URL 的哈希符号（`#`）后。但语法有轻微不同：
```

https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
```

`:~:`

又称*片段指令*，这一连串的字符告诉浏览器，接下来是一个或多个用户代理指令，这些指令在加载过程中会从 URL 中剥离，以便作者脚本不能直接与之交互。用户代理指令（instruction）也被称为指令（directive）。

`text=`

一段文本指令。为浏览器提供了一个文本片段，定义了在链接文档中要链接的文本。

`textStart`

一个文本字符串，指定链接文本的开始。

`textEnd` 可选

一个文本字符串，指定链接文本的结束。

`prefix-` 可选

一个文本字符串，后面是一个连字符，指定链接文本前面应该有什么文本。这有助于浏览器在有多个匹配的情况下选择正确的链接文本。

`-suffix` 可选

一个连字符，后面是一个文本字符串，指定链接文本后面应该有什么文本。这有助于浏览器在有多个匹配的情况下选择正确的链接文本。

支持的浏览器将滚动到并高亮显示链接文档中与指定指令相匹配的第一个文本片段。请注意，可以在同一个 URL 中指定多个文本片段，用与字符（`&`）将它们分开来突出显示。

### 使用说明

* 用于 `textStart`、`textEnd`、`prefix-` 和 `suffix` 值的文本字符串需要作百分比编码。
* 匹配是大小写不敏感的。
* 单独的 `textStart`、`textEnd`、`prefix-` 和 `suffix` 字符串需要完全位于同一个块级元素中，但完整的匹配可以跨越多个元素的边界。
* 出于安全考虑，该功能要求在 noopener 上下文中打开链接——使用该特性时，你需要在你的 `<a>` 元素中添加 `rel="noopener"`，并在你的 `window.open()` 调用中添加 `noopener`。
* 文本片段只在完整的（非同一页面）、用户发起的导航中被调用。
* 文本片段只适用于主框架；文本不会在 `<iframe>` 内被搜索到，并且 `iframe` 导航不会调用文本片段。
* 对于不希望使用该特性的网站，基于 Chromium 的浏览器支持可供发送给用户代理的文档策略标头值，这样用户代理就不会处理文本片段：

```http
Document-Policy: force-load-at-top
```

**备注：** 如果提供的文本片段与链接文档中的任何文本不匹配，或者浏览器不支持文本片段，整个文本片段将被忽略，而链接到文档的顶部。

示例
--

### 使用 textStart 的简单文本片段

* https://example.com#:~:text=for 滚动到文档中第一次出现“for”文本的地方并高亮它。
* https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#:~:text=人类 滚动到文档中第一次出现“人类”文本的地方并高亮它。
* https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#:~:text=href%20属性 滚动到文档中第一次出现“href 属性”文本的地方并高亮它。
### textStart 和 textEnd

* https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#:~:text=人类,URL 滚动到文档中第一次以“人类”开头，并以“URL”结尾的文本的地方并高亮它。
* https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#:~:text=同源%20URL,人类语言 滚动到文档中第一次以“同源 URL”开头，并以“人类语言”结尾的文本的地方并高亮它。注意高亮的文本如何在多个块级元素间跨越。
### 含有 prefix- 和/或 -suffix 的示例

* https://example.com#:~:text=asking-,for 滚动到文档中第二次出现“for”文本的地方并高亮它。
* https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#:~:text=表示-,referrer 滚动到文档中第一次在文本“表示”后方出现“referrer”文本的地方并高亮它。这是该文档中“referrer”的第五次出现，如果没有前缀，会高亮第一次匹配。
* https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#:~:text=浏览器,-本身 滚动到文档中第一次在“浏览器”后方出现“本身”文本的地方并高亮它。这是该文档中“浏览器”的第七次出现，如果没有后缀，会高亮第一次匹配。
* https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#:~:text=浏览器-,对待下载,自动打开。,-自动打开 滚动到文档中第一次出现“对待下载 ... 自动打开。”文本的地方，该文本以“浏览器”为前驱，“自动打开”为后续。这说明了一个更复杂的例子，前缀/后缀被用来锁定你想要链接的特定文本实例。尝试移除前缀，看看会匹配到什么。
### 使用多个文本片段的 URL

你可以在同一个 URL 中指定多个文本片段，用与字符（`&`）将它们分开来突出显示。让我们看几个例子：

* https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#:~:text=导致&text=链接的 滚动到文档中第一次出现“导致”和“链接”文本的地方并高亮它们。
* https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#:~:text=链接的%20URL,-，&text=当前-,页面,浏览环境 滚动并高亮两段文本实例：
    + 后面有“，”文本直接跟随的“链接的 URL”文本的第一次出现。
    + 以“页面”开头，以“浏览环境”结尾的文本的第一个实例，其前缀为“当前”。

如果你没有看到你的一个或多个文本片段被高亮显示，而且你确信你的语法是正确的，你可能只是高亮显示了一个与你预期不同的实例。它可能被高亮了，但在屏幕之外。

### 为匹配的文本片段添加样式

浏览器可以自由地以它们选择的任何默认方式对突出显示的文本进行样式处理。CSS 伪元素模块等级 4 定义了 `::target-text` 伪元素，它允许你指定自定义样式。

例如，在我们的 scroll-to-text 示例中我们有如下的 CSS 样式：

```css
::target-text {
  background-color: rebeccapurple;
  color: white;
}
```

尝试在支持的浏览器中跟随上面的链接，以查看其效果。

### 编程访问文本片段

在支持的浏览器中，可以在 `FragmentDirective` (en-US) 对象中找到当前文档中匹配的文本片段信息，可以通过 `Document.fragmentDirective` (en-US) 属性访问该对象。

试着在支持浏览器的开发者工具中，在有一个或多个匹配文本片段的标签中运行以下内容：

```js
document.fragmentDirective;
```

你应该得到一个 `FragmentDirective` (en-US) 对象实例，其结构类似于以下内容：

```js
items: [
  {
    prefix: "",
    textStart: "Module Workers",
    textEnd: "",
    suffix: "support",
    type: "text",
  },
  {
    prefix: "feedback on",
    textStart: "usability",
    textEnd: "",
    suffix: "",
    type: "text",
  },
];
```

这一功能目前主要用于特性检测，但在未来，它可以扩展以包括其他信息，如翻译提示。

参考
--

### API

`FragmentDirective` (en-US)

代表当前文档中已经高亮的文本片段的对象。

`Document.fragmentDirective` (en-US)

返回当前文档的 `FragmentDirective` (en-US) 指令。

### CSS

`::target-text`

代表当前文档高亮的文本片段。允许作者自定义文本片段的样式。

规范
--

| Specification |
| --- |
| URL Fragment Text Directives # fragmentdirective |
| CSS Pseudo-Elements Module Level 4 # selectordef-target-text |

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

### html.elements.a.text\_fragments

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

### api.FragmentDirective

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

### css.selectors.target-text

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

参见
--

* 大胆地链接以前没有人链接过的地方：文本片段


Web 安全

Web 安全
======

确保你的 Web 站点或 Web 应用安全是十分重要的，即使是代码中很小的 bug 也可能导致隐私信息被泄露，黑客会尝试偷窃数据。这些文档提供信息帮助你使代码更安全。此处列出的面向 Web 安全的文章提供的信息可以帮助你保护站点及其代码免受攻击和数据窃取。

内容安全
----

CSP (内容安全策略) (en-US)

**内容安全策略**（CSP）通过探测和减轻包括跨站脚本攻击 XSS (en-US) 和数据注入攻击的攻击手段，更进一步提升安全性。上述攻击手段可以使用在数据窃取、网站污损、亦或是恶意软件的分发等场景中。

连接安全
----

传输层安全（TLS）

传输层安全（TLS）协议是在两个互联的应用或设备上稳定且私密地交换信息的标准。使用 TLS 的应用可以选择对数据安全性和可靠性有保障的安全参数。这篇文章提供了 TLS 的概述，以及在保护你的内容时需要做出的选择。

HTTPS

**HTTPS**（***超文本传输协议安全***）是 HTTP 协议的加密版本，它使用 SSL 或 TLS 协议来对客户端和服务器之间的所有通信进行加密。所建立的安全连接使得客户端可以确认所连接的服务器，并且可以交换敏感数据。

HTTP Strict-Transport-Security

`Strict-Transport-Security:` HTTP 标头可以让网站指定其只能通过 HTTPS 访问。

证书透明度

**证书透明度**是一个开放的框架，旨在防止和监测证书的误发。新颁发的证书被记录到公开运行的、通常是独立的 CT 日志中，这些日志保持着一个仅有附录的、有密码学保证的 TLS 证书的记录。

混合内容 (en-US)

如果一个 HTTPS 页面包含明文 HTTP 获取的内容，那么该页面就被称为**混合内容**页面。像这样的页面只能保证部分内容加密，未加密的部分仍然可以被嗅探器和中间人攻击者感知。

如何修复含有混合内容的网站 (en-US)

如果你的网站传送了 HTTPS 页面，所有使用 HTTP 传送的活跃混合内容 (en-US)默认会被阻止。因而，你的网站可能会对客户不可用（例如 iframe 或插件不加载）。被动的混合内容 (en-US)默认是显示状态，但用户也可以通过首选设置来阻止这种类型的内容。这个页面解释了作为 web 开发人员需要注意的事情。

安全上下文

一个**安全的上下文**是一个 `Window` 或 `Worker`，对于它来说，有理由相信内容已经安全地通过 HTTPS/TLS 交付，并且与**不**安全的上下文进行通信的可能性有限。许多 Web API 和功能只能在安全上下文中访问。安全上下文的主要目标是防止中间人攻击者访问强大的 API，从而进一步损害攻击受害者。

限制在安全上下文中的特性

该参考列出了仅在安全上下文中可用的 web 平台特性。

弱签名算法

用于数字证书签名的摘要算法是保证证书安全性的关键因素。这篇文章提供了一些有关已知的弱签名算法信息，在使用的时候可以避免它们。

301 和 302 响应码跳转

待补充

数据安全
----

使用 HTTP Cookies

*HTTP cookie*（web cookie，浏览器 cookie）是服务器发送给客户端 web 浏览器的一小块数据。浏览器可能会存储它，并在后续对同一服务器的请求中将它发送回服务器。例如，通常这可以说明两个请求来自同一个浏览器，从而让用户保持登录状态。

Local storage

`Window` 对象的 `Window.localStorage` 属性是一种服务器在客户端上存储持久性数据的方法，数据可以在不同的会话中持久访问。

信息泄露
----

Referer 标头策略：隐私和安全性考虑 (en-US)

有一些与 Referer HTTP 标头相关的隐私和安全风险。这篇文章描述了它们，并提供避免这些风险的建议。

Robots.txt

待补充

Site maps

待补充

完整性
---

同源策略

**同源策略**限制了一个源中加载的文档或脚本与其他源中的资源交互的方式。这是一种用来隔离潜在恶意文档的关键安全机制。

子资源完整性

**子资源完整性**（SRI）是一种安全功能，允许浏览器验证所获取的文件（比如，从一个内容分发网络中）没有遭受恶意修改。它的工作原理是允许你提供一个加密哈希值，目标文件必须匹配这个值。

HTTP Access-Control-Allow-Origin

**`Access-Control-Allow-Origin`** 响应头表明响应是否可以与来自给定来源的请求代码共享。

HTTP X-Content-Type-Options

**`X-Content-Type-Options`** 响应的 HTTP 头是一个标记，由服务器用来表示应该遵循 `Content-Type` 头中宣告的 MIME 类型，不应该被改变。这是一种选择退出 MIME 类型嗅探的方法，或者换句话说，MIME 类型是故意配置的。

点击劫持保护
------

点击劫持 (en-US)描述了用户被愚弄，点击了一个产生用户意料之外行为的 UI 元素的现象。

HTTP X-Frame-Options

**`X-Frame-Options`** HTTP 响应头可以用来表明是否应该允许浏览器在 `<frame>`、`<iframe>`、`<embed>` 或 `<object>` 中渲染页面。网站通过这些方法，保证它们的内容不被轻易嵌入至其他站点，可以避免点击劫持 (en-US)攻击。

CSP: frame-ancestors

HTTP `Content-Security-Policy`（CSP）的 **`frame-ancestors`** 指令指定了使用 `<frame>`、`<iframe>`、`<object>` 或`<embed>` 元素嵌入页面的合法父元素。

用户信息安全
------

不安全的密码 (en-US)

通过 HTTP 提供登录表格是特别危险的，因为有各种各样的攻击可以用来提取用户的密码。网络窃听者可以通过嗅探网络，或通过修改传输中的服务页面来窃取用户的密码。

隐私性和 :visited 选择器

在大约 2010 年之前，CSS `:visited` 选择器允许网站获取用户的浏览历史，弄清用户访问过哪些网站。为了缓解这个问题，浏览器已经限制了从访问过的链接中获得的信息量。

与安全相关的术语
--------

* Block cipher mode of operation
* 认证机构 (en-US)
* 挑战—响应认证
* 密码
* 密码套件
* 密文
* Clickjacking (en-US)
* 跨源资源共享
* CORS-safelisted request header (en-US)
* CORS-safelisted response header (en-US)
* 跨站脚本攻击
* 密码分析学 (en-US)
* Cryptographic hash function
* 密码学
* 内容安全策略
* 跨站请求伪造
* 解密
* 数字证书
* DTLS (en-US)
* 加密
* Forbidden header name
* Forbidden response header name
* Hash
* HMAC
* HPKP (en-US)
* HSTS
* HTTPS
* 密钥
* 中间人攻击
* OWASP (en-US)
* 预检请求
* 非对称密钥算法 (en-US)
* Reporting directive (en-US)
* Robots.txt (en-US)
* 同源策略
* 会话劫持 (en-US)
* SQL 注入
* 对称密钥算法 (en-US)
* TOFU (en-US)
* TLS
参见
--

* Mozilla 安全博客
* Twitter 上的 @mozsec 账号


弱签名算法 - Web 安全

弱签名算法
=====

在给数字证书签名时，用到的哈希算法的强度对证书的安全性至关重要。本文将提供一些已知的弱签名算法的信息，以便你在适当的时候避免使用它们。

弱的哈希算法可以使攻击者能够伪造证书。技术进步使网络攻击变得更加可行，随着新型的网络攻击不断被发现，我们不鼓励使用旧的算法，并最终移除了对它们的支持。

SHA-1
-----

从 2017 年开始，主流浏览器不再认为 SHA-1 证书安全。应该使用那些采用更安全的哈希算法（如 SHA-256 或 SHA-512）的证书。

MD5
---

对基于 MD5 的签名的支持在 2012 年初被移除。

相关资料
----

* Mozilla Security Blog 关于弃用 SHA-1 的文章


证书透明度 - Web 安全

证书透明度
=====

**证书透明度**（Certificate Transparency，CT）是一个开放的框架，旨在监测和防止证书的误发。它在 RFC 9162 中定义。有了证书透明度机制，新颁发的证书会被“记录”到公开运行的、通常是独立的 *CT 日志*中——这些日志保持着仅允许添加、有密码学保证的已颁发 TLS 证书记录。

这样一来，证书颁发机构（CA）就可以受到更多的公众审查和监督。潜在的恶意证书，如那些违反 CA/浏览器论坛*基线要求*的证书，可以更快地被发现和撤销。浏览器供应商和根存储维护者也被授权对它们可能决定不信任的有问题的 CA 做出更明智的决定。

背景
--

CT 日志是建立在 *Merkle 树*数据结构的基础上的。节点被标记为其子节点的*加密哈希值*。叶子节点包含实际数据片段的哈希值。因此，根节点的标签取决于树中的所有其他节点。

在证书透明的情况下，叶子节点散列的数据是由目前运行的各种不同的 CA 所颁发的证书。证书的包含性可以通过*审计证明*来验证，该证明可以在对数 O(log n) 时间内有效地生成和验证。

证书透明度最初是在 2013 年出现的，背景是 CA 妥协（2011 年的 DigiNotar 漏洞）、有问题的决定（2012 年的 Trustwave 次级根事件）和技术发行问题（马来西亚的 Digicert Sdn Bhd 发行的 512 位弱证书）。

实现
--

当证书被提交到 CT 日志时，一个*证书签署时间戳*（SCT）被生成并返回。这可作为证书已提交的证明，并将被添加到日志中。

该规范指出，符合要求的服务器*必须*在 TLS 客户端连接时向其提供一些这样的 SCT。这可以通过一些不同的机制来实现：

* X.509v3 证书扩展，直接将签名的证书时间戳嵌入叶节点证书中
* 握手过程中发送的 `signed_certificate_timestamp` 类型的 TLS 扩展
* OCSP 装订（即 `status_request` TLS 扩展），并提供具有一个或多个 SCT 的 `SignedCertificateTimestampList`

通过 X.509 证书扩展，所包含的 SCT 由签发的 CA 决定。自 2021 年 6 月以来，大多数积极使用和有效的公开信任的证书都包含嵌入该扩展的透明度数据。这种方法应该不需要对 web 服务器进行修改。

使用后一种方法，服务器将需要更新以发送所需的数据。其优点是，服务器运营商可以定制 CT 日志源，提供通过 TLS 扩展/装订 OCSP 响应发送的 SCT。

浏览器要求
-----

Google Chrome 要求对 notBefore 日期晚于 2018 年 4 月 30 日签发的证书进行 CT 日志收录。用户将被阻止访问使用不符合规定的 TLS 证书的网站。此前，Chrome 浏览器要求对*扩展验证*（EV）和 Symantec 签发的证书进行 CT 收录。

Apple 要求多种数目的 SCT，以使 Safari 和其他服务器信任服务器证书。

Firefox 目前并不检查用户访问的网站或要求使用 CT 日志。


浏览器的同源策略 - Web 安全

浏览器的同源策略
========

**同源策略**是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。

它能帮助阻隔恶意文档，减少可能被攻击的媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS 脚本，从第三方网络邮件服务（用户已登录）或公司内网（因没有公共 IP 地址而受到保护，不会被攻击者直接访问）读取数据，并将这些数据转发给攻击者。

源的定义
----

如果两个 URL 的协议、端口（如果有指定的话）和主机都相同的话，则这两个 URL 是*同源*的。这个方案也被称为“协议/主机/端口元组”，或者直接是“元组”。（“元组”是指一组项目构成的整体，具有双重/三重/四重/五重等通用形式。）

下表给出了与 URL `http://store.company.com/dir/page.html` 的源进行对比的示例：

| URL | 结果 | 原因 |
| --- | --- | --- |
| `http://store.company.com/dir2/other.html` | 同源 | 只有路径不同 |
| `http://store.company.com/dir/inner/another.html` | 同源 | 只有路径不同 |
| `https://store.company.com/secure.html` | 失败 | 协议不同 |
| `http://store.company.com:81/dir/etc.html` | 失败 | 端口不同（`http://` 默认端口是 80） |
| `http://news.company.com/dir/other.html` | 失败 | 主机不同 |

### 源的继承

在页面中通过 `about:blank` 或 `javascript:` URL 执行的脚本会继承打开该 URL 的文档的源，因为这些类型的 URL 没有包含源服务器的相关信息。

例如，`about:blank` 通常作为父脚本写入内容的新的空白弹出窗口的 URL（例如，通过 `Window.open()`）。如果此弹出窗口也包含 JavaScript，则该脚本将从创建它的脚本那里继承对应的源。

`data:` URL 将获得一个新的、空的安全上下文。

### 文件源

现代浏览器通常将使用 `file:///` 模式加载的文件的来源视为*不透明的来源*。这意味着，假如一个文件包括来自同一文件夹的其他文件，它们不会被认为来自同一来源，并可能引发 CORS 错误。

请注意，URL 规范指出，文件的来源与实现有关，一些浏览器可能将同一目录或子目录下的文件视为同源文件，尽管这有安全影响。

源的更改
----

**警告：** 这里描述的方法（使用 `document.domain` setter）已被弃用，因为它破坏了同源策略所提供的安全保护，并使浏览器中的源模型复杂化，导致互操作性问题和安全漏洞。

满足某些限制条件的情况下，页面是可以修改它的源。脚本可以将 `document.domain` 的值设置为其当前域或其当前域的父域。如果将其设置为其当前域的父域，则这个较短的父域将用于后续源检查。

例如：假设 `http://store.company.com/dir/other.html` 文档中的一个脚本执行以下语句：

```js
document.domain = "company.com";
```

这条语句执行之后，页面将会成功地通过与 `http://company.com/dir/page.html` 的同源检测（假设`http://company.com/dir/page.html` 将其 `document.domain` 设置为“`company.com`”，以表明它希望允许这样做——更多有关信息，请参阅 `document.domain`）。然而，`company.com` **不能**设置 `document.domain` 为 `othercompany.com`，因为它不是 `company.com` 的父域。

端口号是由浏览器另行检查的。任何对 `document.domain` 的赋值操作，包括 `document.domain = document.domain` 都会导致端口号被覆盖为 `null` 。因此 `company.com:8080` **不能**仅通过设置 `document.domain = "company.com"` 来与 `company.com` 通信。必须在它们双方中都进行赋值，以确保端口号都为 `null` 。

该机制有一些局限性。如果启用了 `document-domain` (en-US) `Permissions-Policy`，或该文档在沙箱 `<iframe>` 下，它将抛出一个“`SecurityError`” `DOMException`，并且用这种方法改变源并不影响 Web API 使用的源检查（例如 `localStorage`、`indexedDB`、`BroadcastChannel`、`SharedWorker`）。更详尽的失败案例列表可以在 Document.domain 的错误章节找到。

**备注：** 使用 `document.domain` 来允许子域安全访问其父域时，需要在父域和子域中设置 `document.domain` 为*相同*的值。这是必要的，即使这样做只是将父域设置回其原始值。不这样做可能会导致权限错误。

跨源网络访问
------

同源策略控制不同源之间的交互，例如在使用 `XMLHttpRequest` 或 `<img>` 标签时则会受到同源策略的约束。这些交互通常分为三类：

* 跨源**写操作**（Cross-origin writes）一般是被允许的。例如链接、重定向以及表单提交。特定少数的 HTTP 请求需要添加预检请求。
* 跨源**资源嵌入**（Cross-origin embedding）一般是被允许的（后面会举例说明）。
* 跨源**读操作**（Cross-origin reads）一般是不被允许的，但常可以通过内嵌资源来巧妙的进行读取访问。例如，你可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法，或得知内嵌资源的可用性。

以下是可能嵌入跨源的资源的一些示例：

* 使用 `<script src="…"></script>` 标签嵌入的 JavaScript 脚本。语法错误信息只能被同源脚本中捕捉到。
* 使用 `<link rel="stylesheet" href="…">` 标签嵌入的 CSS。由于 CSS 的松散的语法规则，CSS 的跨源需要一个设置正确的 `Content-Type` 标头。如果样式表是跨源的，且 MIME 类型不正确，资源不以有效的 CSS 结构开始，浏览器会阻止它的加载。
* 通过 `<img>` 展示的图片。
* 通过 `<video>` 和 `<audio>` 播放的多媒体资源。
* 通过 `<object>` 和 `<embed>` 嵌入的插件。
* 通过 `@font-face` 引入的字体。一些浏览器允许跨源字体（cross-origin fonts），另一些需要同源字体（same-origin fonts）。
* 通过 `<iframe>` 载入的任何资源。站点可以使用 `X-Frame-Options` 标头来阻止这种形式的跨源交互。
### 如何允许跨源访问

可以使用 CORS 来允许跨源访问。CORS 是 HTTP 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。

### 如何阻止跨源访问

* 阻止跨源写操作，只要检测请求中的一个不可推测的令牌（CSRF token）即可，这个标记被称为跨站请求伪造（CSRF）令牌。你必须使用这个令牌来阻止页面的跨源读操作。
* 阻止资源的跨源读取，需要保证该资源是不可嵌入的。阻止嵌入行为是必须的，因为嵌入资源通常向其暴露信息。
* 阻止跨源嵌入，需要确保你的资源不能通过以上列出的可嵌入资源格式使用。浏览器可能不会遵守 `Content-Type` 头部定义的类型。例如，如果你在 HTML 文档中指定 `<script>` 标记，则浏览器将尝试将标签内部的 HTML 解析为 JavaScript。当资源不是网站的入口点时，还可以使用 CSRF 令牌来防止嵌入。
跨源脚本 API 访问
-----------

JavaScript 的 API 中，如 `iframe.contentWindow`、 `window.parent`、`window.open` 和 `window.opener` 允许文档间直接相互引用。当两个文档的源不同时，这些引用方式将对 `Window` 和 `Location` 对象的访问添加限制，如下两节所述。

为了能让不同源中的文档进行交流，可以使用 `window.postMessage`。

规范：HTML 现行标准 & 跨源对象 。

### Window

允许以下对 `Window` 属性的跨源访问：

| 方法 |
| --- |
| `window.blur` |
| `window.close` |
| `window.focus` |
| `window.postMessage` |

| 属性 |  |
| --- | --- |
| `window.closed` | 只读。 |
| `window.frames` | 只读。 |
| `window.length` | 只读。 |
| `window.location` | 读/写。 |
| `window.opener` | 只读。 |
| `window.parent` | 只读。 |
| `window.self` | 只读。 |
| `window.top` | 只读。 |
| `window.window` | 只读。 |

某些浏览器允许访问除上述外更多的属性。

### Location

允许以下对 `Location` 属性的跨源访问：

| 方法 |
| --- |
| `location.replace` |

| 属性 |  |
| --- | --- |
| `HTMLAnchorElement.href` | 只写。 |

某些浏览器允许访问除上述外更多的属性。

跨源数据存储访问
--------

访问存储在浏览器中的数据，如 Web Storage 和 IndexedDB，是以源进行分割的。每个源都拥有自己单独的存储空间，一个源中的 JavaScript 脚本不能对属于其他源的数据进行读写操作。

Cookie 使用不同的源定义方式。一个页面可以为本域和其父域设置 cookie，只要是父域不是公共后缀（public suffix）即可。Firefox 和 Chrome 使用 Public Suffix List 检测一个域是否是公共后缀。当你设置 cookie 时，你可以使用 `Domain`、`Path`、`Secure` 和 `HttpOnly` 标记来限定可访问性。当你读取 cookie 时，你无法知道它是在哪里被设置的。即使只使用安全的 https 连接，你所看到的任何 cookie 都有可能是使用不安全的连接进行设置的。

参见
--

* W3C 介绍的同源策略
* web.dev 介绍的同源策略
* `Cross-Origin-Resource-Policy`
* `Cross-Origin-Embedder-Policy`


安全上下文 - Web 安全

安全上下文
=====

**安全上下文**是 `Window` 与 `Worker` 中满足了最低标准的身份验证和机密性的概念。许多 Web API 仅能在安全上下文中访问。安全上下文的主要目标是防止中间人攻击者访问强大的接口，从而导致更加严重的破坏。

为什么要限制某些功能？
-----------

有些 API 是非常强大的，能给攻击者更强的能力以及更多的操作：

* 侵犯用户隐私。
* 获得对用户计算机的低级访问权限。
* 获得对数据的访问权限，例如用户凭证。
上下文何时是安全的？
----------

当一个上下文满足安全上下文规范中定义的某些最低限度的认证和保密标准时，它是安全的。当一个特定的文档是顶层浏览上下文（基本上是一个包含窗口或标签）的活动文档时，它是在一个安全的上下文中。

例如，在 `<iframe>` 中的文档即使通过 TLS 进行传输，如果它有一个父节点没有通过 TLS 进行传输，其上下文也**不会**视为安全。

然而，需要引起注意的是，如果某个不安全上下文创建了新窗口（无论是否指定 noopener 参数），那么创建新窗口的文档不安全的事实不会影响新窗口的安全性。这是因为，确定一个特定的文档是否在安全上下文中，仅仅需要考虑与之相关的顶层浏览上下文，而与是否碰巧使用了非安全的上下文来创建它无关。

本地传递的资源，如那些带有 `http://127.0.0.1`、`http://localhost` 和 `http://*.localhost` 网址（如 `http://dev.whatever.localhost/`）和 `file://` 网址的资源也是认为经过安全传递的。

**备注：** Firefox 84 及更新的版本支持 `http://localhost` 和 `http://*.localhost` URL 作为信任的源，而早期版本不支持这样做，因为还没有保证 `localhost` 映射到本地或回环地址上。

非本地资源要被认为是安全的，必须满足以下标准：

* 必须通过 `https://` 或 `wss://` URL 提供服务
* 用于传送资源的网络信道的安全属性不能是废弃的
特性检测
----

页面可以通过暴露在全局范围的 `isSecureContext` 布尔属性值真假来判断它是否处于安全上下文中。

```js
if (window.isSecureContext) {
  // 页面在安全上下文中，所以 service worker 可用
  navigator.serviceWorker.register("/offline-worker.js").then(() => {
    // …
  });
}
```

规范
--

| Specification |
| --- |
| Secure Contexts  |

参见
--

* 仅在安全上下文中可用的平台特性——只在安全上下文中可用的特性列表
* `isSecureContext`
* https://permission.site——一个允许你检查你的浏览器在 HTTP 和 HTTPS 上采用何种 API 权限检查的网站
* Strict-Transport-Security HTTP 标头


子资源完整性 - Web 安全

子资源完整性
======

**子资源完整性**（Subresource Integrity，SRI）是允许浏览器检查其获得的资源（例如从 CDN 获得的）是否被篡改的一项安全特性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。

**备注：** 对于从嵌入文件以外的来源提供的资源的子资源完整性验证，浏览器还使用跨源资源共享（CORS）检查资源，以确保提供资源的来源允许它与请求来源共享。

SRI 如何工作
--------

使用内容分发网络（CDN）在多个站点之间共享脚本和样式表等文件可以提高站点性能并节省带宽。然而，使用 CDN 也存在风险，如果攻击者获得对 CDN 的控制权，则可以将任意恶意内容注入到 CDN 上的文件中（或完全替换掉文件），因此可能潜在地攻击所有从该 CDN 获取文件的站点。

子资源完整性使你能够减轻这种攻击的一些风险，确保你的网络应用程序或网络文档（从 CDN 或任何地方）获取的文件在交付时没有被第三方注入任何额外的内容，也没有对这些文件进行任何其他形式的修改。

SRI 如何使用
--------

使用子资源完整性功能的方法是，在任何 `<script>` 或 `<link>` 元素的 `integrity` 属性值中，指定你要告诉浏览器所获取的资源（或文件）的 base64 编码的加密哈希值。

`integrity` 值至少由一个字符串开始，每个字符串包括一个前缀，表示一个特定的哈希算法（目前允许的前缀是 `sha256`、`sha384` 和 `sha512`），后面是一个短横线（-），最后是实际的 base64 编码的哈希。

**备注：** **integrity** 值可以包含多个由空格分隔的哈希值，只要文件匹配其中任意一个哈希值，就可以通过校验并加载该资源。

使用 base64 编码 sha384 算法计算出摘要后的 `integrity` 值的示例：
```

sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC
```

`oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC` 即“哈希”部分，`sha384` 前缀说明使用的是 sha384 哈希方法。

**备注：** 严格来说，`integrity` 值的“哈希”部分是通过对一些输入（例如，一个脚本或样式表文件）应用一个特定的哈希函数而形成的**加密摘要**。但人们通常用“哈希”来表示**加密摘要**，所以本文就用了这个词。

### 生成 SRI 哈希的工具

SRI Hash Generator 是一个在线生成 SRI 哈希值的工具。

也可以用 **openssl** 在命令行中执行如下命令来生成 SRI 哈希值：

```bash
cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A
```

或者用 **shasum** 在命令行中执行：

```bash
shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64
```

**备注：**

* 通过管道连接的 `xxd` 步骤从 `shasum` 中获取十六进制的输出，并将其转换为二进制。
* 通过管道连接的 `awk` 的步骤是必要的，因为 `shasum` 会将其输出中的散列文件名传递给 `xxd`。如果文件名中恰好有有效的十六进制字符，这将产生灾难性的后果——因为 `xxd` 也会对其进行解码并传递给 `base64`。

在 Windows 环境下，你可以使用以下代码创建生成 SRI 哈希的工具：

```batch
@echo off
set bits=384
openssl dgst -sha%bits% -binary %1% | openssl base64 -A > tmp
set /p a= < tmp
del tmp
echo sha%bits%-%a%
pause
```

如何使用这些代码：

1. 在你的环境中的 Windows SendTo 文件夹（例如， `C:\Users\USER\AppData\Roaming\Microsoft\Windows\SendTo`）中，将该代码保存在一个名为 `sri-hash.bat` 的文件中。
2. 在文件资源管理器中右击一个文件，选择**发送至...**，然后选择 `sri-hash`。你将在一个命令框中看到完整性值。
3. 选择完整性值，然后右键单击，将其复制到剪贴板上。
4. 按任意键都可以关闭命令框。
跨源资源共享和子资源完整性
-------------

对于从嵌入文档以外的来源提供的资源的子资源完整性验证，浏览器还使用跨源资源共享（CORS）检查资源，以确保提供资源的来源允许它与请求来源共享。因此，资源必须使用 `Access-Control-Allow-Origin` 标头来提供，以允许资源与请求方共享；例如：

```http
Access-Control-Allow-Origin: \*
```

示例
--

在这个例子中，我们已知 `oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC` 是一个指定文件 `example-framework.js` 经过 SHA-384 算法得出的摘要，同时在 `https://example.com/example-framework.js` 上有其一份拷贝。

### 在 <script> 元素中确保 SRI

你可以使用以下的 `<script>` 元素告诉浏览器在执行 `https://example.com/example-framework.js` 中的内容之前，必须先比较该文件的哈希值是否和预期的一致，并验证是否匹配。

```html
<script
 src="https://example.com/example-framework.js"
 integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
 crossorigin="anonymous"></script>
```

**备注：** 有关 `crossorigin` 属性的更多信息，见 CORS 设置属性。

浏览器如何处理 SRI
-----------

浏览器根据以下步骤处理 SRI：

1. 当浏览器在 `<script>` 或者 `<link>` 标签中遇到 `integrity` 属性之后，会在执行脚本或者应用样式表之前对比所加载文件的哈希值和期望的哈希值。
 对于从其他来源提供的资源的子资源完整性验证，浏览器还使用跨源资源共享（CORS）检查资源，以确保提供资源的来源允许它与请求来源共享。
2. 如果脚本或样式表不符合其相关的 `integrity` 值，浏览器必须拒绝执行该脚本或拒绝应用该样式表，并且必须返回一个网络错误，表明该脚本或样式表的获取失败。
规范
--

| Specification |
| --- |
| HTML Standard # attr-link-integrity |
| Subresource Integrity # the-integrity-attribute |
| HTML Standard # attr-script-integrity |

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

### html.elements.link.integrity

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

### html.elements.script.integrity

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

相关资料
----

* 内容安全策略
* HTTP 标头 `Content-Security-Policy`
* 一个不能对你进行 XSS 的 CDN：使用 SRI
* 来自 W3C 的 SRI 测试
* SRI Hash 生成器


传输层安全 - Web 安全

传输层安全
=====

使用传输层安全协议（TLS）进行的任何连接的安全性在很大程度上取决于密码套件和所选的安全性参数。本文的目的是帮助你确保客户端和服务器之间的机密性和完整性通信。Mozilla 运营安全团队（OpSec）维护了服务器端 TLS 参考配置的 Wiki 条目。

传输层安全协议（Transport Layer Security protocol，TLS）是使两个联网应用程序或设备能够安全可靠地交换信息的标准。使用 TLS 的应用程序可以自行选择安全性参数，这可能会对数据的安全性和可靠性产生重大影响。本文对 TLS 进行了概述，并提供了多种在保护内容时需要做出的决策。

历史
--

HTTPS 推出时，是基于 Netscape 公司推出的安全套接字层（SSL）2.0 技术的。不久后，该技术更新为 SSL 3.0，随着使用范围的扩大，显然需要指定一种通用的标准加密技术，以确保所有 web 浏览器和服务器之间的互操作性。1999 年 1 月，互联网工程任务组（IETF）在 RFC 2246 中规定了 TLS 1.0。TLS 的当前版本为 1.3（RFC 8446）。

尽管 web 现在使用 TLS 进行加密，但许多人仍然习惯性地将其称为“SSL”。

虽然 TLS 可用于任何底层传输协议，但该协议的最初目标是加密 HTTP 流量。使用 TLS 加密的 HTTP 通常被称为 HTTPS。根据惯例，TLS 加密的网络流量默认在 443 端口交换，而未加密的 HTTP 默认使用 80 端口。HTTPS 仍是 TLS 的一个重要用例。

在 TLS 上的 HTTP
-------------

TLS 提供三种主要服务，有助于确保与之交换的数据的安全性：

身份验证

通过认证，通信的每一方都可以验证另一方的身份。

加密

在用户代理和服务器之间传输数据时对数据进行加密，以防止未经授权的各方读取和解读数据。

完整性

TLS 确保数据在加密、传输和解密过程中不会丢失、损坏、篡改或伪造任何信息。

TLS 连接以握手阶段开始，在此阶段，客户端和服务器就共享秘密和重要参数（如密码套件）达成一致。一旦参数确定，就进入数据交换模式，交换应用数据（如 HTTP）。

### 密码套件

TLS 握手协商的主要参数是密码套件。

在 TLS 1.2 及更早版本中，协商密码套件包括一组加密算法，这些算法共同提供了共享秘密的协商、服务器身份验证方法以及用于加密数据的方法。

TLS 1.3 中的密码套件主要用于数据加密，密钥协议和身份验证则使用单独的协商方法。

不同的软件可能会对相同的密码套件使用不同的名称。例如，OpenSSL 和 GnuTLS 使用的名称与 TLS 标准中的名称不同。Mozilla OpSec 团队关于 TLS 配置的文章中的密码名称对应表列出了这些名称以及有关兼容性和安全级别的信息。

### 配置服务器

正确配置服务器至关重要。一般来说，应尽量将密码支持限制在与希望连接到网站的浏览器兼容的最新密码上。Mozilla OpSec TLS 配置指南提供了更多有关推荐配置的信息。

为了帮助你配置网站，Mozilla 提供了一个有用的 TLS 配置生成器，它可以为以下 Web 服务器生成配置文件：

* Apache
* Nginx
* Lighttpd
* HAProxy
* Amazon Web Services CloudFormation Elastic Load Balancer

建议使用配置生成器来创建配置，以满足你的需要；然后将其复制并粘贴到服务器上的相应文件中，并重新启动服务器以接收更改。配置文件可能需要进行一些调整才能包含自定义设置，因此在使用前一定要检查生成的配置文件；安装配置文件时如果不确保任何域名等引用都是正确的，就会导致服务器无法正常工作。

TLS 1.3
-------

RFC 8446: TLS 1.3 是对 TLS 的重大修订。TLS 1.3 包含大量改进安全性和性能的变更。TLS 1.3 的目标是：

* 删除 TLS 1.2 中未使用和不安全的特性。
* 在设计中加入强大的安全分析。
* 通过加密更多协议来提高隐私性。
* 缩短完成握手所需的时间。

TLS 1.3 改变了协议的许多基本原理，但保留了以前 TLS 版本的几乎所有基本功能。对于 web 而言，启用 TLS 1.3 不会影响兼容性，但也有极少数例外情况（见下文）。

TLS 1.3 的主要更改有：

* 在大多数情况下，TLS 1.3 的握手在一次往返中完成，从而减少了握手延迟。
* 服务器可以启用 0-RTT（零往返时间）握手。重新连接服务器的客户端可以立即发送请求，完全消除了 TLS 握手的延迟。虽然 0-RTT 带来的性能提升非常明显，但也存在一定的重放攻击风险，因此在启用此功能前需要谨慎。
* TLS 1.3 仅支持前向安全模式，除非连接恢复或使用预共享密钥。
* TLS 1.3 定义了一组 TLS 1.3 独有的新密码套件。这些密码套件全部使用现代的关联数据验证加密（AEAD）算法。
* 除了建立共享秘密所需的信息外，TLS 1.3 的握手过程都是加密的。这尤其意味着服务器和客户端证书是加密的。但请注意，客户端发送给服务器的服务器标识（服务器名称或 SNI 扩展名）不加密。
* 许多机制已被禁用：重新协商、通用数据压缩、数字签名算法（DSA）证书、静态 RSA 密钥交换和使用自定义 Diffie-Hellman（DH）组的密钥交换。

TLS 1.3 的草案版本已经实现。一些浏览器已启用 TLS 1.3，包括 0-RTT 模式。启用 TLS 1.3 的 web 服务器可能需要调整配置，以便 TLS 1.3 成功运行。

TLS 1.3 只增加了一个重要的新用例。0-RTT 握手可为网络等对延迟敏感的应用带来显著的性能提升。启用 0-RTT 需要额外的步骤，既要确保成功部署，又要管理重放攻击的风险。

TLS 1.3 中取消了重新协商功能，这可能会影响到一些依赖使用证书进行客户端身份验证的 web 服务器。一些 web 服务器会使用重新协商来确保客户端证书已加密，或仅在请求某些资源时才请求客户端证书。为了保护客户证书的隐私，TLS 1.3 握手的加密可确保客户证书是加密的；但这可能需要对软件进行一些修改。TLS 1.3 支持使用证书进行反应式客户端验证，但并未广泛实施。替代机制正在开发中，也将支持 HTTP/2。

移除对旧 TLS 版本的支持
--------------

为了帮助实现更现代、更安全的 web，所有主流浏览器都在 2020 年初开始取消对 TLS 1.0 和 1.1 的支持。需要确保你的 web 服务器支持 TLS 1.2 或 1.3。

从版本 74 开始，Firefox 浏览器在连接使用旧版 TLS 的服务器时会返回 Secure Connection Failed 错误（Firefox bug 1606734）。

TLS 握手超时值
---------

如果 TLS 握手由于某种原因开始变得缓慢或反应迟钝，用户的体验就会受到严重影响。为了缓解这一问题，现代浏览器已经实现了握手超时：

* 从版本 58 开始，Firefox 浏览器实现了 TLS 握手超时，默认值为 30 秒。超时值可通过编辑 about:config 中的 `network.http.tls-handshake-timeout` 首选项来更改。
参见
--

* Mozilla SSL 配置生成器和 Cipherlist.eu 帮助你为服务器生成配置文件以保护你的站点。
* Mozilla 运营安全（OpSec）团队维护了一个带有参考的 TLS 配置的 wiki 页面。
* Mozilla Observatory、SSL Labs 以及 Cipherscan 可以帮助你测试站点以了解其 TLS 配置的安全性。
* 安全上下文
* Strict-Transport-Security HTTP 标头


确保你的站点安全 - Web 安全

确保你的站点安全
========

你可以采取一些措施来确保你的网站安全。本文提供了各种建议，以及提供更多有用信息的其他文章的链接。

**备注：** 本篇文章仍未撰写完毕，遵循它的指引不一定能保证你的站点完全安全。

用户信息安全
------

如何关闭表单的自动完成功能

在 Gecko 中表单字段支持自动完成功能；因此它们的值可以被记住，并且在下一次用户访问你的网站时自动被填充。对于某些特定类型的数据，你可能希望禁止这个功能。

隐私和 :visited 选择器

这篇文章讨论对于 `getComputedStyle()` 方法的改动，消除恶意站点获取用户浏览历史的能力。

用安全算法散列密码（OWASP）

使用明文存储密码容易导致攻击者得知且泄露站点用户的密码，令用户处于风险之中。使用陈旧或不安全的散列算法（例如 md5）也会出现相同的问题。应该使用专门用于加密的散列算法（如 Argon2、PBKDF2、scrypt 或 bcrypt），而不是消息摘要算法（例如 md5 和 sha）。这篇文章讲述了存储密码的最好实践。

内容安全
----

正确配置服务器的 MIME 类型

不正确的 MIME 类型配置可以对你的站点造成潜在的安全问题。这篇文章解释了其中的几种方式，并且展示如何配置你的服务器，以让它使用正确的 MIME 类型提供文件服务。

HTTP Strict Transport Security

`Strict-Transport-Security:` 这个 HTTP 头可以使得站点指定其只能通过 HTTPS 访问。

HTTP 访问控制

跨源资源共享标准提供了一种指定可从其他域加载的内容的方法。可以使用它来防止你的网站被不正当地使用；此外，还可以使用它来建立明确允许其他站点使用的资源。

内容安全策略

一种附加的安全层，有助于检测和减轻某些类型的攻击，包括跨站脚本（XSS）以及数据注入攻击。这些攻击可用于从数据窃取到站点破坏或恶意软件分发的所有内容。受害者执行了恶意代码，且令攻击方绕过了访问控制，以使得他们可以假冒合法用户身份。

X-Frame-Options 响应头

`X-Frame-Options:` HTTP 响应头可用于指示是否应允许浏览器在 `<frame>` 中呈现页面。站点可以通过确保其内容未嵌入到其他站点中来避免点击劫持 (en-US)攻击。

通过配置网站实行访问控制

这是保证站点安全的最佳方案。你可以忽略特定的 IP 地址，限制网站只能通过某些特定区域访问，做文件保护、防止盗链等配置。例如，.htaccess 文件是用于在 Apache HTTP 服务器上运行的网站的配置文件。

参见
--

* 开放 Web 应用程序安全项目 (OWASP)
* Mozilla Web 安全速查表
* OWASP 跨站脚本攻击


仅限于安全上下文的特性 - Web 安全

仅限于安全上下文的特性
===========

本参考列出了仅在安全上下文中可用的 web 平台的特性，有关定义和更多详情，请参阅安全上下文。

当前仅在安全上下文中可用的特性
---------------

本节列出了根据规范要求仅在安全上下文中提供的 API。

* 异步剪贴板 API
* 后台同步（例如 `SyncManager` (en-US)）
* `Cache-Control: immutable`
* 凭据管理 API
* 设备方向 / 设备移动
* 拾色器 API
* 加密媒体扩展 (en-US)
* 通用传感器 API
* `Geolocation`
* 通知 API
* 支付请求 API
* 演示 API (en-US)
* 推送 API
* 报告 API (en-US)
* Service Worker
* 存储 API
* Web 验证 API
* Web 蓝牙 (en-US)
* Web MIDI (en-US)
* Web 加密 API
* WebGPU API
* Web 分享 API (en-US)

此外，以下方法需要安全上下文（即使相关 API 不需要）：

* `MediaDevices.getUserMedia()`
* `Navigator.registerProtocolHandler()`
参见
--

* 安全上下文
* 在 Chrome Platform Status 上搜索“secure context”


如何关闭表单自动填充 - Web 安全

如何关闭表单自动填充
==========

本文介绍了网站如何禁用表单字段的自动完成功能。

默认情况下，浏览器会记录用户网页上提交的 `<input>` 框的信息。这使得浏览器能够提供自动补全（在用户开始输入的时候给用户提供可能的内容）和自动填充（在加载的时候预先填充某些字段）功能。

这些功能通常是默认启用的，但可能涉及用户的隐私，因此浏览器允许用户禁用这些功能。然而，一些数据可能会在将来失效（例如一次性密码）或包含敏感信息（例如唯一的政府身份识别码或信用卡安全码）。作为网站作者，你可能更希望浏览器不去记住这些字段的值，即使浏览器的自动填充功能已开启。

注意，规则 WCAG 2.1 Success Criterion 1.3.5: Identify Input Purpose 并不需要自动补全真的能够工作——仅仅只是那些与用户个人信息相关的表单字段能够通过编程的方式分辨出来。意味着即使表单本身的自动补全功能关闭，你也可以通过在相关字段上添加 `autocomplete` 属性来符合这个规则。

禁用自动补全
------

要禁用表单自动补全，你可以将 `autocomplete` 的属性设置为 "off"：
```

autocomplete="off"
```

可以为整个表单设置或为表单中某个输入元素单独设置：

```html
<form method="post" action="/form" autocomplete="off">[…]</form>
```

```html
<form method="post" action="/form">
  […]
  <div>
    <label for="cc">信用卡：</label>
    <input type="text" id="cc" name="cc" autocomplete="off" />
  </div>
</form>
```

设置 `autocomplete="off"` 会有两种效果：

* 这会告诉浏览器，不要为了以后在类似表单上自动填充而保存用户输入的数据。但浏览器不一定遵守。
* 这会阻止浏览器缓存会话历史记录中的数据。若表单数据缓存于会话历史记录，用户提交表单后，再点击返回按钮返回之前的表单页面，则会显示用户之前输入的数据。

如果即使在 autocomplete 已经设置为 off 时，浏览器仍继续提供输入建议，那么你需要更改输入元素的 name 属性。

autocomplete 属性和登录字段
--------------------

现代浏览器实现了内建的密码管理功能：当用户在一个网站上输入了用户名和密码，浏览器会为用户提供记忆功能。当用户再次访问这个网站时，浏览器使用保存的值自动填写登录字段。

另外，浏览器可让用户指定一个主密码用来加密存储的登录信息。

即使没有主密码，浏览器内置的密码管理对安全也有益无害。由于用户不需要记住已被浏览器存储的密码，因此他们可以放心选择更强的密码。

由于这个原因，许多现代浏览器都不支持在登录字段中设置 `autocomplete="off"`：

* 如果一个网站为 `<form>` 设置了`autocomplete="off"`，表单中包含用户名和密码字段，浏览器仍会为这次登录提供记忆功能，并且如果用户同意，用户在下一次访问网站时，浏览器会自动填写这些字段。
* 如果网站给用户名和密码的 `<input>` 框设置了 `autocomplete="off"`，浏览器仍会为这次登录提供记忆功能，并且如果用户同意，用户在下一次访问网站时，浏览器会自动填写这些字段。

这是 Firefox（38+）、Google Chrome（34+）、Internet Explorer（11+）上的表现。

### 使用 autocomplete="new-password" 阻止自动填充

如果你定义了一个用户管理页面，其中用户可以为其他人指定新的密码，因此你想阻止密码字段的自动填充，你可以使用 `autocomplete="new-password"`。

这只是一个提示，浏览器不一定要遵守。但现代浏览器都已停止在设置了 `autocomplete="new-password"` 的 `<input>` 元素上使用自动填充。例如，Firefox 67 版（见 Firefox bug 1119063）在这种情况下会停止自动填充；而 Firefox 70 版（见 Firefox bug 1565407）则可以建议一个安全生成的密码，而不自动填充已保存的密码。更多细节参见 `autocomplete` 兼容性表格。


max-content - CSS：层叠样式表

max-content
===========

`max-content` 尺寸关键字代表了内容的最大宽度或最大高度。对于文本内容而言，这意味着内容即便溢出也不会被换行。

语法
--

```css
/\* 作为长度使用 \*/
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/\* 在 grid track 中使用 \*/
grid-template-columns: 200px 1fr max-content;

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

示例
--

### 使用 max-content 调整盒子大小

#### HTML

```html
<div id="container">
  <div class="item">Item</div>
  <div class="item">
    Item with more text in it which will overflow the fixed width box.
  </div>
</div>
```

#### CSS

```css
#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}

.item {
  width: max-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```

#### 结果

### 使用 max-content 调整网格列的大小

#### HTML

```html
<div id="container">
  Item
  <div>Item with more text in it.</div>
  Flexible item
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # valdef-width-max-content |

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

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

参见
--

* 其他尺寸关键字：`min-content`、`fit-content`


contain - CSS：层叠样式表

contain
=======

Baseline 2023
-------------

Newly availableSince February 2023, 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 属性 **`contain`** 标示了元素及其内容尽可能独立于文档树的其余部分。局限使 DOM 的一部分得以被隔离，且通过将布局、样式、绘制、尺寸或其任意组合的计算限制于 DOM 子树而非整个页面使性能受益。局限也可用于限制 CSS 计数器和引号的作用域。

尝试一下
----

有四种类型的 CSS 局限——尺寸、布局、样式和绘制，且均设置在容器上。此属性为五个标准值的子集或两个简写值之一构成的以空格分隔的列表。在容器内对被局限属性的修改不会传播到被局限元素外的页面的其余部分。局限的主要益处在于浏览器无需经常重渲 DOM 或页面布局，由此在静态页面的渲染中带来小幅性能收益，在更动态的应用中带来更多的性能收益。

在有独立元素组的页面上使用 `contain` 属性较为有用，此属性可以防止元素内部在其包围盒外产生副作用。

**备注：** 为此属性使用 `layout`、`paint`、`strict` 或 `content` 值将创建：

1. 新的包含区块（针对其 `position` 属性为 `absolute` 或 `fixed` 的后代元素）。
2. 新的层叠上下文。
3. 新的区块格式化上下文。

语法
--

```css
/\* 关键词值 \*/
contain: none;
contain: strict;
contain: content;
contain: size;
contain: inline-size;
contain: layout;
contain: style;
contain: paint;

/\* 多个关键词 \*/
contain: size paint;
contain: size layout paint;
contain: inline-size layout;

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

### 取值

`contain` 属性可有下列取值中的任意一个：

* 关键词 `none`，**或**
* 以任意顺序由空格分隔的关键词 `size`（或 `inline-size`）、`layout`、`style` 和 `paint` 中的至少一个，**或**
* 简写值 `strict` 或 `content` 之一

这些关键词有下列含义：

`none`

元素照常渲染，不应用局限。

`strict`

将所有局限规则应用于元素。此值等价于 `contain: size layout paint style`。

`content`

将除 `size` 外的所有局限规则应用于元素。此值等价于 `contain: layout paint style`。

`size`

在行向和块向上将尺寸局限应用于元素。元素尺寸可无视子元素单独计算。此值不可与 `inline-size` 结合使用。

`inline-size`

将行向尺寸局限应用于元素。元素的行向尺寸可无视子元素单独计算。此值不可与 `size` 结合使用。

`layout`

从页面的其余部分中隔离出元素的内部布局。此值意味着元素外的任意内容和元素内部布局互不影响。

`style`

对于可在元素及其后代外产生影响的属性，其影响将不会逃离包含元素。计数器和引号的作用域被限制为元素及其内容。

`paint`

元素后代不在元素边界外显示。若包含盒在屏外，则浏览器无需绘制其被局限的元素——这些元素因为完全局限于此盒故必定也在屏外。若后代元素溢出包含元素的边界，则此后代元素将被裁剪至包含元素的边框盒。

形式定义
----

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

形式语法
----
```

contain =
  none                                  |
  strict                                |
  content                               |
  [ size || layout || style || paint ]

```

示例
--

### 绘制局限

下列示例展示了如何使用 `contain: paint` 防止元素后代在元素边界外被绘制。

```css
div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  font-size: 25px;
}
```

```html
<div style="contain: paint">
  <p>此文本将被裁剪至盒子边界。</p>
</div>
<div>
  <p>此文本将不被裁剪至盒子边界。</p>
</div>
```

### 布局局限

考虑下列示例，此示例显示了元素在应用与不应用布局局限时如何表现：

```html
<div class="card" style="contain: layout;">
  <h2>卡片 1</h2>
  <div class="fixed"><p>固定盒 1</p></div>
  <div class="float"><p>浮动盒 1</p></div>
</div>
<div class="card">
  <h2>卡片 2</h2>
  <div class="fixed"><p>固定盒 2</p></div>
  <div class="float"><p>浮动盒 2</p></div>
</div>
<div class="card">
  <h2>卡片 3</h2>
  <!-- …… -->
</div>
```

```
p {
  margin: 4px;
  padding: 4px;
}

h2 {
  margin-bottom: 4px;
  padding: 10px;
}

div {
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 gray;
  padding: 6px;
  margin: 6px;
}
```

```css
.card {
  width: 70%;
  height: 90px;
}

.fixed {
  position: fixed;
  right: 10px;
  top: 10px;
  background: coral;
}

.float {
  float: left;
  margin: 10px;
  background: aquamarine;
}
```

第一张卡片应用了布局局限，其布局被从页面其余部分中隔离开来。我们可以在页面上的其他地方复用这张卡片，无需担心重新计算其他元素的布局。在浮动体与卡片边界重叠时，页面其余部分的元素不受影响。当浏览器重新计算包含元素的子树时，仅有此元素被重新计算。被局限元素之外的任意元素均无需重新计算。此外，固定盒将卡片用作布局容器为自身定位。

第二和第三张卡片无局限。第二张卡片中固定盒的布局上下文为根元素，因此固定盒置于页面右上角。与第二张卡片重叠的浮动体导致第三张卡片出现意外的布局漂移，由 `<h2>` 元素的定位可见此漂移。当出现重新计算时，计算不只限于容器。由此影响性能且干扰页面布局的其余部分。

### 样式局限

样式局限将计数器和引号的作用域限制为被局限元素。对于 CSS 计数器，`counter-increment` 和 `counter-set` 属性的作用域被限制为此元素，且将元素视为在文档根部。

#### 局限与计数器

下列示例考察了计数器在应用样式局限时如何工作：

```html
<ul>
  <li>元素甲</li>
  <li>元素乙</li>
  <li class="container">元素丙</li>
  <li>元素丁</li>
  <li>元素戊</li>
</ul>
```

```css
body {
  counter-reset: list-items;
}

li::before {
  counter-increment: list-items;
  content: counter(list-items) "：";
}

.container {
  contain: style;
}
```

若无局限，则计数器将在每个元素上从 1 增加到 5。样式局限导致 `counter-increment` 属性的作用域被限制为元素子树，计数器从 1 重新开始：

#### 局限与引号

CSS 引号受类似影响，与引号相关的 `content` 值的作用域被限制为此元素：

```html
<!-- 有样式局限 -->
<span class="open-quote"
 >外<span style="contain: style;"
 ><span class="open-quote">内</span></span
 ></span
><span class="close-quote">闭</span>
<br />
<!-- 无局限 -->
<span class="open-quote"
 >外<span><span class="open-quote">内</span></span></span
><span class="close-quote">闭</span>
```

```css
body {
  quotes: "【" "】" "〈" "〉";
}
.open-quote:before {
  content: open-quote;
}

.close-quote:after {
  content: close-quote;
}
```

第一个闭引号因为局限而无视内侧的 `span` 并使用外侧 `span` 的闭引号：

规范
--

| Specification |
| --- |
| CSS Containment Module Level 2 # contain-property |

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

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

参见
--

* CSS 局限
* CSS 容器查询
* CSS 属性 `content-visibility`
* CSS 属性 `position`


grid-auto-rows - CSS：层叠样式表

grid-auto-rows
==============

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 属性 **`grid-auto-rows`** 用于指定隐式创建的行轨道大小。

尝试一下
----

如果定位到某行中的网格元素没有使用 `grid-template-rows`来指定大小，则会隐式创建grid 轨道来保存它。这可能在显示定位到超出范围的行，或者由自动放置算法创建额外的行时发生。

语法
--

```css
/\* Keyword values \*/
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/\* <length> values \*/
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/\* <percentage> values \*/
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/\* <flex> values \*/
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/\* minmax() values \*/
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/\* multiple track-size values \*/
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

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

### 取值

`<length>`

一个非负的长度。

`<percentage>`

相对于网格窗口块尺寸的非负 `<percentage>` 值。如果网格容器的块尺寸是不确定的，则百分比值将被视为 `auto`。

`<flex>`

非负的、以 `fr` 为单位的维度指定轨道的弹性因子。每个 `<flex>`-尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。

当使用在 `minmax()` 符号外时，意味着最小值为 `auto` (例： `minmax(auto, <flex>)`).

`max-content`

关键词，指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。

`min-content`

关键词，指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。

`minmax(min, max)`

函数符号，定义一个不小于`min`且不大于`max`的尺寸范围。如果`max`比`min`小，则`max`会被忽略，函数会被录作`min`处理。作为最大值，`<flex>` 值设置了轨道的弹性因子。作为最小值，会被当作 0 处理（或者最小内容——当网格容器指定了尺寸为最小内容）。

`auto`

关键字，当用来指定最大值时与最大内容一致，当用来指定最小值时，它表示轨道中所有网格元素最小尺寸中的最大值（由`min-width`/`min-height`指定）。

注意：`auto` 轨道尺寸（且仅有 `auto` 轨道尺寸）可配合`align-content` 和`justify-content` 属性使用。

### 形式语法
```

grid-auto-rows =
  <track-size>+

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

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

```

示例
--

### HTML

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

### CSS

```css
#grid {
  width: 200px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-rows: 100px;
}

#grid > div {
  background-color: lime;
}
```

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # auto-tracks |

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | grid containers |
| 是否是继承属性 | 否 |
| Percentages | refer to corresponding dimension of the content area |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | by computed value type |

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

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

参见
--

* 相关的 CSS 属性： `grid-auto-columns`, `grid-auto-flow`, `grid`
* 网格布局指南：*网格布局中的自动定位 - 隐式网格中的行尺寸*
* 视频教程：*引入网格自动放置和排序*


CSS 流式布局 - CSS：层叠样式表

CSS 流式布局
========

"文档流"或"流式布局"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。这个"流"本质上是一系列的事物，它们都在你的布局中一起工作，并且互相了解。一旦某部分脱离了"流"，它就会独立地工作。

在文档流中，内联元素按内联方向显示，即词语在依据文件写作模式的句子中表示的方向。块元素则一个接一个地显示，就像该文档的写作模式中的段落一样。因此在英语中，内联元素从左边开始一个接一个地显示，块元素从顶部开始向下显示并移动页面。

示例
--

下面的示例演示块和内联级别框。两个带有绿色边框的段落元素是"块"级，其中一个在另一个下面显示。

第一个句子还包括一个带有蓝色背景的 span 元素。这是行内级别，因此显示在句子的适当位置。

参见
--

* Block and Inline Layout in Normal Flow
* In Flow and Out of Flow
* Formatting Contexts Explained (en-US)
* Flow Layout and Writing Modes
* Flow Layout and Overflow
参考
--

### Glossary Entries

* Block (CSS)

1. **CSS**
2. **CSS Reference**


inherit - CSS：层叠样式表

inherit
=======

**`inherit`** 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 `all`。

对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。

继承始终来自文档树中的父元素，即使父元素不是包含块。

示例
--

```css
/\* 设置二级标题的颜色为绿色 \*/
h2 {
  color: green;
}

/\* ...but leave those in the sidebar alone so they use their parent's color \*/
#sidebar h2 {
  color: inherit;
}
```

在下面这个例子中，如果 sidebar 中`h2`元素的 div 匹配下面的规则的话，颜色会变成蓝色。

```css
div#current {
  color: blue;
}
```

规范
--

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

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

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

See also
--------

* Inheritance
* Use `initial` to set a property to its initial value.
* Use `unset` to set a property to its inherited value if it inherits, or to its initial value if not.
* Use `revert` (en-US) to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* The `all` property lets you reset all properties to their initial, inherited, reverted, or unset state at once.


widows - CSS：层叠样式表

widows
======

CSS 属性 **`widows`** 可以用来设置一个块级容器在新的分页，区域或者列的**顶部**需要结合在一起的最小行数。

```css
/\* <integer> values \*/
widows: 2;
widows: 3;

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

**备注：** 在排版中，*widow* 指的是在新页面顶部单独出现的段落的最后一行。（这一行来自于上一个页面的段落）

语法
--

### 值

`<integer>`

在一个片段打断后，新的片段顶部需要结合在一起的最小行数。该值必须为正值。

形式定义
----

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

形式语法
----
```

widows =
  <integer [1,∞]>

```

示例
--

### 控制列布局中的 widows

#### HTML

```html
<div>
  <p>This is the first paragraph containing some text.</p>
  <p>
    This is the second paragraph containing some more text than the first one.
    It is used to demonstrate how widows work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>
```

#### CSS

```css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

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

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

参见
--

* `orphans` (en-US)
* 分页媒体


clear - CSS：层叠样式表

clear
=====

**`clear`** CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。`clear` 属性适用于浮动和非浮动元素。

尝试一下
----

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的顶部外边距会折叠。

另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将底部元素的外边界边缘移动到所有相关的浮动元素外边界边缘的下方。这会影响后面浮动元素的布局，因为后面的浮动元素的位置无法高于它之前的元素。

要被清除的相关浮动元素指的是在相同块级格式化上下文中的前置浮动。

**备注：** 如果一个元素里只有浮动元素，那它的高度会是 0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做**clearfix**，即`clear`一个不浮动的 `::after` 伪元素。

```css
#container::after {
  content: "";
  display: block;
  clear: both;
}
```

语法
--
```

/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: unset;
```

### 值

`none`

元素*不会*被向下移动以清除浮动。

`left`

元素被向下移动以清除左浮动。

`right`

元素被向下移动以清除右浮动。

`both`

元素被向下移动以清除左右浮动。

`inline-start`

元素被向下移动以清除其包含块的起始侧浮动，即 ltr 时清除左浮动，rtl 时清除右浮动。

`inline-end`

元素被向下移动以清除其包含块的结束侧浮动，即 ltr 时清除右浮动，rtl 时清除左浮动。

### Formal syntax
```

clear =
  inline-start  |
  inline-end    |
  block-start   |
  block-end     |
  left          |
  right         |
  top           |
  bottom        |
  both-inline   |
  both-block    |
  both          |
  none

```

示例
--

### clear: left

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: right

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: both

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}
```

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

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

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

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

参见
--

* 盒模型


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

<easing-function>
=================

CSS 数据类型 **`<easing-function>`** 表示描述某数值变化速率的数学函数。

这种两值之间的过渡可应用于不同情境，可用于描述属性值在动画中变化的快慢程度，由此得以在动画的持续过程中改变其速度。你可为 CSS 过渡和动画指定缓动函数。

语法
--

```css
/\* 线性函数和关键字 \*/
/\* linear(<point-list>) \*/
linear(1, -0.5, 0)
linear

/\* 三次贝塞尔函数和关键字 \*/
/\* cubic-bezier(<x1>, <y1>, <x2>, <y2>) \*/
cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease
ease-in
ease-out
ease-in-out

/\* 阶跃函数和关键字 \*/
/\* steps(<number-of-steps>, <direction>) \*/
steps(4, end)
step-start
step-end
```

### 取值

`<point-list>`

线性定格列表。

`linear`

表示线性插值。此关键字表示缓动函数 `linear(0, 1)`。

![“输出进度”关于“输入进度”的图像，展示了从原点延伸至 (1, 1) 的直线](/zh-CN/docs/Web/CSS/easing-function/linear.svg)

`<x1>`, `<y1>`, `<x2>`, `<y2>`

表示定义三次贝塞尔曲线的 P1 和 P2 点的横纵坐标的 `<number>` 值。`x1` 和 `x2` 须位于 `[0, 1]` 范围中，否则此值无效。

`ease`

表示插值缓慢开始，陡然加速，再逐渐减速至结束。此关键字表示缓动函数 `cubic-bezier(0.25, 0.1, 0.25, 1.0)`。其与 `ease-in-out` 相似，但在开始时加速更陡。

`ease-in`

表示插值缓慢开始，再逐渐加速至结束，最终突然停止。此关键字表示缓动函数 `cubic-bezier(0.42, 0.0, 1.0, 1.0)`。

`ease-out`

表示插值突然开始，再逐渐减速至结束。此关键字表示缓动函数 `cubic-bezier(0.0, 0.0, 0.58, 1.0)`。

`ease-in-out`

表示插值缓慢开始，然后加速，再减速至结束。此关键字表示缓动函数 `cubic-bezier(0.42, 0.0, 0.58, 1.0)`。在开始时，此关键字表现同 `ease-in` 关键字；在结束时，表现同 `ease-out` 关键字。

![“输出进度”关于“输入进度”的图像，其中“ease”展示了从原点快速升至 (1, 1) 的曲线；“ease-in”展示了发自原点且在接近 (1, 1) 时变平的略微弯曲的线；“ease-out”展示了在接近 (1, 1) 时略微变弯的斜线；“ease-in-out”展示了从原点到 (1, 1) 的对称 S 形曲线](/zh-CN/docs/Web/CSS/easing-function/ease.svg)

`<number-of-steps>`

严格正的 `<integer>`，表示构成阶跃函数的等距步数。

`<direction>`

下列表示跳跃何时出现的关键字之一：

* `jump-start` 表示第一步（即第一次跳跃）在插值开始时发生。
* `jump-end` 表示最后一步（即最后一次跳跃）在插值结束时发生。
* `jump-both` 表示在 0% 和 100% 处均出现跳跃，相当于在插值过程中加上一步。
* `jump-none` 表示两端均无跳跃，而是在 0% 处和 100% 处将值各保持 1/n 的时长。
* `start` 与 `jump-start` 等价。
* `end` 与 `jump-end` 等价。此关键字为默认值。

`step-start`

表示插值立即跳跃至其最终状态，再保持至结束。此关键字表示缓动函数 `steps(1, jump-start)` 或 `steps(1, start)`。

`step-end`

表示插值保持其初始状态至结束，再直接跳跃至其最终状态。此关键字表示缓动函数 `steps(1, jump-end)` 或 `steps(1, end)`。

![“输出进度”关于“输入进度”的图像，其中“step-start”展示了空心原点和从 (0, 1) 延伸至 (1, 1) 的水平直线；“step-end”展示了从原点延伸至 (1, 0)（空心）的水平直线和位于 (1, 1) 的点](/zh-CN/docs/Web/CSS/easing-function/step.svg)

描述
--

缓动函数有三种类型：

* 线性
* 三次贝塞尔
* 阶跃
### 线性缓动函数

`linear()` 函数定义了在各点之间线性插值的分段线性函数，由此可以近似如反弹和弹性效应等更复杂的动画。插值自始至终以恒定速率进行。`linear()` 函数的一个典型用处在于提供很多点逼近任意曲线。

在定义 `linear()` 函数时，可由列表指定*线性缓动点*，例如 `linear(0, 0.25, 1)`。此 `linear()` 函数所产生的缓动函数从 `0` 线性移动至 `0.25`，再移动至 `1`。

![“输出进度”关于“输入进度”的图像，其中“linear(0, 0.25, 1)”展示了连接原点、(0.5, 0.25) 和 (1, 1) 的折线；“linear(0, 0.25 75%, 1)”展示了连接原点、(0.75, 0.25) 和 (1, 1) 的折线](/zh-CN/docs/Web/CSS/easing-function/linear_function.svg)

考虑此函数另一例子——`linear(0, 0.25 75%, 1)`。此例所产生的线性缓动函数用 75% 的时间从 `0` 过渡到 `0.25`，余下 25% 的时间从 `0.25` 过渡到 `1`。

`linear` 关键字等价于缓动函数 `linear(0, 1)`。

### 三次贝塞尔缓动函数

函数记号 `cubic-bezier()` 定义了三次贝塞尔曲线。属于三次贝塞尔类的缓动函数常被称为“平滑”缓动函数，这是因为这些函数可用于抚平插值 (en-US)的起止。这些函数将输入进度与输出进度相关联，两个进度均以 `<number>` 表示。对于这些值，`0.0` 表示初始状态，`1.0` 表示最终状态。

![“输出进度”关于“输入进度”的图像，展示了从原点到 (1, 1) 的 S 形曲线和贝塞尔控制点 P1(0.1, 0.6) 和 P2(0.7, 0.2)](/zh-CN/docs/Web/CSS/easing-function/cubic-bezier.svg)

三次贝塞尔曲线由 P0、P1、P2 和 P3 四点所定义。点 P0 和 P3 表示曲线的起止点。在 CSS 中，由于坐标为进度（横坐标为输入进度，纵坐标为输出进度），故这两点为定点。P0 为 `(0, 0)`，表示初始进度和初始状态。P3 为 `(1, 1)`，表示最终进度和最终状态。

并非所有三次贝塞尔曲线均适合作为缓动函数，这是因为某些曲线并非数学函数，即对于指定的横坐标有零个或一个值的曲线。由于 CSS 定义 P0 和 P3 为定点，故当且仅当 P1 和 P2 的横坐标均位于 `[0, 1]` 范围中时，三次贝塞尔曲线为函数，进而有效。

P1 和 P2 的纵坐标位于 `[0, 1]` 范围外的三次贝塞尔曲线可导致值超过最终状态后再折返。在动画中，对于例如 `left` 和 `right` 等某些属性由此创造某种“反弹”效应。

![缓动函数“cubic-bezier(0.3, 0.2, 0.2, 1.4)”的图像，其一展示了输出进度从某一输入进度起超过 1，另一个展示了输出进度达到 1 再保持不变](/zh-CN/docs/Web/CSS/easing-function/cubic-bezier_out_of_range.svg)

然而某些属性将限制超出允许范围的输出。例如在 `rgb()` 中大于 `255` 或小于 `0` 的颜色分量将被截断至最近的允许值（分别为 `255` 和 `0`）。某些 `cubic-bezier()` 函数展现了此性质。

当指定无效的三次贝塞尔曲线时，CSS 将无视整个属性。

关键字 `ease`、`ease-in`、`ease-out` 和 `ease-in-out` 中的每一个均等价于特定的 `cubic-bezier()` 值。

### 阶跃缓动函数

函数记号 `steps()` 定义了将输出值域分为等距步长的阶跃函数。此类阶跃函数有时也称为*阶梯函数*。

展示 `steps()` 函数用法的若干示例：

```css
steps(2, jump-start) /\* 同 steps(2, start) \*/
steps(4, jump-end) /\* 同 steps(4, end) \*/
steps(5, jump-none)
steps(3, jump-both)
```

![“输出进度”关于“输入进度”的图像，其中“steps(2, jump-start)”展示了分别从 (0, 0.5) 和 (0.5, 1) 延伸 0.5 个单位的水平直线及位于原点和 (0.5, 0.5) 的空心点；“steps(4, jump-end)”展示了分别从 (0, 0)、(0.25, 0.25)、(0.5, 0.5) 和 (0.75, 0.75) 延伸 0.25 个单位的水平直线、位于 (0.25, 0)、(0.5, 0.25) 和 (0.75, 0.5) 的空心点及位于 (1, 1) 的点；“steps(5, jump-none)”展示了分别从 (0, 0)、(0.2, 0.25)、(0.4, 0.5)、(0.6, 0.75) 和 (0.8, 1) 延伸 0.2 个单位的水平直线及位于 (0.2, 0)、(0.4, 0.25)、(0.6, 0.5) 和 (0.8, 0.75) 的空心点；“steps(3, jump-both)”展示了分别从 (0, 0.25)、(1/3, 0.5) 和 (2/3, 0.75) 延伸 1/3 个单位的水平直线、位于 (1, 1) 的点及位于原点、(1/3, 0.25)、(2/3, 0.5) 和 (1, 0.75) 的空心点](/zh-CN/docs/Web/CSS/easing-function/jump.svg)

关键字 `step-start` 和 `step-end` 中的任意一个均等价于特定的 `steps()` 值。

形式语法
----
```

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

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

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

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

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

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

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

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

```

示例
--

### 比较各种缓动函数

此示例用动画提供了不同的缓动函数之间的简单比较。在下拉菜单中可选择缓动函数——有若干关键字和一些 `cubic-bezier()` 和 `steps()` 选项。在选择选项后，可用所提供的按钮开始和停止动画。

#### HTML

```html
<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">开始动画</button>
  </li>
  <li>
    <label for="easing-select">选择缓动函数：</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>
```

#### CSS

```css
body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgba(25, 255, 255, 0.8),
    rgba(25, 255, 255, 0.4)
  );
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
```

#### JavaScript

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

startBtn.addEventListener("click", () => {
  if (startBtn.textContent === "开始动画") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "停止动画";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "开始动画";
  }
});

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

#### 结果

### 使用 cubic-bezier() 函数

这些三次贝塞尔曲线在用于 CSS 时有效：

```css
/\* 含四个位于 [0, 1] 范围中的 <number> 的标准贝塞尔曲线 \*/
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/\* 因为任意 <integer> 也均为 <number>，所以使用 <integer> 有效。\*/
cubic-bezier(0, 0, 1, 1)

/\* 负值为有效的纵坐标，将导致反弹效果。\*/
cubic-bezier(0.1, -0.6, 0.2, 0)

/\* 大于 1.0 的值也为有效的纵坐标。\*/
cubic-bezier(0, 1.1, 0.8, 4)
```

这些三次贝塞尔曲线的定义无效：

```css
/\* 尽管动画的输出类型可能为颜色，但是贝塞尔曲线使用数值比值。\*/
cubic-bezier(0.1, red, 1.0, green)

/\* 横坐标须位于 [0, 1] 范围中，否则曲线不是关于时间的函数。\*/
cubic-bezier(2.45, 0.6, 4, 0.1)

/\* 两个点均须定义，无默认值。\*/
cubic-bezier(0.3, 2.1)

/\* 横坐标须位于 [0, 1] 范围中，否则曲线不是关于时间的函数。\*/
cubic-bezier(-1.9, 0.3, -0.2, 2.1)
```

### 使用 steps() 函数

这些缓动函数有效：

```css
/\* 有 5 次踏步，最后一步恰好发生在动画结束前。\*/
steps(5, end)

/\* 两步阶梯，第一步发生在动画开始时。\*/
steps(2, start)

/\* 第二个参数为可选的。\*/
steps(2)
```

**备注：** 若动画含有多个定格，则在 `steps()` 中所指定的步子将应用于每一段。因此含三个区段和 `steps(2)` 的动画将总共含有 6 步，每段 2 步。

这些缓动函数无效：

```css
/\* 第一个参数须为 <integer>，不能为实数值，即使此值等于某 <integer> 也不行。\*/
steps(2.0, jump-end)

/\* 步数须非负。\*/
steps(-3, start)

/\* 须至少有一步。\*/
steps(0, jump-none)
```

规范
--

| Specification |
| --- |
| CSS Easing Functions Level 1 # easing-functions |

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

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

参见
--

* CSS 动画
* CSS 过渡
* cubic-bezier


<string> - CSS：层叠样式表

<string>
========

在 CSS 中，**`<string>`** 是用来表示一串字符的数据类型，它被用在众多 CSS 属性中，例如`content`、`font-family`、和`quotes`。

使用规则
----

**`<string>`** 数据类型是由包含在英文双引号（**`"`**）或英文单引号（**'**）中的任意数量的 Unicode 字符组成。

大多数字符都可以写成字面量的形式，并且所有字符都可以写成以反斜线（**`\`**）开头的十六进制 Unicode 码点的形式。比如说：**`\22`**表示一个双引号，**`\27`**表示一个单引号，**`\A9`**表示版权声明符号（**`©`**）。

需要注意的是，在使用某些特殊字符时需要在前面加上反斜线来转义，包括但不限于在双引号字符串中使用双引号字符，在单引号字符串中使用单引号字符，以及反斜线字符，比如 **`\\`** 表示一个反斜线字符。

当你想换行的时候，必须使用像 **`\A`** 或者 **`\00000A`** 这样的换行符。不过在你的代码中，可以通过在每行末尾增加一个反斜线（**`\`**）的方式来创建一个多行的字符串。

**备注：** CSS **`<string>`** 中不能使用像 **` `** 或者 **`—`** 这样的实体。

例子
--
```

/* Simple strings */
"This string is demarkated by double quotes."
'This string is demarkated by single quotes.'

/* Character escaping */
"This is a string with \" an escaped double quote."
"This string also has \22 an escaped double quote."
'This is a string with \' an escaped single quote.'
'This string also has \27 an escaped single quote.'
"This is a string with \\ an escaped backslash."

/* New line in a string */
"This string has a \Aline break in it."

/* String spanning two lines of code (these two strings will have identical output) */
"A really long \
awesome string"
"A really long awesome string"
```

规范
--

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

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

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


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

<system-color>
==============

CSS 数据类型 **`<system-color>`** 通常反映了用于网页不同部分所选的默认颜色。

然而用户代理可以提供名为*强制颜色模式*的无障碍特性，颜色在此模式中被限制于用户和用户代理所定义的色组中，在特定属性中改写作者所选的颜色。在强制颜色模式中，`<system-color>` 暴露了所选颜色，页面的其余部分可由此融入其中。强制颜色模式的一个例子为 Windows 上的高对比度模式。

在强制颜色模式中，作者应为所有颜色*未*被改写的属性使用 `<system-color>` 类型中的颜色。由此确保页面在所有属性上一致使用相同的色组。

作者可使用媒体特性 `forced-colors` (en-US) 检测强制颜色模式。

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

语法
--

注意这些关键字虽然*不区分大小写*，但此处为了可读性以混合的大小写列出。

`AccentColor`

突显的用户界面控件的背景颜色

`AccentColorText`

突显的用户界面控件的文本颜色

`ActiveText`

活跃链接的文本颜色

`ButtonBorder`

控件的边框底色

`ButtonFace`

控件的背景颜色

`ButtonText`

控件的文本颜色

`Canvas`

应用内容或文档的背景颜色

`CanvasText`

应用内容或文档中的文本颜色

`Field`

输入框的背景颜色

`FieldText`

输入框中的文本颜色

`GrayText`

禁用元素（如禁用控件）的文本颜色

`Highlight`

选中项的背景颜色

`HighlightText`

选中项的文本颜色

`LinkText`

非活跃且未访问链接的文本颜色

`Mark`

被专门标记（如用 HTML `mark` 元素）的文本的背景颜色

`MarkText`

被专门标记（如用 HTML `mark` 元素）的文本颜色

`VisitedText`

已访问链接的文本颜色

### 弃用的系统颜色关键字

在 CSS 颜色模块的先前版本中定义了下列关键字。现在不推荐在公共网页上使用这些关键字。

`ActiveBorder`
已弃用

活跃窗口的边框颜色。

`ActiveCaption`
已弃用

活跃窗口的标题栏颜色。应与前景色 `CaptionText` 一同使用。

`AppWorkspace`
已弃用

多文档界面的背景颜色。

`Background`
已弃用

桌面背景颜色。

`ButtonHighlight`
已弃用

因有一层环绕边框而有立体感的立体元素面向光源的边框颜色。

`ButtonShadow`
已弃用

因有一层环绕边框而有立体感的立体元素背向光源的边框颜色。

`CaptionText`
已弃用

标题栏、尺寸框和滚动条箭头框中的文本颜色。应与背景色 `ActiveCaption` 一同使用。

`InactiveBorder`
已弃用

非活跃窗口的边框颜色。

`InactiveCaption`
已弃用

非活跃窗口的标题栏颜色。应与前景色 `InactiveCaptionText` 一同使用。

`InactiveCaptionText`
已弃用

非活跃窗口的标题栏中的文本颜色。应与背景色 `InactiveCaption` 一同使用。

`InfoBackground`
已弃用

提示框控件的背景颜色。应与前景色 `InfoText` 一同使用。

`InfoText`
已弃用

提示框控件的文本颜色。应与背景色 `InfoBackground` 一同使用。

`Menu`
已弃用

菜单背景颜色。应与前景色 `MenuText` 或 `-moz-MenuBarText` 一同使用。

`MenuText`
已弃用

菜单中的文本颜色。应与背景色 `Menu` 一同使用。

`Scrollbar`
已弃用

滚动条的背景颜色。

`ThreeDDarkShadow`
已弃用

因有两层同心环绕边框而有立体感的立体元素背向光源的较暗（通常为外侧）的边框颜色。

`ThreeDFace`
已弃用

因有两层同心环绕边框而有立体感的立体元素正面的背景颜色。应与前景色 `ButtonText` 一同使用。

`ThreeDHighlight`
已弃用

因有两层同心环绕边框而有立体感的立体元素面向光源的较亮（通常为外侧）的边框颜色。

`ThreeDLightShadow`
已弃用

因有两层同心环绕边框而有立体感的立体元素面向光源的较暗（通常为内侧）的边框颜色。

`ThreeDShadow`
已弃用

因有两层同心环绕边框而有立体感的立体元素背向光源的较亮（通常为内侧）的边框颜色。

`Window`
已弃用

窗口的背景颜色。应与前景色 `WindowText` 一同使用。

`WindowFrame`
已弃用

窗口的边框颜色。

`WindowText`
已弃用

窗口中的文本颜色。应与背景色 `Window` 一同使用。

示例
--

### 使用系统颜色

在此示例中有一个按钮使用 `box-shadow` 属性在正常情况下形成对比。在强制颜色模式中，`box-shadow` 被强制变为 `none`，故此示例使用 `forced-colors` 媒体特性确保有颜色合适（此例为 `ButtonBorder`）的边框。

#### HTML

```html
<button class="button">按我！</button>
```

#### CSS

```css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /\* 改用边框，这是因为在强制颜色模式中 box-shadow 被强制变为“none” \*/
    border: 2px ButtonBorder solid;
  }
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # css-system-colors |

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

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

参见
--

* `<color>`——这些关键字所属的数据类型


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

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

**`border-right-color`** CSS 属性用来设置元素右边的 `border`. 这个属性的值也可以通过简写的 CSS 属性 `border-color` 或`border-right`来设置。

尝试一下
----

Syntax
------

```css
/\* <color> values \*/
border-right-color: red;
border-right-color: #ffbb00;
border-right-color: rgb(255, 0, 0);
border-right-color: hsla(100%, 50%, 25%, 0.75);
border-right-color: currentColor;
border-right-color: transparent;

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

The `border-right-color` property is specified as a single value.

### Values

`<color>`

The color of the right border.

### Formal syntax
```

border-right-color =
  <color>     |
  <image-1D>

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

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

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

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

```

Examples
--------

### A simple div with a border

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### Result

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

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

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | computed color |
| Animation type | a color |

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

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

See also
--------

* The border-related CSS shorthand properties: `border`, `border-right`, and `border-color`.
* The color-related CSS properties for the other borders: `border-left-color`, `border-bottom-color`, and `border-top-color`.
* The other border-related CSS properties applying to the same border: `border-right-style` and `border-right-width`.


scroll-behavior - CSS：层叠样式表

scroll-behavior
===============

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 **`scroll-behavior`** 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

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

尝试一下
----

用户代理可以忽略此属性。

语法
--

```css
/\* Keyword values \*/
scroll-behavior: auto;
scroll-behavior: smooth;

/\* Global values \*/
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
```

### 值

`auto`

滚动框立即滚动。

`smooth`

滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动，用户代理应遵循其平台的约定，如果有的话。

### 形式语法
```

scroll-behavior =
  auto    |
  smooth

```

示例
--

### HTML

```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>
```

### CSS

```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```

### 结果

规范
--

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

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

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


继承 - CSS：层叠样式表

继承
==

在 css 中，每个CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

继承属性
----

当元素的一个**继承属性**（inherited property）没有指定值时，则取父元素的同属性的计算值 computed value (en-US)。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。

继承属性的一个典型例子就是 `color` 属性。给出以下样式规则：

```css
p {
  color: green;
}
```

若将其应用在下面这段 HTML 代码上…

```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```

…文本 "emphasized text" 就会呈现为绿色，因为 `em` 元素继承了 `p` 元素 `color` 属性的值，而没有获取 `color` 属性的初始值（这个 `color` 值用于页面没有指定 `color` 时的根元素）。

非继承属性
-----

当元素的一个**非继承属性**(在 Mozilla code 里有时称之为**reset property** ) 没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。

非继承属性的一个典型例子就是 `border` 属性。给出以下样式规则：

```css
p {
  border: medium solid;
}
```

若将其应用在下面这段 HTML 代码上…

```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```

…文本 "emphasized text" 就没有边框，因为 `border-style` 属性的初始值为`none`。

注意
--

`inherit` 关键字允许显式的声明继承性，它对继承和非继承属性都生效。

可以使用 `all` 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如：
```

font {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}
```

这会将 `font` 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 `font-weight` 属性 为`"bold"`

参见
--

* 控制继承：`inherit`, `initial`, `unset`, and `revert` (en-US)
* CSS 层叠
* 层叠和继承
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素


::first-letter (:first-letter) - CSS：层叠样式表

::first-letter (:first-letter)
==============================

CSS 伪元素 `::first-letter`会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。
```

/* Selects the first letter of a <p> */
p::first-letter {
  font-size: 130%;
}
```

元素首字符并不总是很容易识别：

* 首字符之前或紧跟首字符的标点符号在伪元素匹配范围内。标点符号（Punctuation）包括在开（Ps），闭（Pe），初始引用（Pi），结束引用（Pf）当中定义的任何 Unicode 字符以及其他种类的标点符号（Po）。
* 另外还会有一些以大写双字母组合命名的语言，比如荷兰的 `IJ`. 在这种罕见情况下，两个大写字母都理应被 `::first-letter` 伪元素匹配到。(但是浏览器对此支持得很糟糕，可以用浏览器兼容性表格进行核实).
* `::before` 伪元素 和 `content` 属性结合起来有可能会在元素前面注入一些文本。如此，`::first-letter` 将会匹配到 content 文本的首字母。

首行只在 block-container box内部才有意义，因此 `::first-letter` 伪元素 只在`display`属性值为 block, `inline-block`, `table-cell`, `list-item` 或者 `table-caption`的元素上才起作用。其他情况下，`::first-letter` 毫无意义。

允许的属性值
------

只有一小部分 CSS 可以在包含使用了`::first-letter` 伪元素选择器的 CSS 规则集声明块内运用：

* 所有的字体属性 : `font`, `font-style`, `font-feature-settings`, `font-kerning`, `font-language-override`, `font-stretch`, `font-synthesis`, `font-variant`, `font-variant-alternates`, `font-variant-caps`, `font-variant-east-asian` (en-US), `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`, `font-weight`, `font-size`, `font-size-adjust`, `line-height` 以及 `font-family`.
* 所有的背景属性 : `background-color`, `background-image`, `background-clip`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`以及 `background-blend-mode`.
* 所有的外边距属性：`margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`.
* 所有的内边距属性：`padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.
* 所有的边框属性：比如一些简短的边框属性 `border`, `border-style`, `border-color`, `border-width`, `border-radius`, `border-image`, 还剩下许多冗长的边框属性等等。
* `color` 属性。
* `text-decoration`, `text-shadow`, `text-transform`, `letter-spacing`, `word-spacing` (使用恰当的话), `line-height`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, `box-shadow`, `float`, `vertical-align` `注意此刻必须没有浮动`) 等属性。

当这个列表以后被实现时，为了保持 css 不过时。建议你不要在声明块内使用任何其他属性。

**备注：** 对于 CSS 2，伪元素采用单冒号前缀语法。因为伪类也是同样的语法，所以使得两者难以区分。CSS2.1 改变了伪元素的前缀语法可以解决这个问题。现在伪元素采用双冒号前缀，并且伪类仍然采用单冒号前缀。

CSS2 伪类单冒号语法已得到广泛支持时，所有支持双冒号的浏览器同样也支持旧的单冒号语法。

考虑浏览器兼容性的话，`:first-letter` 是一个更有效的选择; 否则，`::first-letter` 更受欢迎。

示例
--

```css
/\* 使每段开头的第一个字母变红变大 \*/

p::first-letter {
  /\* 使用:first 来兼容 IE8- \*/
  color: red;
  font-size: 130%;
}
```

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |

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

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

参见
--

* `::first-line` 伪元素。


@import - CSS：层叠样式表

@import
=======

概述
--

**`@import`** CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，`@charset` 规则除外; 因为它不是一个嵌套语句，@import 不能在条件组的规则中使用。

因此，用户代理可以避免为不支持的媒体类型检索资源，作者可以指定依赖媒体的 @import 规则。这些条件导入在 URI 之后指定逗号分隔的媒体查询。在没有任何媒体查询的情况下，导入是无条件的。指定所有的媒体具有相同的效果。

语法
--
```

@import url;
@import url list-of-media-queries;
```

其中：

*url*

是一个表示要引入资源位置的 `<string>` 或者 `<uri>()` (en-US) 。这个 URL 可以是绝对路径或者相对路径。要注意的是这个 URL 不需要指明一个文件；可以只指明包名，然后合适的文件会被自动选择 (e.g. **chrome://communicator/skin/**). See here 了解更多。

*list-of-media-queries*

是一个逗号分隔的 媒体查询 条件列表，决定通过 URL 引入的 CSS 规则 在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入 URL 指明的 CSS 文件。

正规语法
----
```

@import =
  @import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;

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

<layer-name> =
  <ident> (en-US) [ '.' <ident> (en-US) ]\*

<import-conditions> =
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?

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

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

<supports-condition> =
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]\*  |
  <supports-in-parens> [ or <supports-in-parens> ]\*

<supports-in-parens> =
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>

<supports-feature> =
  <supports-decl>

<general-enclosed> =
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]

<supports-decl> =
  ( <declaration> )

```

示例
--

```css
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url("landscape.css") screen and (orientation: landscape);
```

规范
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # at-import |

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

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


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

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

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

尝试一下
----

语法
--

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

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

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

### 取值

`<length-percentage>`

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

`auto`

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

形式定义
----

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

形式语法
----
```

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

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

```

规范
--

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

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

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

参见
--

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


text-align-last - CSS：层叠样式表

text-align-last
===============

CSS 属性 **`text-align-last`** 指定一行或者块中的最后一行在被强制换行之前的对齐规则。

语法
--

```css
/\* 关键字值 \*/
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

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

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

### 值

`auto`

受影响的行会根据 `text-align` 的值来对齐，除非 `text-align` 的值是 `justify`，在这种情况下，其效果等同于将 `text-align-last` 的值设置为 `start`。

`start`

如果内容方向是左至右，则等于 `left`，反之则为 `right`。

`end`

如果内容方向是左至右，则等于 `right`，反之则为 `left`。

`left`

行内内容对齐到行框的左边缘。

`right`

行内内容对齐到行框的右边缘。

`center`

行内内容在行框中居中。

`justify`

最后一行文字的开头与内容盒子的左侧对齐，末尾与右侧对齐。

### 形式语法
```

text-align-last =
  auto          |
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent

```

示例
--

### 对齐最后一行
```

<p>
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

```css
p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}
```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # text-align-last-property |

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

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

参见
--

* `text-align`


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

border-block-end-style
======================

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

尝试一下
----

语法
--

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

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

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

### 取值

`<'border-style'>`

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

形式定义
----

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

形式语法
----
```

border-block-end-style =
  <line-style>

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

```

示例
--

### 竖排文本的虚线边框

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


clip - CSS：层叠样式表

clip
====

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

概述
--

`clip` 属性定义了元素的哪一部分是可见的。`clip` 属性只适用于 `position:absolute` 的元素。

**警告：** 这个属性已被废弃。建议使用 `clip-path` 。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | absolutely positioned elements |
| 是否是继承属性 | 否 |
| 计算值 | `auto` if specified as `auto`, otherwise a rectangle with four values, each of which is `auto` if specified as `auto` or the computed length otherwise |
| Animation type | a rectangle |

语法
--

形式语法:
```

clip =
  <rect()>  |
  auto

<rect()> =
  rect( <top> , <right> , <bottom> , <left> )

```

```
clip: rect(1px, 10em, 3rem, 2ch)
clip: auto

clip: inherit
```

### 值

`<shape>`

一个矩形 `<shape>` (en-US)

```css
rect(<top>, <right>, <bottom>, <left>)   /\* 标准语法 \*/
```

或

```css
rect(<top> <right> <bottom> <left>)      /\* 向后兼容语法 \*/
```

`<top>` 和 `<bottom>` 指定相对于盒子*上边框边界* 的偏移，`<right>` 和 `<left>` 指定了相对于盒子*左边框边界* 的偏移。
 `<top>`、`<right>`、`<bottom>` 和 `<left>` 的值可以是 `<length>` 值或 `auto`。

`auto`

元素不裁剪 (默认值)

示例
--

### 裁剪图像

#### HTML

```html
<p class="dotted-border">
  <img src="macarons.png" title="Original graphic" />
  <img id="top-left" src="macarons.png" title="Graphic clipped to upper left" />
  <img id="middle" src="macarons.png" title="Graphic clipped towards middle" />
  <img
 id="bottom-right"
 src="macarons.png"
 title="Graphic clipped to bottom right" />
</p>
```

#### CSS

```css
.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

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

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

参见
--

* Related CSS properties: `text-overflow`, `white-space`, `overflow-x`, `overflow-y`, `overflow`, `display`, `position`


offset - CSS：层叠样式表

offset
======

Baseline 2023
-------------

Newly availableSince August 2023, 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
**`offset`** CSS 简写属性设置了沿定义的路径为元素设置动画所需的所有属性。

**备注：** 规范的早期版本称此属性为 `motion`。

尝试一下
----

复合属性
----

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

* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)
语法
--

```css
/\* 偏移位置 \*/
offset: auto;
offset: 10px 30px;
offset: none;

/\* 偏移路径 \*/
offset: ray(45deg closest-side);
offset: path("M 100 100 L 300 100 L 200 300 z");
offset: url(arc.svg);

/\* 使用距离和/或旋转偏移路径 \*/
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/\* 包括偏移锚点 \*/
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `offset-position` (en-US): `normal`
* `offset-path` (en-US): `none`
* `offset-distance` (en-US): `0`
* `offset-anchor` (en-US): `auto`
* `offset-rotate` (en-US): `auto`
 |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `offset-position` (en-US): refer to the size of containing block
* `offset-distance` (en-US): refer to the total path length
* `offset-anchor` (en-US): relative to the width and the height of the element's reference box
 |
| 计算值 | as each of the properties of the shorthand:* `offset-position` (en-US): for `length` the absolute value, otherwise a percentage
* `offset-path` (en-US): as specified
* `offset-distance` (en-US): for `length` the absolute value, otherwise a percentage
* `offset-anchor` (en-US): for `length` the absolute value, otherwise a percentage
* `offset-rotate` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `offset-position` (en-US): a position
* `offset-path` (en-US): by computed value type
* `offset-distance` (en-US): a length, percentage or calc();
* `offset-anchor` (en-US): a position
* `offset-rotate` (en-US): as <angle>, <basic-shape> or <path()>
 |
| Creates stacking context | yes |

### 形式语法
```

offset =
  [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

```

示例
--

### 让元素在路径上运动

#### HTML

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

#### CSS

```css
@keyframes move {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Motion Path Module Level 1 # offset-shorthand |

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

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

参见
--

* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)


appearance - CSS：层叠样式表

appearance
==========

**`appearance`** CSS 属性用于控制 UI 控件的基于操作系统主题的原生外观。

尝试一下
----

在标准化之前，这个属性允许将简单的元素显示为控件，例如按钮或复选框。这被认为是一个缺陷，现在鼓励开发者仅使用标准关键字。

**备注：** 如果你想在网站上使用此属性，应非常谨慎地进行测试。虽然它在大多数现代浏览器中得到支持，但实现方式不同。在旧的浏览器中，即使是关键字 `none` 对于不同浏览器中的所有表单元素也没有相同的效果，有些浏览器甚至不支持它。在最新的浏览器中差异较小。

语法
--

```css
/\* CSS 基本用户界面模块 Level 4 支持的值 \*/
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

/\* "compat-auto" 值与 "auto" 值具有相同的效果。 \*/
appearance: button;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

/\* Gecko 中可用的部分值列表 \*/
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;

/\* WebKit/Blink（以及 Gecko 和 Edge）中可用的部分值列表 \*/
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

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

### 值

#### 标准关键字

| 值 | 浏览器 | 描述 |
| --- | --- | --- |
| `none` | Firefox Chrome Safari Edge | 隐藏部件的某些特性，例如 select 元素中显示的指示列表可以展开的箭头。 |
| `auto` | Firefox Chrome Edge | 用户代理根据元素选择适当的特殊样式。对于没有特殊样式的元素，其行为类似于 `none`。 |
| `menulist-button` | Firefox Chrome Safari Edge |  |
| `textfield` | Firefox Chrome Safari Edge |  |
| 以下值被视为等同于 `auto`： |
| `button` | Firefox Chrome Safari Edge | 该元素曾经被绘制为一个按钮。 |
| `checkbox` | Firefox Chrome Safari Edge | 该元素曾经被绘制为一个复选框，包括实际的“复选框”部分。 |
| `listbox` | Firefox Chrome Safari Edge |  |
| `menulist` | Firefox Chrome Safari Edge |  |
| `meter` | Chrome Safari Firefox |  |
| `progress-bar` | Chrome Safari Firefox |  |
| `push-button` | Chrome Safari Edge |  |
| `radio` | Firefox Chrome Safari Edge | 该元素曾经被绘制为单选按钮，包括实际的“单选按钮”部分。 |
| `searchfield` | Firefox Chrome Safari Edge |  |
| `slider-horizontal` | Chrome Safari Edge |  |
| `square-button` | Chrome Safari Edge |  |
| `textarea` | Firefox Chrome Safari Edge |  |

#### 非标准关键字

以下值可能适用于历史浏览器版本，使用 **`-moz-appearance`** 或 **`-webkit-appearance`** 前缀，但不适用于标准的 **`appearance`** 属性。

| 值 | 浏览器 | 描述 |
| --- | --- | --- |
| `attachment` | Safari |  |
| `borderless-attachment` | Safari |  |
| `button-bevel` | Firefox Chrome Safari Edge |  |
| `caps-lock-indicator` | Safari Edge |  |
| `caret` | Firefox Chrome Safari Edge |  |
| `checkbox-container` | Firefox | 该元素的外观类似于复选框的容器，可能包括在某些平台下的光照预设背景效果。通常它会包含一个标签和一个复选框。 |
| `checkbox-label` | Firefox |  |
| `checkmenuitem` | Firefox |  |
| `color-well` | Safari | `input type=color` |
| `continuous-capacity-level-indicator` | Safari |  |
| `default-button` | Safari Edge |  |
| `discrete-capacity-level-indicator` | Safari |  |
| `inner-spin-button` | Firefox Chrome Safari |  |
| `image-controls-button` | Safari |  |
| `list-button` | Safari | datalist |
| `listitem` | Firefox Chrome Safari Edge |  |
| `media-enter-fullscreen-button` | Chrome Safari |  |
| `media-exit-fullscreen-button` | Chrome Safari |  |
| `media-fullscreen-volume-slider` | Safari |  |
| `media-fullscreen-volume-slider-thumb` | Safari |  |
| `media-mute-button` | Chrome Safari Edge |  |
| `media-play-button` | Chrome Safari Edge |  |
| `media-overlay-play-button` | Chrome Safari |  |
| `media-return-to-realtime-button` | Safari |  |
| `media-rewind-button` | Safari |  |
| `media-seek-back-button` | Safari Edge |  |
| `media-seek-forward-button` | Safari Edge |  |
| `media-toggle-closed-captions-button` | Chrome Safari |  |
| `media-slider` | Chrome Safari Edge |  |
| `media-sliderthumb` | Chrome Safari Edge |  |
| `media-volume-slider-container` | Chrome Safari |  |
| `media-volume-slider-mute-button` | Safari |  |
| `media-volume-slider` | Chrome Safari |  |
| `media-volume-sliderthumb` | Chrome Safari |  |
| `media-controls-background` | Chrome Safari |  |
| `media-controls-dark-bar-background` | Safari |  |
| `media-controls-fullscreen-background` | Chrome Safari |  |
| `media-controls-light-bar-background` | Safari |  |
| `media-current-time-display` | Chrome Safari |  |
| `media-time-remaining-display` | Chrome Safari |  |
| `menulist-text` | Firefox Chrome Safari Edge |  |
| `menulist-textfield` | Firefox Chrome Safari Edge | 该元素被样式化为下拉列表的文本字段。（未在 Windows 平台上实现） |
| `meterbar` | Firefox | 使用 `meter` 来代替。 |
| `number-input` | Firefox |  |
| `progress-bar-value` | Chrome Safari |  |
| `progressbar` | Firefox | 该元素的样式类似于进度条。可以使用 `progress-bar` 样式来实现 |
| `progressbar-vertical` | Firefox |  |
| `range` | Firefox |  |
| `range-thumb` | Firefox |  |
| `rating-level-indicator` | Safari |  |
| `relevancy-level-indicator` | Safari |  |
| `scale-horizontal` | Firefox |  |
| `scalethumbend` | Firefox |  |
| `scalethumb-horizontal` | Firefox |  |
| `scalethumbstart` | Firefox |  |
| `scalethumbtick` | Firefox |  |
| `scalethumb-vertical` | Firefox |  |
| `scale-vertical` | Firefox |  |
| `scrollbarthumb-horizontal` | Firefox |  |
| `scrollbarthumb-vertical` | Firefox |  |
| `scrollbartrack-horizontal` | Firefox |  |
| `scrollbartrack-vertical` | Firefox |  |
| `searchfield-decoration` | Safari Edge |  |
| `searchfield-results-decoration` | Chrome Safari Edge | 可以在 Windows 7 上的 Chrome 51 上使用。 |
| `searchfield-results-button` | Safari Edge |  |
| `searchfield-cancel-button` | Chrome Safari Edge |  |
| `snapshotted-plugin-overlay` | Safari |  |
| `sheet` | 无 |  |
| `slider-vertical` | Chrome Safari Edge |  |
| `sliderthumb-horizontal` | Chrome Safari Edge |  |
| `sliderthumb-vertical` | Chrome Safari Edge |  |
| `textfield-multiline` | Firefox | 使用 `textarea` 代替。 |
| `-apple-pay-button` | Safari | 仅适用于 **iOS** 和 **macOS**。从 iOS 10.1 和 macOS 10.12 开始，在 Web 上可用。 |

形式定义
----

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

形式语法
----
```

appearance =
  none              |
  auto              |
  <compat-auto>     |
  <compat-special>

<compat-auto> =
  searchfield   |
  textarea      |
  checkbox      |
  radio         |
  menulist      |
  listbox       |
  meter         |
  progress-bar  |
  button

<compat-special> =
  textfield        |
  menulist-button

```

示例
--

### 使一个元素看起来像一个下拉列表按钮

```css
.exampleone {
  -webkit-appearance: menulist-button;
  -moz-appearance: menulist-button;
  appearance: menulist-button;
}
```

### 应用自定义样式

#### HTML

```html
<select class="none">
  <option>appearance: none</option>
</select>
<select class="auto">
  <option>appearance: auto</option>
</select>
```

#### CSS

```css
.none {
  appearance: none;
}
.auto {
  appearance: auto;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # appearance-switching |

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

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

参见
--

* 关于 CSS 基本用户界面模块 Level 4 的 `appearance` 的定义


font-style - CSS：层叠样式表

font-style
==========

**`font-style`** CSS 属性允许你选择 `font-family` 字体下的 `italic` 或 `oblique` 样式。

尝试一下
----

**Italic** 字体一般是现实生活中的草书，相比无样式的字体，通常会占用较少的水平空间，而 **oblique** 字体一般只是常规字形的倾斜版本。如果当前字体没有对应的斜体，那么斜体（italic）和倾斜体（oblique）都会通过人工倾斜常规字体的字形来模拟（使用 `font-synthesis` 对此进行控制）。

语法
--

```css
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

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

`font-style` 属性被指定为从下面的取值列表中的单独一个关键字，如果关键字是 `oblique`，则可附加一个可选的角度。

### 值

`normal`

选择 `font-family` 的常规字体。

`italic`

选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（`oblique` ）替代。

`oblique`

选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（`italic` ）替代。If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of `-90deg` to `90deg` inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.

In general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).

### 可变字体

可变字体（Variable font）可以精确控制 oblique 字体的倾斜程度。You can select this using the `<angle>` modifier for the `oblique` keyword.

For TrueType or OpenType variable fonts, the `"slnt"` variation is used to implement varying slant angles for oblique, and the `"ital"` variation with a value of 1 is used to implement italic values. See `font-variation-settings`.

For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which `font-style: oblique` can accept an `<angle>`.

无障碍问题
-----

Large sections of text set with a `font-style` value of `italic` may be difficult for people with cognitive concerns such as Dyslexia to read.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* W3C Understanding WCAG 2.1
形式定义
----

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

形式语法
----
```

font-style =
  normal                           |
  italic                           |
  oblique <angle [-90deg,90deg]>?

```

示例
--

### 字体样式

示例展示了不同的 `font-style` 值。CSS 看起来像这样：
```

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>
```

```css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
```

规范
--

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

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

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

参见
--

* `font-family`
* `font-weight`
* 基本文本和字体样式


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

padding-block-end
=================

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

尝试一下
----

语法
--

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

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

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

### 取值

`<length>`

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

`<percentage>`

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

描述
--

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

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

形式定义
----

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

形式语法
----
```

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

```

示例
--

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

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


background-position-y - CSS：层叠样式表

background-position-y
=====================

摘要
--

**`background-position-y`** 属性用于设置初始状态时背景图片在垂直方向上的位置，这个位置相对于通过 `background-origin` 定义的背景层的原点进行定位。需要获得更多的信息可以查看`background-position` 属性，这个属性已经得到了长久且广泛的支持。

**备注：** `background-position-y` 设定的值会被 `background` 或者是 `background-position` 的简写属性的`background-position-x`后面的值所覆盖。

```css
/\* Keyword values \*/
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/\* <percentage> values \*/
background-position-y: 25%;

/\* <length> values \*/
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/\* side-relative values \*/
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/\* Multiple values \*/
background-position-y: 0px, center;

/\* Global values \*/
background-position-y: inherit;
background-position-y: initial;
background-position-y: unset;
```

|  |  |
| --- | --- |
| 初始值 | `0%` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to height of background positioning area minus height of background image |
| 计算值 | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | a repeatable list |

语法
--

### 合法值

`top`

将背景图片的上边界与背景位置层的上边界对齐。

`center`

将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐。

`bottom`

将背景图片的下边界与背景位置层的下边界对齐。

`<length>`

通过`<length>` 直接设定具体的数值，该数值定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移量，默认情况下是 padding-box.

`<percentage>`

通过`<percentage>` 百分比的设置，该百分比定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移百分比，从而得到偏移量，该偏移量的计算方法是:(当前背景层的高 - 背景图片的高) \* 百分比，高度差和百分比都保留符号，例如 (100px - 200px) \* (-10%) = 10px 那么偏移量就是正的 10px(向下为正方向),默认情况下是 padding-box.

### Formal syntax
```

background-position-y =
  [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#

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

```

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

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

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

另见
--

* `background-position`
* `background-position-x`
* `background-position-inline`
* `background-position-block`
* Multiple backgrounds (en-US)


<custom-ident> - CSS：层叠样式表

<custom-ident>
==============

**`<custom-ident>`** 指用户自定义字符串标识符。一种CSS 数据类型；要区分大小写，值不能有任何歧义。

语法
--

`<custom-ident>` 语法同 CSS 属性名相似，但它是区分大小写的。可以由以下字符组成：

* 字母 (`A` - `Z`, `a` - `z`),
* 十进制数 (`0` - `9`),
* 连字符 (`-`),
* 下划线 (`_`),
* 转义字符 ( `\`),
* Unicode 编码（格式：转义字符（`\`）后跟 1 到 6 位十六进制数）

注意：`id1`, `Id1`, `iD1`和`ID1`都是不同标识符，因为标识符是区分大小写的。另一方面，因为可以解码，所以 `toto\?` 和 `toto\3F` 是相同的。

### 禁用值

`<custom-ident>` 不能用单引号或双引号包起来。此外，第一个字符不能为数字，字符串开头不能是连字符 (`-`) 后跟数字或连字符。

为避免歧义，各个属性对应的`<custom-ident>` 禁止使用以下特殊值：

`animation-name`

禁用 CSS 关键字 `unset`, `initial`, `inherit`, `none`

`counter-reset``counter-increment`

禁止使用`unset`, `initial`, `inherit`, `none`.

`@counter-style``list-style-type`

禁止使用`unset`, `initial`, `inherit`, `none`, `inline`, `outside`. 同时不同浏览器预定义的值如：`disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open`, 和 `disclosure-close`也不能使用。

`grid-row-start` (en-US)
`grid-row-end` (en-US)
`grid-column-start` (en-US)
`grid-column-end` (en-US)

禁止使用 `span` 。

`will-change`

禁止使用`unset`, `initial`, `inherit`, 以及 `will-change`, `auto`, `scroll-position`, and `contents`.

示例
--

### 有效标识符
```

nono79            字母数字混合
ground-level      字母 - 字母
-test             连字符后跟字母
_internal         下划线后跟字母
\22 toto          Unicode 编码后跟字母
bili\.bob         转义的句号
```

### 无效标识符
```

34rem             第一个字符不能是数字
-12rad            第一个字符连字符后不能跟数字
bili.bob          只有字母数字、连字符-、下划线_不需要转义
--toto            第一个字符不能为连字符后跟连字符
'bilibob'         不能用单引号包起来，这是一个字符串类型
"bilibob"         不能用双引号包起来，这是一个字符串类型
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # custom-idents |
| CSS Will Change Module Level 1 # valdef-will-change-custom-ident |
| CSS Counter Styles Level 3 # typedef-counter-style-name |
| CSS Lists and Counters Module Level 3 # counter-properties |

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

由于这种类型不是真正的类型，而是用于简化允许值描述的便利类型，因此没有浏览器兼容性信息。


initial - CSS：层叠样式表

initial
=======

CSS 关键字 **`initial`** 将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆。它可以应用于任何 CSS 属性。这包括 CSS 简写 `all`，initial 可用于将所有 CSS 属性恢复到其初始状态。

**备注：** 在继承的属性上，初始值可能是意外的。你应该考虑使用 `inherit`, `unset`，或`revert` (en-US) 关键字代替。

示例
--

#### HTML

```html
<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
```

#### CSS

```css
p {
  color: red;
}

em {
  color: initial;
}
```

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

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

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

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

参见
--

* Use `unset` to set a property to its inherited value if it inherits, or to its initial value if not.
* Use `revert` (en-US) to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* Use `inherit` to make an element's property the same as its parent.
* The `all` property lets you reset all properties to their initial, inherited, reverted, or unset state at once.


CSS Backgrounds and Borders - CSS：层叠样式表

CSS Backgrounds and Borders
===========================

**CSS Backgrounds and Borders** 是 CSS 的一个模块，它可以让你为元素的背景和边框设置样式。背景可以用颜色或图像填充，剪裁或调整大小，以及以其他方式修改。边框可以用线条或图像装饰，并制成方形或圆形。此外，元素框可以用阴影装饰。

Reference
---------

### CSS 属性

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `border`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius` (en-US)
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `box-shadow`
指南
--

工具
--

Using multiple backgrounds

Explains how to set one or more backgrounds on an element.

Scaling background images

Describes how to change the size and repeating behavior of background images.

Applying color to HTML elements using CSS

An overview of how CSS color can be used in HTML, including for borders.

Border-image 生成器

此交互式工具让你以可视化方式创建边框图像（`border-image` 属性）。

Border-radius 生成器

此交互式工具让你以可视化方式创建圆角（`border-radius` 属性）。

Box-shadow 生成器

此交互式工具让你以可视化方式创建元素身后的阴影（`box-shadow` 属性）。

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3  |