aspect-ratio - CSS：层叠样式表

aspect-ratio
============

CSS 属性 **`aspect-ratio`** 为盒子规定了**首选纵横比**，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

尝试一下
----

```css
aspect-ratio: 1 / 1;
aspect-ratio: 1;

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

### 取值

`auto`

具有固有纵横比的可替换元素将使用此纵横比，否则盒子无首选纵横比。涉及固有纵横比的尺寸计算始终使用内容盒的尺寸。

`<ratio>`

盒子的首选纵横比为指定的 `width` / `height` 比率。如果省略 `height` 和前面的斜杠字符，则 `height` 默认为 `1`。涉及首选纵横比的尺寸计算使用由 `box-sizing` 所指定的盒子的尺寸。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements except inline boxes and internal ruby or table boxes |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

aspect-ratio =
  auto     ||
  <ratio>

<ratio> =
  <number [0,∞]> [ / <number [0,∞]> ]?

```

示例
--

### aspect-ratio 的取值示例

```css
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # aspect-ratio |

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

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

参见
--

* 图像的 aspect-ratio：防止卡顿
* 为 CSS 设计纵横比单位
* 设置图像的高度和宽度再次变得重要起来


::placeholder - CSS：层叠样式表

::placeholder
=============

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

伪元素\*\*`::placeholder`\*\*可以选择一个表单元素的占位文本 (en-US)，它允许开发者和设计师自定义占位文本 (en-US)的样式。

```css
::placeholder {
  color: red;
  font-size: 1.5em;
}
```

在使用了`::placeholder`伪元素的选择器中，仅有小一部分 CSS 属性可以使用，这个集合可以参考`::first-line`伪元素。

语法
--

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

### 红色文本

#### HTML

```html
<input placeholder="我是红色的！" />
```

#### CSS

```css
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}
```

#### 结果

### 绿色文本

#### HTML

```html
<input placeholder="而我是绿色的！" />
```

#### CSS

```css
input::placeholder {
  color: green;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # placeholder-pseudo |

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

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

相似阅读
----

* `:placeholder-shown`
* 与此伪元素选择器功能相同的几个浏览器私有选择器：
    + `::-webkit-input-placeholder` (en-US)
    + `::-moz-placeholder` (en-US)
    + `:-ms-input-placeholder` (en-US)
* Forms in HTML (en-US)
* `<input>`
* `<textarea>`


:root - CSS：层叠样式表

:root
=====

**`:root`** 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，**`:root`** 表示 `<html>` 元素，除了优先级更高之外，与 `html` 选择器相同。

```css
/\* 选择文档的根元素（HTML 中的 <html>） \*/
:root {
  background: yellow;
}
```

语法
--

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

示例
--

### 声明全局 CSS 变量

在声明全局 CSS 变量时 **`:root`** 会很有用：

```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

规范
--

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

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

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

参见
--

* `<html>`
* `Document.rootElement` (en-US)
* `Node.getRootNode()`
* `Element.shadowRoot`
* `ShadowRoot`


line-height - CSS：层叠样式表

line-height
===========

**`line-height`** CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

尝试一下
----

语法
--

```css
/\* Keyword value \*/
line-height: normal;

/\* Unitless values: use this number multiplied
by the element's font size \*/
line-height: 3.5;

/\* <length> values \*/
line-height: 3em;

/\* <percentage> values \*/
line-height: 34%;

/\* Global values \*/
line-height: inherit;
line-height: initial;
line-height: unset;
```

`line-height` 属性被指定为以下任何一个：

* 一个 `<number>` 值
* 一个 `<length>` 值
* 一个 `<percentage>` 值
* 关键字 `normal`。
### 取值

`normal`

取决于用户代理。桌面浏览器（包括 Firefox）使用默认值，约为 **`1.2`**，这取决于元素的 `font-family`。

`<number>`（无单位）

该属性的应用值是这个无单位`<数字>`乘以该元素的字体大小。计算值与指定的 `<number>` 值相同。大多数情况下，这是设置 `line-height` 的**推荐方法**，不会在继承时产生不确定的结果。

`<length>`

指定用于计算行向盒高度的`<长度>`值。以 **em** 为单位的值可能会产生不确定的结果（见下面的示例）。

`<percentage>`

与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。`<percentage>` 值可能会带来不确定的结果（见下面第二个示例）。

### 形式化语法
```

line-height =
  normal                     |
  <number [0,∞]>             |
  <length-percentage [0,∞]>

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

```

示例
--

### 基本示例

```css
/\* 理论上，以下所有规则拥有相同的行高 \*/

div {
  line-height: 1.2;
  font-size: 10pt;
} /\* 无单位数值 number/unitless \*/
div {
  line-height: 1.2em;
  font-size: 10pt;
} /\* 长度 length \*/
div {
  line-height: 120%;
  font-size: 10pt;
} /\* 百分比 percentage \*/
div {
  font:
    10pt/1.2 Georgia,
    "Bitstream Charter",
    serif;
} /\* font 简写属性 font shorthand \*/
```

为了简便，可以通过 `font` 简写来设置 `line-height`，但这要求在使用该简写属性时同时设置 `font-family` 属性。

### 推荐在设置 line-height 时使用无单位数值

这个示例说明了为什么给 `line-height` 赋值时使用 `<数字>` 值比使用 `<长度>` 更好。我们会到用两个 `<div>` 元素。第一个 `div` 为绿色边框，使用无单位的 `line-height`值。第二个 `div` 带红色边框，使用 `em` 定义 `line-height` 的值。

#### CSS

```css
.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}
```

#### HTML

```html
<div class="box green">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<div class="box red">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<!-- The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px -->
<!-- The second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->
```

#### 结果

无障碍方面
-----

主段落内容的 `line-height` 至少应为 `1.5`。这将有助于改善低可视条件下的体验，也对认知阻碍者，如阅读困难者，有帮助。如果文字的大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放。

W3C Understanding WCAG 2.1

规范
--

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # line-height-property |

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| Percentages | refer to the font size of the element itself |
| 计算值 | for percentage and length values, the absolute length, otherwise as specified |
| Animation type | either number or length |

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

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

参见
--

* `font`
* `font-size`


伪元素 - CSS：层叠样式表

伪元素
===

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的 `::first-line` 伪元素可改变段落首行文字的样式。

```css
/\* 每一个 <p> 元素的第一行。 \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```

**备注：** 与伪元素比较，`pseudo-classes` 能够根据*状态*改变元素样式。

语法
--

```css
selector::pseudo-element {
  property: value;
}
```

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

**备注：** 按照规范，应该使用双冒号（`::`）而不是单个冒号（`:`），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

字母索引
----

一组 CSS 规范定义的伪元素包括以下内容：

A

* `::after`

B

* `::backdrop`
* `::before`

C

* `::cue`
* `::cue-region` (en-US)

F

* `::first-letter`
* `::first-line`
* `::file-selector-button`

G

* `::grammar-error`
实验性

M

* `::marker`

P

* `::part()`
* `::placeholder`

S

* `::selection`
* `::slotted()`
* `::spelling-error`
实验性

T

* `::target-text`
实验性
规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |
| CSS Positioned Layout Module Level 4  |
| CSS Shadow Parts  |
| WebVTT: The Web Video Text Tracks Format  |

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

| 浏览器 | 最低版本 | 支持的伪元素 |
| --- | --- | --- |
| Internet Explorer | 8.0 | `:pseudo-element` |
| 9.0 | `:pseudo-element ::pseudo-element` |
| Firefox (Gecko) | 1.0 (1.0) | `:pseudo-element` |
| 1.0 (1.5) | `:pseudo-element ::pseudo-element` |
| Opera | 4.0 | `:pseudo-element` |
| 7.0 | `:pseudo-element ::pseudo-element` |
| Safari (WebKit) | 1.0 (85) | `:pseudo-element ::pseudo-element` |

参见
--

* 伪类


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

border-right-width
==================

CSS 的\*\*`border-right-width`\*\* 用来设置盒子右边框的宽度。

尝试一下
----

语法
--

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

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

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

### 数值

`<line-width>`

定义边框的宽度，或者作为显性非负的长度值 `<length>` 或者是关键字。如果他是一个关键字，它必须是下列值的一种：

* `thin` 一个细边框
* `medium` 一个中等边框
* `thick` 一个粗边框

**备注：** 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 `thin ≤ medium ≤ thick`, 在单独文档中这些值内部是恒定不变的。

### 形式语法
```

border-right-width =
  <line-width>

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

```

示例
--

### HTML

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

### CSS

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

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

### 结果

规范
--

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

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

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

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

参见
--

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


place-items - CSS：层叠样式表

place-items
===========

CSS 中的 **`place-items`** 是一个简写属性 ，它允许你在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 (例如：`align-items` 和 `justify-items` 属性) 。如果未提供第二个值，则第一个值作为第二个值的默认值。

尝试一下
----

构成属性
----

该属性是以下两个 CSS 属性的简写：

* `align-items`
* `justify-items`
语法
--

```css
/\* Keyword values \*/
place-items: auto center;
place-items: normal start;

/\* Positional alignment \*/
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;

/\* Baseline alignment \*/
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto;

/\* Global values \*/
place-items: inherit;
place-items: initial;
place-items: unset;
```

### 值

`auto`

`auto` 实际的值继承父自元素的 `justify-items` 值，除非该元素没有父元素或是用了绝对定位。在这些示例中，`auto` 表示 `normal` 。

`normal`

`normal` 的效果取决于我们使用哪种布局方式：

* 在块级布局中，`normal` 和 `start` 一样。
* 在绝对定位布局中，关键字在*被替换的*绝对定位元素上的行为类似于 `start`，在*所有其他*绝对定位的元素上表现类似 `stretch`。
* 在表格单元格布局中，此关键字没有意义，因为该属性*被忽略*。
* 在 flexbox 布局中，此关键字没有意义，因为该属性*被忽略*。
* 在 grid 布局中，此关键字和 `stretch` 的行为相似，但是具有宽高比和固有尺寸的元素行为和 `start` 相似。

`start`

在适当的轴线上，元素块沿着对齐容器的起始边缘对齐。

`end`

在适当的轴线上，元素块沿着对齐容器的结束边缘对齐。

`flex-start`

 对齐方式取决于 flex 容器的的开始方向。（水平和垂直两个方向）
 这只对 flex 布局元素生效，对于不是 flex 容器的子元素，它被视为 `start` 。

`flex-end`

 对齐方式取决于 flex 容器的的结束方向。（水平和垂直两个方向）
 这只对 flex 布局元素生效，对于不是 flex 容器的子元素，它被视为 end。

`self-start`

沿着轴线的头部对齐。

`self-end`

沿着轴线的尾部对齐。

`center`

沿着对齐容器的中心对齐。

`left`

沿着对齐容器的左侧对齐，如果属性的轴不与内联轴平行，则该值的行为和 `start` 类似。

`right`

沿着对齐容器的右侧对齐，如果属性的轴不与内联轴平行，则该值的行为和 `start` 类似。

`baseline first baseline`
`last baseline`

 指定参与第一个或最后一个基线对齐：元素的第一个或最后一个基线集的对齐基线与基线共享组中所有框共享的第一个或最后一个基线集中相应的基线对齐。
 `first baseline` 的回退对齐方式为 `start` ，`last baseline` 则为 `end`。

`stretch`

如果子项加起来的尺寸小于对齐容器的尺寸，则任何未尺寸为 `auto` 的项将增加同等的大小（不是按比例），但也会受到 `max-height`/`max-width` （或等同的功能）的限制，因此所有项刚好能填满对齐容器。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `align-items`: `normal`
* `justify-items`: `legacy`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `align-items`: as specified
* `justify-items`: as specified
 |
| Animation type | discrete |

形式语法
----
```

place-items =
  <'align-items'> <'justify-items'>?

```

示例
--

### 在弹性容器中排列元素
```

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

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

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

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

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

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

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

select {
  font-size: 16px;
}

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

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

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

<div class="row">
  <label for="values">place-items: </label>
  <select id="values">
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>
```

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

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

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

#### CSS

```css
#container {
  height: 200px;
  width: 240px;
  place-items: center; /\* You can change this value by selecting another option in the list \*/
  background-color: #8c8c8c;
}

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

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

#### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # place-items-property |

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

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

参见
--

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `align-items` property
* The `align-self` property
* The `justify-items` property
* The `justify-self` property


direction - CSS：层叠样式表

direction
=========

**`direction`** CSS 属性用于设置文本、表格列和水平溢出的方向。对于从右到左书写的语言（如希伯来语或阿拉伯语），应将该属性设置为 `rtl`；对于从左到右书写的语言（如英语和大多数其他语言），则应将该属性设置为 `ltr`。

尝试一下
----

请注意，文本方向通常在文档中定义（例如，使用 HTML 的 `dir` 属性 属性），而不是通过直接使用 `direction` 属性来定义。

该属性设置可以设置块级元素文本的基本方向，也可以设置由通过 `unicode-bidi` 属性创建的嵌入元素的方向。与此同时，它还可以设置文本、块级元素的默认对齐方式，以及表行中的单元格的流动方向。

与 HTML 中的 `dir` 属性不同，`direction` 属性不会从表列继承到表单元格，因为 CSS 继承遵从文档流，而表单元格位于行内部，但不在列内部。

`direction` 和 `unicode-bidi` 属性是唯二不受 `all` 简写属性影响的属性。

语法
--

```css
/\* 关键字值 \*/
direction: ltr;
direction: rtl;

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

### 取值

`ltr`

默认属性。可设置文本和其他元素的默认方向是从左到右。

`rtl`

可设置文本和其他元素的默认方向是从右到左。

要使 `direction` 属性在行级元素上生效，`unicode-bidi` 属性的值必须是 `embed` 或 `override`。

### 形式定义

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

### 形式语法
```

direction =
  ltr  |
  rtl

```

示例
--

### 设置从右往左的方向

在下面的例子中有两个文本字符串，都使用 `direction: rtl` 来显示。尽管这种设置可以正确显示阿拉伯文本，但中文内容却有一个标点符号在一个不寻常的位置。

```css
blockquote {
  direction: rtl;
  width: 300px;
}
```

```html
<blockquote>
  <p>这个段落用中文书写的，但是方向是从右到左，是错误的。</p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
</blockquote>
```

规范
--

| Specification |
| --- |
| CSS Writing Modes Level 4 # direction |

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

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

参见
--

* `unicode-bidi`
* `writing-mode`
* HTML 的 `dir` 全局属性


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

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

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

尝试一下
----

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

语法
--

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

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

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

### 取值

`<length-percentage>`

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

形式定义
----

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

形式语法
----
```

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

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

```

示例
--

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

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


CSS Positioning - CSS：层叠样式表

CSS Positioning
===============

**CSS Positioning** 是一个 CSS 模块，用来定义如何将元素在页面中进行绝对定位和相对定位。

参考
--

### CSS 属性

* `bottom`
* `clear`
* `display`
* `float`
* `left`
* `position`
* `right`
* `top`
* `visibility`
* `z-index`
向导
--

理解 CSS z-index

通过几个例子来展现上下文叠加的概念以及解释 z-ordering 是如何工作的。

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |


column-span - CSS：层叠样式表

column-span
===========

CSS 属性 **`column-span`** 的值被设置为 `all` 时，可以让一个元素跨越所有的列。

尝试一下
----

```css
/\* 关键字值 \*/
column-span: none;
column-span: all;

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

一个跨越多列的元素被称为**跨越元素**（spanning element）。

语法
--

`column-span` 属性可以被指定为下面列出的关键字值之一。

### 取值

`none`

元素不跨多个列。

`all`

元素横跨所有列。元素出现之前，出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的区块格式化上下文。

形式定义
----

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

形式语法
----
```

column-span =
  none  |
  all

```

示例
--

### 使标题跨越列

在该示例中，标题跨越了文章中的所有列。

#### HTML

```html
<article>
  <h2>这是一个跨越了所有的列的标题</h2>
  <p>h2 元素应该跨越所有列。文本的其余内容应该分布在各列中。</p>
  <p>这是一些使用 CSS `columns` 属性分成三列的文本。文本在各列中均匀分布。</p>
  <p>这是一些使用 CSS `columns` 属性分成三列的文本。文本在各列中均匀分布。</p>
  <p>这是一些使用 CSS `columns` 属性分成三列的文本。文本在各列中均匀分布。</p>
  <p>这是一些使用 CSS `columns` 属性分成三列的文本。文本在各列中均匀分布。</p>
</article>
```

#### CSS

```css
article {
  columns: 3;
}

h2 {
  column-span: all;
}
```

#### 结果

规范
--

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

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

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

参见
--

* 行级元素
* `HTMLSpanElement`


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

::before (:before)
==================

CSS 中，**`::before`** 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 `content` 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
```

/* Add a heart before links */
a::before {
  content: "♥";
}
```

**备注：** 由 `::before` 和`::after` 生成的伪元素包含在元素格式框内，因此不能应用在*替换元素上*，比如 `<img>` 或 `<br>` 元素。

语法
--
```

/* CSS3 语法 */
element::before { 样式 }

/*（单冒号）CSS2 过时语法 (仅用来支持 IE8) */
element:before  { 样式 }

/* 在每一个 p 元素前插入内容 */
p::before { content: "Hello world!"; }
```

CSS3 引入 `::before` 是为了将伪类和伪元素区别开来。浏览器也接受由 CSS 2 引入的 `:before` 写法。

示例
--

### 加入引用标记

使用 `::before` 伪元素的一个简单示例就是用于加入引号。此处同时使用了 `::before` 和 ``::after``来插入引用性文本。

#### HTML

```html
<q>一些引用</q>, 他说，<q>比没有好。</q>.
```

#### CSS

```css
q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}
```

#### 结果

### 修饰实例

我们可以用几乎任何方法定义 `content` 中的文字和图片样式。

#### HTML

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

#### CSS

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

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

#### 结果

### 待办列表

在本例中我们将使用伪元素来创建一个简单的待办列表。这个方法也可用于 UI 的小幅度更改和用户体验的提升。

#### HTML

```html
<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>
```

#### CSS

```css
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
```

#### JavaScript

```js
var list = document.querySelector("ul");
list.addEventListener(
  "click",
  function (ev) {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);
```

下面展示的是最终得到的结果。请注意我们没有使用任何图标，对勾标识实际上是使用 CSS 定义了样式的`::before`伪元素。接下来建立几个待办事项来完成它们吧。

#### 结果

注释
--

在 Firefox3.5 中，fixed 绝对定位的布局不被允许在元素前生成一个独立的元素（按照 CSS 规范，:after :before 伪类元素与其他盒模型元素是可以相互影响的，就像他们是真正的元素一样，不过是被插入到相关元素中罢了），他们可以被用来对非表格布局进行改善（例：实现元素在中心位置），只要置于中心的内容包含在元素中，那么内容的前后列不能够被添加前置或后置的兄弟元素。（i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty <div/> before and after）（记住，一定要给 float 元素添加 width 属性，否则它将不会浮动）

#### HTML

```html
<div class="example">
  <span id="floatme"
 >"Floated Before" should be generated on the left of the viewport and not
    allow overflow in this line to flow under it. Likewise should "Floated
    After" appear on the right of the viewport and not allow this line to flow
    under it.</span
 >
</div>
```

#### CSS

```css
#floatme {
  float: left;
  width: 50%;
}

/\* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) \*/
.example::before {
  content: "Floated Before";
  float: left;
  width: 25%;
}
.example::after {
  content: "Floated After";
  float: right;
  width: 25%;
}

/\* For styling \*/
.example::before,
.example::after {
  background: yellow;
  color: red;
}
```

#### 输出

规范
--

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

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

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

参见
--

* `::after`, `content`


:active - CSS：层叠样式表

:active
=======

CSS **`:active`** 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

```css
/\* Selects any <a> that is being activated \*/
a:active {
  color: red;
}
```

`:active` 伪类一般被用在 `<a>` 和 `<button>` 元素中。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的`<label>`标签被激活的表格元素。

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 `:link`，`:hover` 和 `:visited`。为保证样式生效，需要把 `:active` 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 *LVHA 顺序*：`:link` — `:visited` — `:hover` — `:active`。

**备注：** 在有多键鼠标的系统中，CSS 3 规定 `:active` 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。

语法
--
```

:active
```

示例
--

### 激活链接

#### HTML

```html
<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>
```

#### CSS

```css
a:link {
  /\* 未访问链接 \*/
  color: blue;
}
a:visited {
  /\* 已访问链接 \*/
  color: purple;
}
a:hover {
  /\* 用户鼠标悬停 \*/
  background: yellow;
}
a:active {
  /\* 激活链接 \*/
  color: red;
}

p:active {
  /\* 激活段落 \*/
  background: #eee;
}
```

#### 结果

### 激活表单元素

#### HTML

```html
<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
```

#### CSS

```css
form :active {
  color: red;
}

form button {
  background: white;
}
```

#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-active |
| Selectors Level 4 # the-active-pseudo |

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

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

参见
--

* 链接相关伪类：`:link`、`:visited` 和 `:hover`。


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

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

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

尝试一下
----

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

语法
--

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

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

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

### 取值

`<length-percentage>`

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

形式定义
----

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

形式语法
----
```

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

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

```

示例
--

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

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


top - CSS：层叠样式表

top
===

**`top`**样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。

```css
/\* <length> values \*/
top: 3px;
top: 2.4em;

/\* 参照于包含块高度的百分比 \*/
top: 10%;

/\* Keyword value \*/
top: auto;

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

`top`的效果取决于元素的`position`属性：

* 当`position`设置为`absolute`或`fixed`时，`top`属性指定了定位元素上外边距边界与其包含块上边界之间的偏移。
* 当`position`设置为`relative`时，`top`属性指定了元素的上边界离开其正常位置的偏移。
* 当`position`设置为`sticky`时，如果元素在 viewport 里面，`top`属性的效果和 position 为`relative`等同；如果元素在 viewport 外面，`top`属性的效果和 position 为`fixed`等同。
* 当`position`设置为`static`时，`top`属性无效。

当`top`和`bottom`同时指定时，并且 `height`没有被指定或者指定为`auto`的时候，`top`和`bottom` 都会生效，在其他情况下，如果 `height`被限制，则`top`属性会优先设置，`bottom`属性则会被忽略。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the height of the containing block |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length, percentage or calc(); |

语法
--

### 取值

`<length>`

可以是负的，正的 或者 null `<length>` 表示：

* 对于**绝对定位的元素**，元素下外边距边界与其包含块下边界之间的偏移。
* 对于**相对定位定位的元素**，元素的下边界离开其正常位置的偏移。

`<percentage>`

代表元素包含块的高度的百分比 `<percentage>`。

`auto`

这个关键字表示：

* 对于绝对定位元素，元素将忽略此属性已`bottom`属性为准，如果此时设置`height: auto`，将基于内容需要的高度设置高度；如果`bottom`也为`auto`的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。
* 对于相对定位元素，元素相对正常位置的偏移量将基于`bottom`属性；如果`bottom`也为`auto`的话，元素将不会有偏移。

`inherit`

这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 `<length>`， `<percentage>` 或 `auto` 一样。

示例
--

```css
body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}
```

```html
<div>The size of this content is determined by the position of its edges.</div>
```

规范
--

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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


exp() - CSS：层叠样式表

exp()
=====

CSS 函数 **`exp()`** 为指数型函数，以数值为参数，返回数学常数 `e` 的指定次方。

数学常数 e 为自然对数的底数，约为 `2.718281828459045`。

`exp(number)` 函数含有单个计算式，此式返回与 `pow(e, number)` 相同的值。

语法
--

```css
/\* <number> 值 \*/
width: calc(100px * exp(-1)); /\* 100px \* 0.367879441171442 = 36px \*/
width: calc(100px * exp(0)); /\* 100px \* 1 = 100px \*/
width: calc(100px * exp(1)); /\* 100px \* 2.718281828459045 = 217px \*/
```

### 参数

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

`number`

解析为 `<number>` 的计算式，表示 `e` 的幂次。

### 返回值

返回表示 enumber 的非负 `<number>`，为计算 `e` 的 `number` 次方的结果。

* 若 `number` 为 `-Infinity`，则结果为 `0`。
* 若 `number` 为 `0`，则结果为 `1`。
* 若 `number` 为 `1`，则结果为 `e`（即 `2.718281828459045`）。
* 若 `number` 为 `Infinity`，则结果为 `Infinity`。
### 形式语法
```

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

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

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

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

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

```

示例
--

### 旋转元素

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

#### HTML

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

#### CSS
```

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

```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(calc(1turn * exp(-1))); // 0.3678794411714423turn
}
div.box-2 {
  transform: rotate(calc(1turn * exp(-0.75))); // 0.4723665527410147turn
}
div.box-3 {
  transform: rotate(calc(1turn * exp(-0.5))); // 0.6065306597126334turn
}
div.box-4 {
  transform: rotate(calc(1turn * exp(-0.25))); // 0.7788007830714049turn
}
div.box-5 {
  transform: rotate(calc(1turn * exp(0))); // 1turn
}
```

#### 结果

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

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

#### HTML

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

#### CSS

```css
h1 {
  font-size: calc(1rem * exp(1.25)); // 3.4903429574618414rem
}
h2 {
  font-size: calc(1rem * exp(1)); // 2.718281828459045rem
}
h3 {
  font-size: calc(1rem * exp(0.75)); // 2.117000016612675rem
}
h4 {
  font-size: calc(1rem * exp(0.5)); // 1.6487212707001282rem
}
h5 {
  font-size: calc(1rem * exp(0.25)); // 1.2840254166877414rem
}
h6 {
  font-size: calc(1rem * exp(0)); // 1rem
}
```

#### 结果

规范
--

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

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

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

参见
--

* `pow()`
* `sqrt()`
* `hypot()`
* `log()`


inset-inline - CSS：层叠样式表

inset-inline
============

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

尝试一下
----

属性构成
----

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

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

```css
/\* 长度值 \*/
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /\* 应用于行首和行末 \*/

/\* 包含块的宽度或高度的百分比 \*/
inset-inline: 10% 5%;

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

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

### 取值

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `inset-inline-start`: `auto`
* `inset-inline-end`: `auto`
 |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | as each of the properties of the shorthand:* `inset-inline-start`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
* `inset-inline-end`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
 |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

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

```

示例
--

### 设置行首和行末偏移

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-inline: 20px 50px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

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

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

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

参见
--

* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* 对应的实体简写属性：`inset`
* 对应的块向简写属性：`inset-block`
* `writing-mode`、`direction`、`text-orientation`


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

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

CSS **`<length-percentage>`** 数据类型表示一个值，该值可以是 `<length>` 或 `<percentage>`。

语法
--

参考 `<length>` 和 `<percentage>` 的文档以具体了解该类型允许使用的语法。

形式语法
----
```

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

```

示例
--

### length-percentage 示例

以下简单示例描述了使用 `<length-percentage>` 值的一些属性。

#### HTML

```html
<p>你可以在很多地方使用百分比（percentage）和长度（length）值。</p>
```

#### CSS

```css
p {
  /\* length-percentage 示例 \*/
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /\* 长度值示例 \*/
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /\* 百分比值示例 \*/
  text-size-adjust: 20%;
}
```

#### 结果

在 calc() 中使用
------------

当 `<length-percentage>` 被指定为允许类型时，这意味着百分比解析为长度，因此可以在 `calc()` 表达式中使用。因此，`width` 可以接受以下所有值：

```css
width: 200px;
width: 20%;
width: calc(100% - 200px);
```

规范
--

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

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

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

参见
--

* `<percentage>`
* `<length>`
* CSS 值和单位


<url> - CSS：层叠样式表

<url>
=====

概述
--

CSS 数据类型 `<url>` 指向一个资源。它没有独有的表达形式，只能通过 `url()` 函数定义。

**备注：** **URI 和 URL?**

URI（统一资源标识符）与 URL（统一资源定位符）不同。URL 描述资源的位置，而 URI 描述资源的 id。URI 可以是一个资源的 URL（地址）、或 URN（统一资源名称）。

在 CSS Level 1 中，`url()` 函数被引入并用于描述 URL，即地址（虽然没有明确定义，但指一个 CSS 数据类型 `<url>`）

在 CSS Level 2 中，`url()` 函数被扩展为可以描述任何一个 URI，即 URL 或 URN。这一定义导致 `url()` 函数被用于创建一个 `<uri>` 数据类型。这一行为使人迷惑，且在 CSS 中几乎从不使用 URN。

为了解决这一问题，在 CSS Level 3 中恢复了它的初始定义， `url()` 函数被明确定义为指代 `<url>` CSS 数据类型，且 `<uri>` CSS 数据类型不再存在。

注意，这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。

许多 CSS 属性 将 URL 作为属性值，例如 `background-image`、`cursor`、`@font-face`、`list-style` 等。

url() 函数
--------

URL 可以使用单引号或双引号包含，也可以直接书写。可以在此函数中使用相对地址。相对地址相对于 CSS 样式表的 URL（而不是网页的 URL）。

语法
--
```

 <CSS 属性>:  url("http://mysite.example.com/mycursor.png")

 <CSS 属性>:  url(http://mysite.example.com/mycursor.png)
```

**备注：** 从 Firefox 15 开始，不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看 Firefox bug 752230。

示例
--

```css
.topbanner {
  background: url("topbanner.png") #00d no-repeat fixed;
}
```

```css
ul {
  list-style: square url(http://www.example.com/redball.png);
}
```

规范
--

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

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

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


:empty - CSS：层叠样式表

:empty
======

**`:empty`** CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和 CSS `content` 不会影响元素是否被认定为空。

尝试一下
----

**备注：** 在选择器 Level 4 中，`:empty` 伪类被更改为与 `:-moz-only-whitespace` 类似一样的行为，但目前还没有浏览器支持它。

语法
--

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

示例
--

### HTML

```html
<div class="box"><!-- 它将呈现为青柠色。 --></div>
<div class="box">我将会是粉色。</div>
<div class="box">
  <!-- 由于这个注释周围存在空格，所以它将在旧版本的浏览器中呈现为粉色。 -->
</div>
<div class="box">
  <p>
    <!-- 由于这个注释周围存在无法折叠的空格和元素，所以它将在所有浏览器中呈现为粉色。 -->
  </p>
</div>
```

### CSS
```

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

```css
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}
```

### 结果

无障碍考虑
-----

辅助技术（如屏幕阅读器）无法解析交互内容为空的情况。所有交互内容必须具有无障碍名称，这是通过为交互控件的父元素（如锚点、按钮等）提供文本值来创建的。无障碍名称将交互控件暴露给无障碍树，这是一个传达对辅助技术有用的信息的 API。

提供交互控件的无障碍名称的文本可以使用一些属性的组合进行隐藏，这些属性可以将其在视觉上从屏幕上移除，但可以被辅助技术解析。这通常用于仅依靠图标来传达目的的按钮。

* 什么是无障碍名称？ | The Paciello Group
* 隐藏内容以获得更好的辅助功能 | Go Make Things
* MDN 理解 WCAG，指南 2.4 解释 (en-US)
* 理解成功标准 2.4.4 | W3C 理解 WCAG 2.0
规范
--

| Specification |
| --- |
| Selectors Level 4 # the-empty-pseudo |

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

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

参见
--

* `:-moz-only-whitespace`
非标准
 是选择器 Level 4 更改的前缀实现。
* `:blank`
实验性


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

text-size-adjust
================

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

**`text-size-adjust`** CSS 控制将一些手机或平板设备上使用的文本溢出算法（text inflation algorithm）。其他类型的设备上的浏览器会忽略此属性。

因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。它们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的视口去布局网页，通常是 800 到 1000 像素。为了将视口上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。

因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。`text-size-adjust` 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。

语法
--

```css
/\* 关键字值 \*/
text-size-adjust: none;
text-size-adjust: auto;

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

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

`text-size-adjust` 属性的值为 `none`、`auto` 或 `<percentage>`。

### 属性值

`none`

禁用浏览器的文本溢出算法。

`auto`

启用浏览器的文本溢出算法。该值一般用于取消先前使用 CSS 设置的 `none`。

`<percentage>`

启用浏览器的文本溢出算法，并使用用一个百分数来确定文本放大程度。

### 形式定义

|  |  |
| --- | --- |
| 初始值 | `auto` for smartphone browsers supporting inflation, `none` in other cases (and then not modifiable). |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| Percentages | yes, refer to the corresponding size of the text font |
| 计算值 | as specified |
| Animation type | by computed value type |

### 形式语法
```

text-size-adjust =
  auto                |
  none                |
  <percentage [0,∞]>

```

规范
--

| Specification |
| --- |
| CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |

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

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

参见
--

* Apple 的文档
* Google Chrome 的行为描述
* Gecko 的行为描述，来自 L. David Baron


writing-mode - CSS：层叠样式表

writing-mode
============

**`writing-mode`** 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置该属性时，应在根元素上设置它（对于 HTML 文档，应该在 `html` 元素上设置）

尝试一下
----

此属性指定*块流动方向*，即块级容器堆叠的方向，以及行内内容在块级容器中的流动方向。因此，它也确定块级内容的顺序。

语法
--

```css
/\* 关键字值 \*/
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

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

将 `writing-mode` 属性指定为下面列出的值之一。水平流动方向也受文本的方向影响，从左到右（`ltr`，例如英语和大多数其他语言）或从右到左（`rtl`，例如希伯来语或阿拉伯语）。

### 值

`horizontal-tb`

对于左对齐（`ltr`）文本，内容从左到右水平流动。对于右对齐（`rtl`）文本，内容从右到左水平流动。下一水平行位于上一行下方。

`vertical-rl`

对于左对齐（`ltr`）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（`rtl`）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

`vertical-lr`

对于左对齐（`ltr`）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（`rtl`）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

`sideways-rl`
实验性

对于左对齐（`ltr`）文本，内容从下到上垂直流动。对于右对齐（`rtl`）文本，内容从上到下垂直流动。所有字形（即使是垂直文本中的字形）都朝向右侧。

`sideways-lr`
实验性

对于左对齐（`ltr`）文本，内容从上到下垂直流动。对于右对齐（`rtl`）文本，内容从下到上垂直流动。所有字形（即使是垂直文本中的字形）都朝向左侧。

`lr`
已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 `horizontal-tb`。

`lr-tb`
已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 `horizontal-tb`。

`rl`
已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 `horizontal-tb`。

`tb`
已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 `vertical-lr`。

`tb-rl`
已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 `vertical-rl`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `horizontal-tb` |
| 适用元素 | all elements except table row groups, table column groups, table rows, and table columns |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | Not animatable |

形式语法
----
```

writing-mode =
  horizontal-tb  |
  vertical-rl    |
  vertical-lr    |
  sideways-rl    |
  sideways-lr

```

示例
--

### 使用多种 writing mode

该示例展现了所有 writing-mode 语法，以及不同语言的展示情况。

#### HTML

以下 HTML 只是一个简单的 `<table>`，每个单元格展示了不同的 `writing-mode` 的文本。

```html
<table>
  <tr>
    <th>值</th>
    <th>竖排文本</th>
    <th>横排文本（从左到右）</th>
    <th>横排文本（从右到左）</th>
    <th>混合文本</th>
  </tr>
  <tr>
    <td>horizontal-tb</td>
    <td class="example Text1"><span>我家没有电脑。</span></td>
    <td class="example Text1"><span>Example text</span></td>
    <td class="example Text1"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text1"><span>1994 年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-lr</td>
    <td class="example Text2"><span>我家没有电脑。</span></td>
    <td class="example Text2"><span>Example text</span></td>
    <td class="example Text2"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text2"><span>1994 年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-rl</td>
    <td class="example Text3"><span>我家没有电脑。</span></td>
    <td class="example Text3"><span>Example text</span></td>
    <td class="example Text3"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text3"><span>1994 年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-lr</td>
    <td class="example Text4"><span>我家没有电脑。</span></td>
    <td class="example Text4"><span>Example text</span></td>
    <td class="example Text4"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text4"><span>1994 年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-rl</td>
    <td class="example Text5"><span>我家没有电脑。</span></td>
    <td class="example Text5"><span>Example text</span></td>
    <td class="example Text5"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text5"><span>1994 年に至っては</span></td>
  </tr>
</table>
```

#### CSS
```

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px black solid;
  padding: 3px;
}
th {
  background-color: lightgray;
}
.example {
  height: 75px;
  width: 75px;
}
```

调整内容方向的 CSS 代码是这样的：

```css
.example.Text1 span,
.example.Text1 {
  writing-mode: horizontal-tb;
}

.example.Text2 span,
.example.Text2 {
  writing-mode: vertical-lr;
}

.example.Text3 span,
.example.Text3 {
  writing-mode: vertical-rl;
}

.example.Text4 span,
.example.Text4 {
  writing-mode: sideways-lr;
}

.example.Text5 span,
.example.Text5 {
  writing-mode: sideways-rl;
}
```

#### 结果

以下图片为不完整支持 `writing-mode` 的浏览器提供了应当看到的输出：

![A 6 rows by 5 columns table showing the various directional flow of text and number adjusted using the vertical-lr or rl, horizontal-lr or rl, sideways-lr or rl horizontal-tb CSS properties. The flow is applied to different languages](/zh-CN/docs/Web/CSS/writing-mode/screenshot_2020-02-05_21-04-30.png)

规范
--

| Specification |
| --- |
| CSS Writing Modes Level 4 # block-flow |

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

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

参见
--

* SVG `writing-mode` (en-US) 属性
* `direction`
* `unicode-bidi`
* `text-orientation`
* `text-combine-upright` (en-US)
* CSS 逻辑属性
* 为竖排文本（中文、日语、韩语和蒙古语）赋予样式
* 浏览器支持测试结果：https://w3c.github.io/i18n-tests/results/writing-mode-vertical


word-spacing - CSS：层叠样式表

word-spacing
============

CSS 属性 **`word-spacing`** 设置标签、单词之间的空格长度。

尝试一下
----

语法
--

```css
word-spacing: normal; /\* Keyword value \*/
word-spacing: 3px; /\* <length> values \*/
word-spacing: 0.3em;

word-spacing: inherit;
```

### Values

`normal`

正常的单词间距，由当前字体和/或浏览器定义。

`<length>`

通过指定具体的额外间距来增加字体的单词间距。查看 `<length>` 了解可用单位。

`<percentage>`

通过指定受影响字符的宽度的百分比的方式来增加的间距。

示例
--

### HTML

```html
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>
```

### CSS

```css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}
```

无障碍考虑
-----

过大的正或负的 `word-spacing` 将使应用样式的句子不可读。对于应用了非常大正值样式的文本，单词将相距非常远，甚至不再显示为句子。对于使用非常大负值样式的文本，单词将相互重叠，甚至每个单词的开头和结尾都无法识别。

必须根据具体情况确定合适的 `word-spacing` 值，因为不同的字体具有不同的字符宽度。没有一个值可以确保所有字体系列都自动保持其易读性。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| Percentages | refer to the width of the affected glyph |
| 计算值 | absolute `length` |
| Animation type | a length |

形式语法
----
```

word-spacing =
  normal    |
  <length>

```

规范
--

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

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

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

参见
--

* `letter-spacing`


text-align - CSS：层叠样式表

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

`text-align` CSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 `vertical-align` 类似，但是是水平方向的。

尝试一下
----

语法
--

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

/\* 在表格列内基于字符的对齐 \*/
text-align: ".";
text-align: "." center;

/\* 块对齐值（非标准语法） \*/
text-align: -moz-center;
text-align: -webkit-center;

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

`text-align` 属性可以按照以下方式之一来指定：

* 使用关键字值 `start`、`end`、`left`、`right`、`center`、`justify`、`justify-all` 或 `match-parent`。
* 仅使用单个 `<string>` 值，此时另外一个值默认为 `right`。
* 同时使用关键字值和 `<string>` 值。
### 值

`start`

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

`end`

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

`left`

行内内容向左侧边对齐。

`right`

行内内容向右侧边对齐。

`center`

行内内容居中。

`justify`

文字向两侧对齐，对最后一行无效。

`justify-all`
实验性

和 `justify` 一致，但是强制使最后一行两端对齐。

`match-parent`

和 `inherit` 类似，区别在于 `start` 和 `end` 的值根据父元素的 `direction` 确定，并被替换为恰当的 `left` 或 `right` 值。

`<string>`
实验性

应用在单元格时，指定单元格内容相对于哪个字符对齐。

无障碍考虑
-----

对于有阅读障碍等认知问题的人来说，对齐的文本产生的单词之间的间距不一致可能会出现问题。

* MDN 了解 WCAG，准则 1.4 解释 (en-US)
* 理解成功标准 1.4.8 | 了解 WCAG 2.0
形式定义
----

|  |  |
| --- | --- |
| 初始值 | `start`, or a nameless value that acts as `left` if `direction` is `ltr`, `right` if `direction` is `rtl` if `start` is not supported by the browser. |
| 适用元素 | block containers |
| 是否是继承属性 | yes |
| 计算值 | as specified, except for the `match-parent` value which is calculated against its parent's `direction` value and results in a computed value of either `left` or `right` |
| Animation type | discrete |

形式语法
----
```

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

```

示例
--

### 开始处对齐

#### HTML

```html
<p class="example">
  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

```css
.example {
  text-align: start;
  border: solid;
}
```

#### 结果

### 文本居中

#### HTML

```html
<p class="example">
  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

```css
.example {
  text-align: center;
  border: solid;
}
```

#### 结果

### 使用“justify”的示例

#### HTML

```html
<p class="example">
  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

```css
.example {
  text-align: justify;
  border: solid;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # text-align |
| CSS Text Module Level 3 # text-align-property |

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

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

参见
--

* `margin:auto`、`margin-left:auto`、`vertical-align`


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

scroll-padding-bottom
=====================

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

尝试一下
----

语法
--

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

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

/\* 全局值 \*/
scroll-padding-bottom: inherit;
scroll-padding-bottom: initial;
scroll-padding-bottom: revert;
scroll-padding-bottom: revert-layer;
scroll-padding-bottom: 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-bottom =
  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 滚动吸附明确控制滚动


column-count - CSS：层叠样式表

column-count
============

**column-count** CSS 属性，描述元素的列数。
```

column-count: 3;
column-count: auto;

column-count: inherit;
column-count: initial;
column-count: unset;
```

语法
--

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | Block containers except table wrapper boxes |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | an integer |

### 取值

`auto`

用来表示列的数量由其他 CSS 属性指定，例如 `column-width` (en-US).

`<number>`

是个严格的正数 `<integer>` ，用来描述元素内容被划分的理想列数。假如 `column-width` (en-US)也被设置为非零值，此参数仅表示所允许的最大列数。

例子
--

```css
.content-box {
  border: 10px solid #000000;
  column-count: 3;
}
```

规范
--

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

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

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


CSS 参考 - CSS：层叠样式表

CSS 参考
======

使用此 **CSS 参考**页面以浏览按字母索引的所有标准 CSS 属性、伪类、伪元素、数据类型、功能表记以及@ 规则。你也可以浏览CSS 关键概念和按类型排列的 CSS 选择器列表。还有一份简短的 DOM-CSS / CSSOM 参考。

基本规则语法
------

### 样式规则语法

```css
style-rule ::=
 selectors-list {
      properties-list
    }
```

其中：

```css
selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]
```

参阅后面的*选择器*、*伪元素*、*伪类*列表。每个指定*值*的语法取决于为每个指定*属性*定义的数据类型。

#### 样式规则示例

```css
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}
```

有关 CSS 选择器语法的初学者介绍，请参阅 CSS 选择器教程。注意，规则定义中的任何 CSS 语法错误都将使整个规则无效，无效的规则将被浏览器忽略。注意 CSS 定义完全是基于（ASCII）文本的，而 DOM-CSS / CSSOM（规则管理系统）是基于对象的。

### @规则语法

由于 @规则间的结构变化很大，请参阅 @规则以找到你所想要的特定规则语法。

索引
--

**备注：** 此索引中的属性名称**不包括**与 CSS 标准名称不同的 JavaScript 名称。

### -

* `--*`
* `-webkit-line-clamp`

### A

* `abs()` (en-US)
* `accent-color`
* `acos()`
* `:active`
* `additive-symbols (@counter-style)`
* `::after (:after)`
* `align-content`
* `align-items`
* `align-self`
* `align-tracks` (en-US)
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>`
* `animation`
* `animation-composition` (en-US)
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-range` (en-US)
* `animation-range-end` (en-US)
* `animation-range-start` (en-US)
* `animation-timeline` (en-US)
* `animation-timing-function`
* `@annotation`
* `:any-link`
* `appearance`
* `ascent-override (@font-face)` (en-US)
* `asin()`
* `aspect-ratio`
* `atan()`
* `atan2()`
* `attr()`

### B

* `::backdrop`
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `base-palette (@font-palette-values)` (en-US)
* `<basic-shape>`
* `::before (:before)`
* `:blank`
* `bleed (@page)`
* `<blend-mode>`
* `block-size`
* `blur()`
* `border`
* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-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-end-end-radius`
* `border-end-start-radius`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-spacing`
* `border-start-end-radius`
* `border-start-start-radius`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `bottom`
* `@bottom-center`
* `box-decoration-break`
* `box-shadow`
* `box-sizing`
* `break-after`
* `break-before` (en-US)
* `break-inside`
* `brightness()`

### C

* `calc()`
* `caption-side`
* `caret`
* `caret-color`
* `caret-shape`
* `@character-variant`
* `@charset`
* `:checked`
* `circle()`
* `clamp()`
* `clear`
* `clip`
* `clip-path`
* `<color>`
* `color`
* `color-scheme`
* `column-count`
* `column-fill` (en-US)
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width` (en-US)
* `columns`
* `conic-gradient()` (en-US)
* `contain`
* `contain-intrinsic-block-size`
* `contain-intrinsic-height`
* `contain-intrinsic-inline-size`
* `contain-intrinsic-size`
* `contain-intrinsic-width`
* `container` (en-US)
* `container-name` (en-US)
* `container-type` (en-US)
* `content`
* `content-visibility`
* `contrast()`
* `cos()`
* `<counter>`
* `counter-increment`
* `counter-reset`
* `counter-set`
* `@counter-style`
* `counters()`
* `cross-fade()` (en-US)
* `cubic-bezier()` (en-US)
* `::cue`
* `::cue-region` (en-US)
* `:current` (en-US)
* `cursor`
* `<custom-ident>`
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>` (en-US)
* `:default`
* `:defined`
* `descent-override (@font-face)` (en-US)
* `<dimension>`
* `:dir`
* `direction`
* `:disabled`
* `display`
* `<display-box>`
* `<display-inside>` (en-US)
* `<display-internal>`
* `<display-legacy>`
* `<display-listitem>` (en-US)
* `<display-outside>`
* `drop-shadow()`
* `resolution#dpcm`
* `resolution#dpi`
* `resolution#dppx`

### E

* `<easing-function>`
* `element()`
* `ellipse()`
* `:empty`
* `empty-cells`
* `:enabled`
* `env()`
* `exp()`
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)` (en-US)
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `:first-of-type`
* `fit-content()`
* `<flex>`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr`
* `float`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family`
* `font-family (@font-face)`
* `font-family (@font-palette-values)` (en-US)
* `font-feature-settings`
* `font-feature-settings (@font-face)` (en-US)
* `@font-feature-values`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing` (en-US)
* `font-palette`
* `@font-palette-values` (en-US)
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-stretch (@font-face)` (en-US)
* `font-style`
* `font-style (@font-face)`
* `font-synthesis`
* `font-synthesis-position` (en-US)
* `font-synthesis-small-caps` (en-US)
* `font-synthesis-style` (en-US)
* `font-synthesis-weight` (en-US)
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian` (en-US)
* `font-variant-emoji` (en-US)
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-variation-settings (@font-face)` (en-US)
* `font-weight`
* `font-weight (@font-face)` (en-US)
* `forced-color-adjust` (en-US)
* `format()`
* `<frequency>`
* `<frequency-percentage>` (en-US)
* `:fullscreen`
* `:future` (en-US)

### G

* `angle#grad`
* `gap`
* `<gradient>`
* `::grammar-error`
* `grayscale()`
* `grid`
* `grid-area`
* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-column`
* `grid-column-end` (en-US)
* `grid-column-start` (en-US)
* `grid-row`
* `grid-row-end` (en-US)
* `grid-row-start` (en-US)
* `grid-template`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`

### H

* `frequency#Hz`
* `hanging-punctuation`
* `:has`
* `height`
* `@historical-forms`
* `:host()`
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()` (en-US)
* `hwb()`
* `hyphenate-character` (en-US)
* `hyphenate-limit-chars` (en-US)
* `hyphens`
* `hypot()`

### I

* `<ident>` (en-US)
* `<image>`
* `image()`
* `image-orientation`
* `image-rendering`
* `image-resolution` (en-US)
* `image-set()` (en-US)
* `@import`
* `:in-range`
* `:indeterminate`
* `inherit`
* `inherits (@property)`
* `initial`
* `initial-letter` (en-US)
* `initial-letter-align` (en-US)
* `initial-value (@property)`
* `inline-size`
* `input-security`
* `inset`
* `inset()`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
* `<integer>`
* `:invalid`
* `invert()` (en-US)
* `:is`
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items`
* `justify-self`
* `justify-tracks` (en-US)

### K

* `frequency#kHz`
* `@keyframes`

### L

* `lab()`
* `:lang`
* `:last-child`
* `:last-of-type`
* `@layer`
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left`
* `left`
* `@left-bottom`
* `<length>`
* `<length-percentage>`
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)` (en-US)
* `line-height`
* `line-height-step` (en-US)
* `<line-style>` (en-US)
* `linear-gradient()` (en-US)
* `:link`
* `list-style`
* `list-style-image`
* `list-style-position`
* `list-style-type`
* `local()`
* `:local-link` (en-US)
* `log()`

### M

* `length#mm`
* `margin`
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-bottom`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim` (en-US)
* `::marker`
* `marks (@page)`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset` (en-US)
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source` (en-US)
* `mask-border-width`
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image`
* `mask-mode`
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat`
* `mask-size` (en-US)
* `mask-type` (en-US)
* `masonry-auto-flow` (en-US)
* `math-depth` (en-US)
* `math-shift` (en-US)
* `math-style` (en-US)
* `matrix()`
* `matrix3d()`
* `max()`
* `max-block-size` (en-US)
* `max-height`
* `max-inline-size`
* `max-lines`
* `max-width`
* `@media`
* `min()`
* `min-block-size`
* `min-height`
* `min-inline-size`
* `min-width`
* `minmax()`
* `mix-blend-mode`
* `mod()` (en-US)
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)` (en-US)
* `:not`
* `:nth-child`
* `:nth-last-child`
* `:nth-last-of-type`
* `:nth-of-type`
* `<number>`

### O

* `object-fit`
* `object-position`
* `offset`
* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)
* `:only-child`
* `:only-of-type`
* `opacity`
* `opacity()`
* `:optional`
* `order`
* `@ornaments`
* `orphans` (en-US)
* `:out-of-range`
* `outline`
* `outline-color`
* `outline-offset`
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor`
* `overflow-block`
* `overflow-clip-margin` (en-US)
* `overflow-inline`
* `overflow-wrap`
* `overflow-x`
* `overflow-y`
* `overlay` (en-US)
* `override-colors (@font-palette-values)` (en-US)
* `overscroll-behavior`
* `overscroll-behavior-block` (en-US)
* `overscroll-behavior-inline` (en-US)
* `overscroll-behavior-x`
* `overscroll-behavior-y`

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)`
* `padding`
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-bottom`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
* `padding-left`
* `padding-right`
* `padding-top`
* `@page`
* `page` (en-US)
* `page-break-after`
* `page-break-before` (en-US)
* `page-break-inside` (en-US)
* `page-orientation (@page)` (en-US)
* `paint()` (en-US)
* `paint-order`
* `::part`
* `:past` (en-US)
* `path()` (en-US)
* `:paused`
* `<percentage>`
* `perspective`
* `perspective()`
* `perspective-origin`
* `:picture-in-picture`
* `place-content`
* `place-items`
* `place-self` (en-US)
* `::placeholder`
* `:placeholder-shown`
* `:playing`
* `pointer-events`
* `polygon()`
* `<position>`
* `position`
* `pow()`
* `prefix (@counter-style)` (en-US)
* `print-color-adjust` (en-US)
* `@property`

### Q

* `length#Q`
* `quotes`

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()` (en-US)
* `range (@counter-style)` (en-US)
* `<ratio>`
* `ray()` (en-US)
* `:read-only`
* `:read-write`
* `rect()` (en-US)
* `rem()` (en-US)
* `repeat()`
* `repeating-conic-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `:required`
* `resize`
* `<resolution>`
* `reversed()`
* `revert` (en-US)
* `rgb()`
* `rgba()`
* `:right`
* `right`
* `@right-bottom`
* `:root`
* `rotate`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `round()` (en-US)
* `row-gap`
* `ruby-align` (en-US)
* `ruby-merge`
* `ruby-position` (en-US)

### S

* `saturate()` (en-US)
* `scale`
* `scale()`
* `scale3d()` (en-US)
* `scaleX()`
* `scaleY()` (en-US)
* `scaleZ()` (en-US)
* `:scope`
* `@scope` (en-US)
* `scroll()` (en-US)
* `scroll-behavior`
* `scroll-margin`
* `scroll-margin-block`
* `scroll-margin-block-end`
* `scroll-margin-block-start`
* `scroll-margin-bottom`
* `scroll-margin-inline`
* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
* `scroll-padding`
* `scroll-padding-block`
* `scroll-padding-block-end`
* `scroll-padding-block-start`
* `scroll-padding-bottom`
* `scroll-padding-inline`
* `scroll-padding-inline-end`
* `scroll-padding-inline-start`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
* `scroll-snap-align`
* `scroll-snap-stop`
* `scroll-snap-type`
* `scroll-timeline` (en-US)
* `scroll-timeline-axis` (en-US)
* `scroll-timeline-name` (en-US)
* `scrollbar-color`
* `scrollbar-gutter` (en-US)
* `scrollbar-width`
* `::selection`
* `selector()`
* `sepia()` (en-US)
* `<shape>` (en-US)
* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
* `sign()` (en-US)
* `sin()`
* `size (@page)` (en-US)
* `size-adjust (@font-face)` (en-US)
* `skew()`
* `skewX()`
* `skewY()`
* `::slotted`
* `speak-as (@counter-style)`
* `::spelling-error`
* `sqrt()`
* `src (@font-face)`
* `@starting-style` (en-US)
* `steps()` (en-US)
* `<string>`
* `@styleset`
* `@stylistic`
* `suffix (@counter-style)` (en-US)
* `@supports`
* `supports() (@import)`
* `@swash`
* `symbols (@counter-style)` (en-US)
* `symbols()` (en-US)
* `syntax (@property)`
* `system (@counter-style)` (en-US)
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout`
* `tan()`
* `:target`
* `target-counter()`
* `target-counters()`
* `::target-text`
* `target-text()`
* `:target-within` (en-US)
* `text-align`
* `text-align-last`
* `text-combine-upright` (en-US)
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-skip`
* `text-decoration-skip-ink` (en-US)
* `text-decoration-style`
* `text-decoration-thickness`
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent`
* `text-justify`
* `text-orientation`
* `text-overflow`
* `text-rendering`
* `text-shadow`
* `text-size-adjust`
* `text-transform`
* `text-underline-offset`
* `text-underline-position`
* `text-wrap` (en-US)
* `<time>`
* `<time-percentage>`
* `timeline-scope` (en-US)
* `top`
* `@top-center`
* `touch-action`
* `transform`
* `transform-box`
* `<transform-function>`
* `transform-origin`
* `transform-style`
* `transition`
* `transition-behavior` (en-US)
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
* `translate`
* `translate()`
* `translate3d()`
* `translateX()`
* `translateY()`
* `translateZ()` (en-US)
* `type()`

### U

* `unicode-bidi`
* `unicode-range (@font-face)` (en-US)
* `unset`
* `<url>`
* `url()`
* `:user-invalid` (en-US)
* `user-select`
* `:user-valid` (en-US)

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid`
* `var()`
* `vertical-align`
* `view()`
* `view-timeline` (en-US)
* `view-timeline-axis` (en-US)
* `view-timeline-inset` (en-US)
* `view-timeline-name` (en-US)
* `::view-transition`
* `::view-transition-group`
* `::view-transition-image-pair`
* `view-transition-name`
* `::view-transition-new`
* `::view-transition-old`
* `visibility`
* `:visited`

### W

* `:where`
* `white-space`
* `white-space-collapse` (en-US)
* `widows`
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap`
* `writing-mode`

### X

* `resolution#x`

### Z

* `z-index`

### Others

* `--*`

选择器
---

以下是一些选择器的列表，它们允许根据 DOM 内元素的各种特征对样式进行条件限制。

### 基本选择器

基本选择器是选择器中最初级的，通常由它们的组合构成其他更复杂的选择器。

* 通配选择器 `*`
* 元素选择器 `elementname`（元素名称）
* 类选择器 `.classname`（类名）
* ID 选择器 `#idname`（ID 名）
* 属性选择器 `[attr=value]`（属性=值）
### 分组选择器

选择器列表 `A, B`

指定同时选择 `A` 和 `B` 元素。这是一种选择多个匹配元素的分组方法。

### 组合选择器

组合选择器是在两个或多个简单选择器之间建立关系的选择器，例如“`A` 是 `B` 的子代”或“`A` 与 `B` 相邻”，它们构成了比较复杂的选择器。

接续兄弟选择器 `A + B`

指定 `A` 和 `B` 选择的元素具有相同的父元素，并且 `B` 选择的元素在水平方向上紧随 `A` 选择的元素。

后续兄弟选择器 `A ~ B`

指定由 `A` 和 `B` 选择的元素共享相同的父元素，并指定 `A` 选择的元素在 `B` 选择的元素之前（但不一定紧接在 `B` 之前）。

子选择器 `A > B`

指定 `B` 选择的元素是 `A` 选择的元素的直接子元素。

后代选择器 `A B`

指定 `B` 选择的元素是 `A` 选择的元素的后代，但不一定是直接子代。

列选择器 `A || B`
实验性

指定 `B` 选择的元素在 `A` 指定的表格列中，跨越多列的元素被认为是所有这些列的成员。

### 伪类

伪类 `:`

指定了所选择元素特定的状态。

伪元素 `::`

代表不包含在 HTML 中的实体。

参见标准 4 定义的选择器列表。

概念
--

### 语法和语义

* CSS 语法
* @ 规则
* 层叠
* 注释
* 解释器
* 继承
* 简写属性
* 优先级
* 值定义语法
* CSS 单位与取值类型
* CSS 函数表记
### 值

* 实际值
* 计算值
* 初始值
* 解析值
* 指定值
* 使用值
### 布局

* 块级格式化上下文
* 盒模型
* 包含块
* 布局模式
* 外边距合并
* 替换元素
* 层叠上下文
* 视觉格式化模型
DOM-CSS / CSSOM
---------------

### 主要对象类型

* `DocumentOrShadowRoot.styleSheets`
* `styleSheets[i].cssRules`
* `cssRules[i].cssText` （选择器 & 样式）
* `cssRules[i].selectorText`
* `HTMLElement.style`
* `HTMLElement.style.cssText (en-US)`（仅样式）
* `Element.className`
* `Element.classList`
### 重要方法

* `CSSStyleSheet.insertRule()`
* `CSSStyleSheet.deleteRule()`
参见
--

* Mozilla CSS 扩展 (en-US)（以 `-moz` 前缀）
* WebKit CSS 扩展（大多数时候以 `-webkit` 前缀）
* Microsoft CSS 扩展（以 `-ms` 前缀）
外部链接
----

* CSS 索引（w3.org）


<basic-shape> - CSS：层叠样式表

<basic-shape>
=============

**`<basic-shape>`** 是一种表现基础图形的 CSS 数据类型，作用于`clip-path` 与 `shape-outside` 属性中。

尝试一下
----

语法
--

\*\*`<basic-shape>`\*\*数据类型可以由下列函数得到。

当构建一个图形时，运用了 **`<basic-shape>`** 值的属性就会定义一个相关的盒模型。基础图形使用的坐标系统即设置相关的盒模型左上角顶点为原点，该坐标轴的 x 轴正方向为右、y 轴的正方向为下。所有以百分比定义的长度将通过相关盒模型与使用的维度重定义。

### 图形函数

以下为当前支持的图形。所有<basic-shape>值都由函数表达式定义，并且遵循属性值定义语法（value definition syntax）。

`inset()` (en-US)

定义了一个插进的长方形。

```css
inset( <shape-arg>{1,4} [round <border-radius>]? )
```

上式的前四个参数分别代表了插进的长方形与相关盒模型的上，右，下与左边界和顶点的偏移量。这些参数遵循边际速记语法（the syntax of the margin shorthand），所以给予一个、两个、或四个值都能设置四个偏移量。

可选参数<border-radius>用于定义插进长方形顶点的圆弧角度，该参数同上遵循边际速记语法（the syntax of the margin shorthand），给予一个、两个、或四个值都能设置四个偏移量。

如果一对插进图形在通过堆叠产生的高于当前使用维度的维度中（例如，左右插进图像相叠 75%）将会定义一个包围不了任何区域的图形。这种情况会在元素中产生一个空白且平坦的区域。

`circle()` (en-US)

使用一个半径和一个位置定义一个圆形。

```css
circle( [<shape-radius>]? [at <position>]? )
```

`<shape-radius>` 参数代表了 *r，* 即圆形的半径，不接受负数作为该参数的值。一个以百分比表示的值将以公式 `sqrt(width^2+height^2)/sqrt(2)`计算，其中 width 与 height 为相关盒模型的宽与高。

`<position>` 参数定义了圆心的位置。省缺值为盒模型的中心。

`ellipse()` (en-US)

使用两个半径和一个位置定义一个椭圆。

```css
ellipse( [<shape-radius>{2}]? [at <position>]? )
```

`<shape-radius>` 参数代表了 rx 与 ry，其中 rx 代表了 x 轴方向的半径，ry 代表了 y 轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照，宽作为 rx 的参照值，高作为 ry 的参照值。

<position>参数定义了椭圆形圆心的位子。其省缺值为盒模型的中心。

`polygon()` (en-US)

使用一个 SVG `fill-rule` 和一组顶点定义一个多边形，

```css
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
```

`<fill-rule>` 代表了填充规则（ filling rule ），即，如何填充该多边形。可选值为 nonzero 和 evenodd。该参数的省缺值为 nonzero。

每一对在列表中的参数都代表了多边形顶点的坐标，*xi* 与 *yi*，i 代表顶点的编号，即，第 i 个顶点。

`path()` (en-US)

使用一个 SVG `fill-rule` 和 SVG 路径定义来定义一个形状。

```css
path( [<fill-rule>,]? <string>)
```

可选的 `<fill-rule>` 表示 `fill-rule` 填充规则。可选 `nonzero`（非零环绕规则）和 `evenodd`（奇偶规则）。如果省略，则默认是 `nonzero`。

参数 <string> 是用引号包含的 SVG Path (en-US) 字符串

上文未曾解释的参数如下：

```css
<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
```

为一个圆形或椭圆形定义一个半径。其省缺值为 `closest-side`。

`closest-side` 即图形中心到盒模型最近一条边之间的距离。对于圆形，该值在任意维度都表示最近的一条边。对于椭圆形，该值为半径维度最近的一条边。

`farthest-side` 取图形中心到盒模型最远一条边之间的距离作为值。对于圆形，该值在任意维度都是最远的一条边。对于椭圆形，该值为半径维度最远的一条边。

基础图形的计算值
--------

在 `<basic-shape>` 函数中的值通过指定的方式计算，但是有下列情况会出现错误：

* 遗漏值（omitted values）参与到了省缺值的计算中。
* 在 `circle()` 或 `ellipse()` 函数中的`<position>`值被作为一对（水平的或垂直的）从左上原点的偏移值，每一次这样的计算将会给出绝对长度与百分比的结合。
* 一个在 `inset()`中的 `<border-radius>` 值，往往被当作一个扩展列表来计算，所有八个 `<length>`值或百分比代表的值都是如此。
基础图形的插值
-------

`<basic-shape>` 值之间的动画变化将会遵循以下规则。图形函数的值会被放进一个插入的简易列表中。这些列表中的值将会尽可能地被当作 `<length>`、`<percentage>`、或 `calc()` 类型插入.。如果列表中的值不为上述三种类型中的一种，然而却是相同的（比如 `nonzero` 类型的值在多个列表的相同位置出现)，那么这些值将不会被作为插值。

* 一对的图形需要使用一样的盒模型。
* 如果一对图形是同一种类型，例如， `ellipse()` 或 `circle()`，并且没有任何半径使用了 `closest-side` 或 `farthest-side` 关键值，那么这些值将会成为相应的图形函数的插值。
* 如果一对图形都属于 `inset()`类，那么这些值将会成为相应的图形函数的插值。
* 如果一对图形都属于 `polygon()`类，并且两者有同样数量的顶点，并且使用了相同的填充规则 `<fill-rule>`，那么这些值将会成为相应的图形函数的插值。
* 其余状况将不会出现插值。
示例
--

### 动画多边形

#### HTML

```html
<div></div>
```

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(
      50% 0%,
      60% 40%,
      100% 50%,
      60% 60%,
      50% 100%,
      40% 60%,
      0% 50%,
      40% 40%
    );
  }

  to {
    clip-path: polygon(
      50% 30%,
      100% 0%,
      70% 50%,
      100% 100%,
      50% 70%,
      0% 100%,
      30% 50%,
      0% 0%
    );
  }
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Shapes Module Level 1 # basic-shape-functions |

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

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

See also
--------

* Properties that use this data type: `clip-path`, `shape-outside`
* Edit Shape Paths in CSS — Firefox Developer Tools (en-US)


background-repeat - CSS：层叠样式表

background-repeat
=================

**`background-repeat`** CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

尝试一下
----

默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 `round`) 或者均匀地分布 (使用 `space`).

语法
--

```css
/\* 单值语法 \*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/\* 双值语法：水平 horizontal | 垂直 vertical \*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;
```

### 值

`<repeat-style>`

单值语法是完整的双值语法的简写：

| **单值** | **等价于双值** |
| --- | --- |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

在双值语法中，第一个值表示水平重复行为，第二个值表示垂直重复行为。下面是关于每一个值是怎么工作的具体说明：

| 值 | 描述 |
| --- | --- |
| `repeat` | 图像会按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪，如果它的大小不合适的话。 |
| `space` | 图像会尽可能得重复，但是不会裁剪。第一个和最后一个图像会被固定在元素 (element) 的相应的边上，同时空白会均匀地分布在图像之间。`background-position`属性会被忽视，除非只有一个图像能被无裁剪地显示。只在一种情况下裁剪会发生，那就是图像太大了以至于没有足够的空间来完整显示一个图像。 |
| `round` | 随着允许的空间在尺寸上的增长，被重复的图像将会伸展 (没有空隙), 直到有足够的空间来添加一个图像。当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间。例如，一个图像原始大小是 260px, 重复三次之后，可能会被伸展到 300px, 直到另一个图像被加进来。这样他们就可能被压缩到 225px.译者注：关键是浏览器怎么计算什么时候应该添加一个图像进来，而不是继续伸展。 |
| `no-repeat` | 图像不会被重复 (因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由`background-position`属性来决定。 |

### 标准语法
```

background-repeat =
  <repeat-style>#

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

```

例子
--

### HTML

```html
<ol>
  <li>
    no-repeat
    <div class="one"> </div>
  </li>
  <li>
    repeat
    <div class="two"> </div>
  </li>
  <li>
    repeat-x
    <div class="three"> </div>
  </li>
  <li>
    repeat-y
    <div class="four"> </div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="five"> </div>
  </li>
</ol>
```

### CSS

```css
/\* Shared for all DIVS in example \*/
li {
  margin-bottom: 12px;
}
div {
  background-image: url(starsolid.gif);
  width: 144px;
  height: 84px;
}

/\* 因为 space 和 round 当前没有被广泛支持的，所以没有添加\*/
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}

/\* Multiple images \*/
.five {
  background-image: url(starsolid.gif), url(favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}
```

### 结果

在这个例子中，每一个列表项都使用了不同的`background-repeat` 语法。

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-repeat |

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

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


text-decoration - CSS：层叠样式表

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

**`text-decoration`** 简写 CSS 属性设置文本上的装饰性线条的外观。它是 `text-decoration-line`、`text-decoration-color`、`text-decoration-style` 和较新的 `text-decoration-thickness` 属性的缩写。

尝试一下
----

文本装饰会覆盖子孙文本元素。这意味着如果一个元素指定了文本装饰，那么子元素无法去除这个装饰。例如，在标记 `<p>This text has <em>some emphasized words</em> in it.</p>` 中，样式规则 `p { text-decoration: underline; }` 会导致整个段落被下划线划掉。样式规则 `em { text-decoration: none; }` 不会有任何变化；整个段落仍然会被下划线划掉。但是，规则 `em { text-decoration: overline; }` 会导致“some emphasized words”上出现第二个装饰。

复合属性
----

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

* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
语法
--

```css
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

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

`text-decoration` 属性由一个或多个用空格分隔的值组成，表示各种普通文本装饰属性。

### 取值

`text-decoration-line`

设置使用的装饰类型，例如 `underline` 或者 `line-through`。

`text-decoration-color`

设置装饰的颜色。

`text-decoration-style`

设置装饰的线条的颜色，例如 `solid`、`wavy` 或者 `dashed`。

`text-decoration-thickness`

设置用于装饰的线条粗细。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `text-decoration-color`: `currentcolor`
* `text-decoration-style`: `solid`
* `text-decoration-line`: `none`
 |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `text-decoration-line`: as specified
* `text-decoration-style`: as specified
* `text-decoration-color`: computed color
* `text-decoration-thickness`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `text-decoration-color`: a color
* `text-decoration-style`: discrete
* `text-decoration-line`: discrete
* `text-decoration-thickness`: by computed value type
 |

形式语法
----
```

text-decoration =
  <'text-decoration-line'>   ||
  <'text-decoration-style'>  ||
  <'text-decoration-color'>

```

示例
--

### 文本装饰值的演示

```css
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}
```

```html
<p class="under">此文本下方有一行线。</p>
<p class="over">此文本上面有一行线。</p>
<p class="line">此文本有一条线穿过它。</p>
<p>
  此<a class="plain" href="#">链接不会具有下划线</a
 >，因为链接默认加下划线。移除锚点上的文本装饰时要小心，因为用户通常依赖下划线来表示超链接
</p>
<p class="underover">此文本在其上方<em>和</em>下方都有线条。</p>
<p class="thick">在浏览器支持的情况下，此文本具有非常粗的紫色下划线。</p>
<p class="blink">此文本可能会为你闪烁，具体取决于你使用的浏览器。</p>
```

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-property |

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

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

参见
--

* 包括的文本装饰属性分别是 `text-decoration-line`、`text-decoration-color`、`text-decoration-style` 和 `text-decoration-thickness`。
* `text-decoration-skip-ink` (en-US)、`text-underline-offset` 和 `text-underline-position` 属性也会影响文本装饰，但不包括在该简写属性中。
* `list-style` 属性控制 `<ol>` 和 `<ul>` 列表的每一项的外观。


quotes - CSS：层叠样式表

quotes
======

**`quotes`** CSS 属性用于设置引号的样式。

尝试一下
----

语法
--

```css
/\* Keyword value \*/
quotes: none;

/\* <string> values \*/
quotes: "«" "»"; /\* Set open-quote and close-quote to the French quotation marks \*/
quotes: "«" "»" "‹" "›"; /\* Set two levels of quotation marks \*/

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

### 值

`none`

`content` 属性的值 `open-quote` 和 `close-quote` 将不会展示引号。

`auto`

用适当的引号，基于在所选元素上设置的任何语言值（例如，通过 `lang` 属性）。

`[<string> <string>]+`

一组或者多组 `<string>` 的值对应 `open-quote` and `close-quote`. 第一对表示引号的外层，第二对表示第一个嵌套层，下一对表示第三层，依此类推。

### 形式语法
```

quotes =
  auto                    |
  none                    |
  [ <string> <string> ]+

```

示例
--

### 基本用法

#### HTML

```html
<q>To be or not to be. That's the question!</q>
```

#### CSS

```css
q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}
```

#### 结果

### 自动选择引号

#### HTML

```html
<div lang="fr">
  <q>Ceci est une citation française.</q>
  <div>
    <hr />
    <div lang="ru">
      <q>Это русская цитата</q>
      <div>
        <hr />
        <div lang="de">
          <q>Dies ist ein deutsches Zitat</q>
          <div>
            <hr />
            <div lang="en">
              <q>This is an English quote.</q>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

#### CSS

```css
/\*q {
 quotes: auto;
}\*/
```

#### 结果

备注
--

* 对于大多数浏览器，引号的默认值始终为 auto（Firefox 70+），否则浏览器具有此默认行为（Chromiums，Safari，Edge），因此上面的示例可以在不显式设置的情况下工作。
* 从 Firefox 3.5 开始，可以使用 `-moz-initial`读取 quotes 属性的初始值，这在 Firefox 的早期版本中是不可能的。
规范
--

| Specification |
| --- |
| CSS Generated Content Module Level 3 # quotes |

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

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

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

参见
--

* `content`


border-inline-start-width - CSS：层叠样式表

border-inline-start-width
=========================

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

尝试一下
----

语法
--

```css
/\* 边框宽度值 \*/
border-inline-start-width: 5px;
border-inline-start-width: thick;

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

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

### 取值

`<'border-width'>`

边框宽度。见 `border-width`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

形式语法
----
```

border-inline-start-width =
  <line-width>

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

```

示例
--

### HTML

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

### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-start-width: 5px;
}
```

规范
--

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

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

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

参见
--

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


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

text-decoration-style
=====================

CSS 属性 **`text-decoration-style`** 用于设置由 `text-decoration-line` 设定的线的样式。线的样式会应用到所有被 `text-decoration-line` 设定的线，不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时，用 `text-decoration` 简写属性会比分别写多个属性更方便。

尝试一下
----

如果设定的修饰效果具有特定的语义，例如删除线的意味着某些文本被删除了，开发者最好使用有语义的 HTML 标签来表达，比如 `<del>` 或 `<s>` 标签，因为浏览器有时可能会屏蔽某些样式，但语义化的标签则不会出现这样的问题。

当一次使用多个 line-decoration 属性时，使用 `text-decoration` 简写属性会更方便。

语法
--

```css
/\* Keyword values \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

### 值

solid

画一条实线。

double

画一条双实线。

dotted

画一条点划线。

dashed

画一条虚线。

wavy

画一条波浪线。

-moz-none
非标准

不画线。亦可用 `text-decoration-line``: none` 替代。

### 形式语法
```

text-decoration-style =
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

```

示例
--

```css
.example {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
}
```

```css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
```

```html
<p class="wavy">This text has a wavy red line beneath it.</p>
```

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-style-property |

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

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

参见
--

* 当要设置多个线修饰属性时，用 `text-decoration` 简写属性会比分别写多个属性更方便


break-after - CSS：层叠样式表

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

**`break-after`** CSS 属性描述在生成的盒子之后的页面，列或区域中断行为（换句话说，如何以及是否中断）。如果没有生成的盒子，则该属性将被忽略。

```css
/\* Generic break values \*/
break-after: auto;
break-after: avoid;
break-after: always;
break-after: all;

/\* Page break values \*/
break-after: avoid-page;
break-after: page;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;

/\* Column break values \*/
break-after: avoid-column;
break-after: column;

/\* Region break values \*/
break-after: avoid-region;
break-after: region;

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

每个潜在的断点（亦即每个元素的边界）都受到三个属性的影响：上一个元素的 `break-after` 值、下一个元素的 `break-before` 值以及当前元素自身的 `break-inside` 值。

以下规则被用于判断中断是否必要：

1. 如果上述三个属性中，如果任何一个的值属于“强制中断”值，那么这个属性将被优先应用，此处所称“强制中断”的值为： `always`、 `left`、 `right`、 `page`、 `column` 和 `region`。If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is the `break-before` (en-US) value has precedence over the `break-after` value, which itself has precedence over the `break-inside` value).
2. If any of the three concerned values is an *avoid break value*, that is `avoid`, `avoid-page`, `avoid-region`, `avoid-column`, no such break will be applied at that point.

Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding `avoid` value.

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

语法
--

The `break-after` property is specified as one of the keyword values from the list below.

### 属性值

#### Generic break values

`auto`

Allows, but does not force, any break (page, column, or region) to be inserted right after the principal box.

`avoid`

Avoids any break (page, column, or region) from being inserted right after the principal box.

`always`
实验性

Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.

`all`
实验性

Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.

#### Page break values

`avoid-page`

Avoids any page break right after the principal box.

`page`

Forces a page break right after the principal box.

`left`

Forces one or two page breaks right after the principal box, whichever will make the next page into a left page.

`right`

Forces one or two page breaks right after the principal box, whichever will make the next page into a right page.

`recto`
实验性

Forces one or two page breaks right after the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)

`verso`
实验性

Forces one or two page breaks right after the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a left right in a right-to-left spread.)

#### Column break values

`avoid-column`

Avoids any column break right after the principal box.

`column`

Forces a column break right after the principal box.

#### Region break values

`avoid-region`
实验性

Avoids any region break right after the principal box.

`region`
实验性

Forces a region break right after the principal box.

### 形式化语法
```

break-after =
  auto          |
  avoid         |
  always        |
  all           |
  avoid-page    |
  page          |
  left          |
  right         |
  recto         |
  verso         |
  avoid-column  |
  column        |
  avoid-region  |
  region

```

Page break aliases
------------------

For compatibility reasons, the legacy `page-break-after` property should be treated by browsers as an alias of `break-after`. This ensures that sites using `page-break-after` continue to work as designed. A subset of values should be aliased as follows:

| page-break-after | break-after |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

**备注：** The `always` value of `page-break-*` was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to `page`, rather than the `always` value in the Level 4 spec.

规范
--

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # break-between |
| CSS Regions Module Level 1 # region-flow-break |
| CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside |

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

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


shape-image-threshold - CSS：层叠样式表

shape-image-threshold
=====================

CSS 属性 **`shape-image-threshold`** 通过设定一个 alpha 通道的界限值来提取`shape-outside` 值为图像的形状。

尝试一下
----

所有 alpha 值比这个界限值大的像素都会被当做形状的一部分，以此确定形状的边界。举个例子，界限值为`0.5`时，形状会包含所有不透明度超过 50% 的像素。

```css
/\* <number> value \*/
shape-image-threshold: 0.7;

/\* Global values \*/
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: unset;
```

|  |  |
| --- | --- |
| 初始值 | `0.0` |
| 适用元素 | floats |
| 是否是继承属性 | 否 |
| 计算值 | The same as the specified value after clipping the `number` to the range [0.0, 1.0]. |
| Animation type | a number |

语法
--

### 值

`<alpha-value>`

设定界限值以从图像中提取形状。形状由所有 alpha 值比界限值大的像素定义。在 0.0（完全透明）到 1.0（完全不透明）之外的值会被重置（译者：如，小于 0.0 的值会被重置成 0.0）。

### 正式语法
```

shape-image-threshold =
  <alpha-value>

<alpha-value> =
  <number>      |
  <percentage>

```

范例
--

### Aligning text to a gradient

这个例子创建了一个`<div>`块，其背景是一个渐变图像。`shape-outside`也定义了一个渐变图像，以此创建一个 CSS 形状，渐变图像中不透明度至少为 20%（即 alpha 值大于 0.2）的像素都是形状的一部分。

#### HTML

```html
<div id="gradient-shape"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci,
  libero quae nihil porro debitis laboriosam inventore animi impedit nostrum
  nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta
  repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo
  eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea
  eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius
  alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni
  expedita?
</p>
```

#### CSS

```css
#gradient-shape {
  width: 150px;
  height: 150px;
  float: left;
  background-image: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-outside: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-image-threshold: 0.2;
}
```

在这里，形状由`background-image`创建，使用渐变而非图像文件。我们在`shape-outside`属性中使用相同的渐变图像创建形状，以此构建浮动区域。

随后值为`0.2`的`shape-image-threshold`属性规定渐变中不透明度超过 20% 的像素才参与构成形状。

#### Result

规范
--

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-image-threshold-property |

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

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

参见
--

* CSS Shapes
* Overview of CSS Shapes
* `<basic-shape>`
* `shape-outside`
* `shape-margin`


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

margin-block-start
==================

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

尝试一下
----

语法
--

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

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

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

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

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

### 取值

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

形式定义
----

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

形式语法
----
```

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

```

示例
--

### 设置块首外边距

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


::-webkit-slider-runnable-track - CSS：层叠样式表

::-webkit-slider-runnable-track
===============================

\*\*`::-webkit-slider-runnable-track`\*\*表示其在 type 为 range 的 input 标签内中的滑块凹槽，也就是滑块可滑动的区域

### 使用方法

input[type=range]**`::-webkit-slider-runnable-track`**`{`border-radius: 10px; //为凹槽添加圆角边 background:#eee;//修改背景色`}`

### 规范

**`::-webkit-slider-runnable-track`** 不是任何规范的一部分。这是 WebKit/Blink 特有的伪元素 (也就是 chrome/safari 浏览器内核特有的)

### 参见

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


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

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

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

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

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

**`::view-transition`** CSS 伪元素表示视图过渡叠加层的根元素，它包含所有视图过渡且位于所有其他页面内容的顶部。

在视图过渡期间，`::view-transition` 包含在相关的伪元素树中，如视图过渡过程中所述。它是该树的顶级节点，并且有一个或多个 `::view-transition-group` 子节点。

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

```css
html::view-transition {
  position: fixed;
  inset: 0;
}
```

所有 `::view-transition-group` 伪元素都相对于视图过渡根元素定位。

语法
--

```css
::view-transition {
  /\* ... \*/
}
```

示例
--

```css
::view-transition {
  background-color: rgba(0, 0, 0, 0.25);
}
```

规范
--

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

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

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

参见
--

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


column-rule-color - CSS：层叠样式表

column-rule-color
=================

CSS 特性 `column-rule-color` 让你可以设置在多列布局中被画在两列之间的规则（线条）的颜色。

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

Syntax
------
```

Formal syntax:
```
column-rule-color =
  <color>

```

```
```

column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

column-rule-color: inherit;
```

### Values

<color>

Is a `<color>` value representing the color of the rule separating columns.

Example
-------

```css
#header {
  column-rule-color: blue;
}
```

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

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

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

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


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

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

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

尝试一下
----

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

语法
--

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

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

### 取值

`<'border-style'>`

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

形式定义
----

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

形式语法
----
```

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

```

示例
--

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

#### 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-style: dashed;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-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`