grid-template - CSS：层叠样式表

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

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-template`**，CSS 属性简写，用以定义网格中行、列与分区。

尝试一下
----

所简写属性：`grid-template-rows`、`grid-template-columns`与`grid-template-areas`。

语法
--

```css
/\* 值为关键词 \*/
grid-template: none;

/\* 为 grid-template-rows / grid-template-columns \*/
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/\* 为 grid-template-areas grid-template-rows / grid-template-column \*/
grid-template:
  "a a a"
  "b b b";
grid-template:
  "a a a" 20%
  "b b b" auto;
grid-template:
  [header-top] "a a a" [header-bottom]
  [main-top] "b b b" 1fr [main-bottom]
  / auto 1fr auto;

/\* 为全局值 \*/
grid-template: inherit;
grid-template: initial;
grid-template: unset;
```

### 可设值

`none`

关键词，设上文“所简写属性”为`none`，即恢复默认设置。行列隐式生成，`grid-auto-rows`与`grid-auto-columns`定其尺寸。

`<'grid-template-rows'> / <'grid-template-columns'>`

指定`grid-template-rows`与`grid-template-columns`之值，并设`grid-template-areas`为`none`。

`[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`

设`grid-template-areas`为列得`<string>`、`grid-template-columns`为<explicit-track-list>（默认为`none`）、`grid-template-rows`为`<track-size>`（默认为`auto`）并拼接尺寸前后所定义之行。

注：轨道被用以与“ASCII art”（即字符画，此处指`<string>`）中行列逐一视觉对齐，故`<explicit-track-list>`中不允许`repeat()`。

**注：**`grid`可如此用，但将重置隐式网格属性。Use `grid` (as opposed to `grid-template`) to prevent these values from cascading in seperately.

### 形式语法
```

grid-template =
  none                                                |
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

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

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

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

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

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

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

```

示例
--

### CSS

```css
#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template:
    [header-left] "head head" 30px [header-right]
    [main-left] "nav main" 1fr [main-right]
    [footer-left] "nav foot" 30px [footer-right]
    / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-column: foot;
}
```

### HTML

```html
<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>
```

### 结果

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # explicit-grid-shorthand |

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

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

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

参见
--

* 相关 CSS 属性：`grid-template-rows`、`grid-template-columns`、`grid-template-areas`
* 网格布局指导：
    + *CSS 网格中基于线的定位*
    + *网格定义的简写规则*
* 视频教程：\_ Grid Template shorthand\_


background-size - CSS：层叠样式表

background-size
===============

`background-size` 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

尝试一下
----

```css
/\* 关键字 \*/
background-size: cover
background-size: contain

/\* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto \*/
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/\* 两个值 \*/
/\* 第一个值指定图片的宽度，第二个值指定图片的高度 \*/
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/\* 逗号分隔的多个值：设置多重背景 \*/
background-size: auto, auto     /\* 不同于 background-size: auto auto \*/
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/\* 全局属性 \*/
background-size: inherit;
background-size: initial;
background-size: unset;
```

注意：没有被背景图片覆盖的背景区域仍然会显示用`background-color`属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

|  |  |
| --- | --- |
| 初始值 | `auto auto` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | relative to the background positioning area |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a repeatable list |

语法
--

```css
/\* Keyword values \*/
background-size: cover;
background-size: contain;

/\* One-value syntax \*/
/\* the width of the image (height becomes 'auto') \*/
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/\* Two-value syntax \*/
/\* first value: width of the image, second value: height \*/
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/\* Multiple backgrounds \*/
background-size: auto, auto; /\* Not to be confused with `auto auto` \*/
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/\* Global values \*/
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;
```

单张图片的背景大小可以使用以下三种方法中的一种来规定：

* 使用关键词 `contain`
* 使用关键词 `cover`
* 设定宽度和高度值

当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值：

* 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为 `auto`。
* 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

`每个值可以是<length>`, 是 `<percentage>`, 或者 `auto`.

### 属性值

`<length>`

``<length>`` 值，指定背景图片大小，不能为负值。

`<percentage>`

``<percentage>`` 值，指定背景图片相对背景区（background positioning area）的百分比。背景区由`background-origin`设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果`attachment` 为`fixed`，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。

`auto`

以背景图片的比例缩放背景图片。

`cover`

缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 `contain` 值相反，`cover` 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

`contain`

缩放背景图片以完全装入背景区，可能背景区部分空白。`contain` 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。

位图一定有固有尺寸与固有比例，矢量图可能两者都有，也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。

**备注：** This behavior changed in Gecko 8.0. Before this, gradients were treated as images with no intrinsic dimensions, with an intrinsic proportion identical to that of the background positioning area.

由 `-moz-element()` (en-US) 生成的背景图片，(which actually match an element) are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion.

**备注：** This is not the currently-specified behavior, which is that the intrinsic dimensions and proportion should be those of the element in all cases.

背景图片大小计算：

如果指定了 `background-size` 的两个值并且不是`auto`：

背景图片按指定大小渲染。

`contain` 或 `cover`:

保留固有比例，最大的包含或覆盖背景区。如果图像没有固有比例，则按背景区大小。

`auto` 或 `auto auto`:

图像如果有两个长度，则按这个尺寸。如果没有固有尺寸与固有比例，则按背景区的大小。如果没有固有尺寸但是有固有比例，效果同 `contain`。如果有一个长度与比例，则由此长度与比例计算大小。如果有一个长度但是没有比例，则使用此长度与背景区相应的长度。

一个为 `auto` 另一个不是 auto:

如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值与固有比例计算。如果图像没有固有比例，则指定的长度使用指定值，未指定的长度使用图像相应的固有长度，若没有固有长度，则使用背景区相应的长度。

注意，对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试 Firefox 7- 与 Firefox 8+，以确定不同之处能否接受。

### Formal syntax

如何阅读 CSS 语法。
```

background-size =
  <bg-size>#

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

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

```

案例
--

`background-size: cover` 演示与 `background-size: contain` 演示在新窗口打开，这样你可以看到当背景区大小变化时 `contain` 与 `cover` 是怎样的。 系列演示：`background-size` 及其与 `background-*` 属性的关联很好的说明了单独使用 `background-size` 及与其他属性共同使用。

示例
--

### 大图像平铺

让我们考虑一张大图像——2982x2808 Firefox 的 logo 图像。我们想将此图像的四个副本平铺到一个 300x300 像素的元素中。为实现这一点，我们可以将 `background-size` 的值固定为 150 像素。

#### HTML

```html
<div class="tiledBackground"></div>
```

#### CSS

```css
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}
```

#### 结果

备注
--

如果用渐变作为背景并且对它使用了`background-size` ，最好不要只用一个 auto，或者只指定一个宽度值 (例如 `background-size: 50%`)。对这两种情况 Firefox 8 有所改变，并且目前各浏览器表现不一致，不是全部浏览器都完全支持 CSS3 `background-size` 规范 与 CSS3 Image Values gradient 规范 。

```css
.bar {
  width: 50px;
  height: 100px;
  background-image: gradient(...);

  /\* 不推荐 \*/
  background-size: 25px;
  background-size: 50%;
  background-size: auto 50px;
  background-size: auto 50%;

  /\* 可行 \*/
  background-size: 25px 50px;
  background-size: 50% 50%;
}
```

特别不推荐对渐变 px 与`auto`一起用，因为 Firefox 8 之前不能重复渲染，并且对于没有实现 Firefox 8 渲染特性的浏览器，不知道指定了背景的元素的确切大小。

规范
--

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

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

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

Polyfills and Workarounds
-------------------------

### For Internet Explorer prior IE8

Though Internet Explorer 8 doesn't support the `background-size` property, it is possible to emulate some of its functionality using the non-standard `-ms-filter` property:

```css
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path\_relative\_to\_the\_HTML\_file', sizingMethod='scale')";
```

This simulates the value `cover`.

### In Firefox 3.5

While this property was added in Firefox 3.6, it is possible to stretch a image fully over the background in Firefox 3.5 by using `-moz-border-image` (en-US).

```css
.foo {
  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%; /\* Safari 3.0 \*/
  -moz-background-size: 100% 100%; /\* Gecko 1.9.2 (Firefox 3.6) \*/
  -o-background-size: 100% 100%; /\* Opera 9.5 \*/
  background-size: 100% 100%; /\* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers \*/

  -moz-border-image: url(bg-image.png) 0; /\* Gecko 1.9.1 (Firefox 3.5) \*/
}
```

参见
--

* CSS Reference
* Multiple backgrounds (en-US)
* Scaling background images (en-US)


clip-path - CSS：层叠样式表

clip-path
=========

**`clip-path`** CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

尝试一下
----

语法
--

```css
/\* Keyword values \*/
clip-path: none;

/\* <clip-source> values \*/
clip-path: url(resources.svg#c1);

/\* <geometry-box> values \*/
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/\* <basic-shape> values \*/
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

/\* Box and shape values combined \*/
clip-path: padding-box circle(50px at 0 100px);

/\* Global values \*/
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;
```

`clip-path` 属性指定为下面列出的值的一个或多个值的组合。

### 取值

`<clip-source>`

用 `url()` 引用 SVG 的 `<clipPath>` 元素

`<basic-shape>`

一种形状，其大小和位置由 `<geometry-box>` 的值定义。如果没有指定 `<geometry-box>`，则将使用 `border-box` 用为参考框。取值可为以下值中的任意一个：

`inset()` (en-US)

定义一个 inset 矩形。

`circle()` (en-US)

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

`ellipse()` (en-US)

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

`polygon()` (en-US)

定义一个多边形（使用一个 SVG 填充规则和一组顶点）。

`path()` (en-US)

定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。

`<geometry-box>`

如果同 `<basic-shape>` 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 `border-radius` 定义的剪切路径）。几何框盒可以有以下的值中的一个：

`margin-box`

使用 margin box 作为引用框。

`border-box`

使用 border box 作为引用框。

`padding-box`

使用 padding box 作为引用框。

`content-box`

使用 content box 作为引用框。

`fill-box`

利用对象边界框（object bounding box）作为引用框。

`stroke-box`

使用笔触边界框（stroke bounding box）作为引用框。

`view-box`

使用最近的 SVG 视口（viewport）作为引用框。如果 `viewBox` 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 `viewBox` 属性建立的坐标系的原点，引用框的尺寸用来设置 `viewBox` 属性的宽高值。

`none`

不创建剪切路径。

**备注：** CSS 计算值不为 **`none`** 时，会创建新的层叠上下文，就像 CSS `opacity` 的值不为 `1` 时那样。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| Percentages | refer to reference box when specified, otherwise border-box |
| 计算值 | as specified, but with `url` values made absolute |
| Animation type | yes, as specified for `basic-shape`, otherwise no |

形式语法
----
```

clip-path =
  <clip-source>                        |
  [ <basic-shape> || <geometry-box> ]  |
  none

<clip-source> =
  <url>

<geometry-box> =
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box

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

<shape-box> =
  <visual-box>  |
  margin-box

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

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

<visual-box> =
  content-box  |
  padding-box  |
  border-box

```

示例
--

### HTML 与 SVG 之间的对比
```

<svg class="defs">
  <defs>
    <clipPath id="myPath" clipPathUnits="objectBoundingBox">
      <path
 d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" />
    </clipPath>
  </defs>
</svg>

<div class="grid">
  <div class="col">
    <div class="note">clip-path: none</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="none">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="none">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: url(#myPath)<br /><br />
      Assuming the following clipPath definition:
      <pre>
<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg></pre
 >
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45
      Q135,90,75,130 Q15,90,15,45 Z')
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg2">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape1">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape1">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape2">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape3">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape3">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape4">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape4">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape5">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape5">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape6">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape6">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape7">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape7">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape8">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape8">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape9">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape9">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

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

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

.col {
  flex: 1 auto;
}

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

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

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

.container {
  display: inline-block;
  border: 1px dotted grey;
  position: relative;
}

.container:before {
  content: "margin";
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic 0.6em sans-serif;
}

.viewbox {
  box-shadow:
    1rem 1rem 0 #efefef inset,
    -1rem -1rem 0 #efefef inset;
}

.container.viewbox:after {
  content: "viewbox";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic 0.6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: 0.5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none {
  clip-path: none;
}
.svg {
  clip-path: url(#myPath);
}
.svg2 {
  clip-path: path(
    "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z"
  );
}
.shape1 {
  clip-path: circle(25%);
}
.shape2 {
  clip-path: circle(25% at 25% 25%);
}
.shape3 {
  clip-path: fill-box circle(25% at 25% 25%);
}
.shape4 {
  clip-path: stroke-box circle(25% at 25% 25%);
}
.shape5 {
  clip-path: view-box circle(25% at 25% 25%);
}
.shape6 {
  clip-path: margin-box circle(25% at 25% 25%);
}
.shape7 {
  clip-path: border-box circle(25% at 25% 25%);
}
.shape8 {
  clip-path: padding-box circle(25% at 25% 25%);
}
.shape9 {
  clip-path: content-box circle(25% at 25% 25%);
}

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre {
  margin-bottom: 0;
}

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}
```

### 完整示例

#### HTML

```html
<img id="clipped" src="mdn.svg" alt="MDN logo" />
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90" />
      <rect x="0" y="110" width="90" height="90" />
      <rect x="137" y="0" width="90" height="90" />
      <rect x="0" y="0" width="90" height="90" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
</select>
```

#### CSS

```css
#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}
```

```
const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-clip-path |
| CSS Shapes Module Level 1 # supported-basic-shapes |

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

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

参见
--

* Shapes in clipping and masking – and how to use them
* 在 HTML 内容中应用 SVG 效果
* SVG 属性：
    + `clip-path`
    + `clip-rule (en-US)`


mask-border-slice - CSS：层叠样式表

mask-border-slice
=================

的CSS属性除以`掩模边界源`成区域的图像集合。这些区域用于形成元素的遮罩边框的组成部分。**`mask-border-slice`**

句法
--

```css
/\* All sides \*/
mask-border-slice: 30%;

/\* vertical | horizontal \*/
mask-border-slice: 10% 30%;

/\* top | horizontal | bottom \*/
mask-border-slice: 30 30% 45;

/\* top | right | bottom | left \*/
mask-border-slice: 7 12 14 5;

/\* Using the `fill` keyword \*/
mask-border-slice: 10% fill 7 12;

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

该`mask-border-slice`属性可使用一至四个指定`<number-percentage>`值来表示每个图像切片的位置。负值无效；大于其相应尺寸的值被钳制为`100%`。

* 当**一个**被指定的位置，它在从它们各自的两侧是相同的距离创建所有四片。
* 当**2 点**被指定的位置，所述第一值创建一个从测量的层**的顶部和底部**，所述第二创建从所测量的片**左右**。
* 当指定了**三个**位置时，第一个值创建从**顶部开始**测量的切片，第二个值创建从**左侧和右侧开始**测量的切片，第三个值创建从**底部开始**测量的切片。
* 当指定了**四个**位置时，它们创建从**上**，**右**，**下**和**左**按该顺序（顺时针）测量的切片。

`fill`如果使用了可选值，则可以将其放置在声明中的任何位置。

### 价值观

`<number>`

表示光栅图像的边缘偏移量（*像素）*和矢量图像的*坐标*。对于矢量图像，数字是相对于元素的大小，而不是源图像的大小，因此在这些情况下，通常最好使用百分比。

`<percentage>`

将边缘偏移量表示为源图像尺寸的百分比：水平偏移量的图像宽度，垂直偏移量的高度。

`fill`

保留中间图像区域。其宽度和高度的大小分别匹配顶部和左侧图像区域。

描述
--

切片过程总共创建了九个区域：四个角，四个边缘和一个中间区域。四个切片线，从其各自的侧面设置了给定的距离，以控制区域的大小。

![由 border-image 或 border-image-slice 属性定义的九个区域](/files/3814/border-image-slice.png)

上图说明了每个区域的位置。

* 1-4 区是
 拐角区域
 。每个图像都使用一次以形成最终边框图像的角。
* 5-8 区是
 边缘区域
 。在最终的边框图像中对这些元素进行重复，缩放或其他方式的修改，以匹配元素的尺寸。
* 9 区是
 中间区域
 。默认情况下将其丢弃，但如果`fill`设置了关键字，则它会用作背景图像。

`mask-border-repeat`，`mask-border-width`和`mask-border-outset` (en-US)属性决定了这些区域用于形成最终的蒙版边框。

正式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| Percentages | refer to size of the mask border image |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

mask-border-slice =
  [ <number> | <percentage> ]{1,4} fill?

```

例子
--

### 基本用法

该属性似乎在任何地方都不受支持。最终开始受支持时，它将用于定义从源图像获取的切片的大小，并用于创建边框蒙版。

```css
mask-border-slice: 30 fill;
```

基于 Chromium 的浏览器支持此属性的过时版本`mask-box-image-slice`-带前缀：

```css
-webkit-mask-box-image-slice: 30 fill;
```

**备注：** 该`mask-border`页面提供了一个有效的示例（使用 Chromium 支持的过期前缀边框蒙版属性），因此你可以大致了解效果。

**备注：** 如果希望元素的内容可见，则必须包含 fill 关键字。

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-slice |

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

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

参见
--

* 1 到 4 值语法的图解说明


fit-content() - CSS：层叠样式表

fit-content()
=============

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

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

* Learn more
* See full compatibility
* Report feedback
**`fit-content()`** CSS 函数将给定大小夹紧为可用大小 根据公式 `min(maximum size, max(minimum size, argument))`.

```css
/\* <length> values \*/
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/\* <percentage> value \*/
fit-content(40%)
```

The function can be used as a track size in CSS Grid properties, where the maximum size is defined by `max-content` and the minimum size by `auto`, which is calculated similar to `auto` (i.e., `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

The function can also be used as laid out box size for `width`, `height`, `min-width`, `min-height`, `max-width` and `max-height`, where the maximum and minimum sizes refer to the content size.

Syntax
------

The `fit-content()` function accepts a `<length>` or a `<percentage>` as an argument.

### Values

`<length>`

An absolute length.

`<percentage>`

 A percentage relative to the available space in the given axis.
 In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.

### Formal syntax

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

### CSS

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

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

### HTML

```html
<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item with more text in it. Because the contents of it are wider than the
    maximum width, it is clamped at 300 pixels.
  </div>
  <div>Flexible item</div>
</div>
```

### Result

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

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

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

### css.properties.grid-template-columns.fit-content

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

### css.properties.width.fit-content\_function

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


border-spacing - CSS：层叠样式表

border-spacing
==============

概述
--

`border-spacing` 属性指定相邻单元格边框之间的距离（只适用于 边框分离模式 ）。相当于 HTML 中的 `cellspacing` 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

`border-spacing` 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的）边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。

该属性只适用于 `border-collapse` 值是 `separate` 的时候。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | `table` and `inline-table` elements |
| 是否是继承属性 | yes |
| 计算值 | two absolute lengths |
| Animation type | discrete |

语法
--
```

/* <length> */
border-spacing: 2px;

/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;

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

### 值

*length*

描述单元格之间的水平和垂直距离的一个 `<length>` 值。它只在单值语法下使用。

*horizontal*

描述相邻两列的单元格之间的水平距离的一个 `<length>` 值。它只在双值语法下使用。

*vertical*

描述相邻两行的单元格之间的垂直距离的一个 `<length>` 值。它只在双值语法下使用。

`inherit`

一个表示父元素的 `border-spacing` 的计算值的关键字，其父元素必须应用了 `border-spacing` 。

### 正式语法
```

border-spacing =
  <length>{1,2}

```

示例
--

查看在线演示

```css
table {
  border-spacing: 10px 5px;
}
```

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # separated-borders |

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

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


::-moz-range-progress - CSS：层叠样式表

::-moz-range-progress
=====================

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

The **`::-moz-range-progress`** CSS 伪元素 是一个 Mozilla 扩展 (en-US)。它代表了指示器在其中滑动的轨道的下部（即凹槽）是一个 `type="range"` 类型的 `<input>` 。此部分对应的值低于揪揪当前选择的值（即虚拟旋钮）。

**备注：** 在 `<input type="range">`上应用`::-moz-range-progress` 不会匹配任何元素，也不会有任何效果。

语法
--

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

### HTML

```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS

```css
input[type="range"]::-moz-range-progress {
  background-color: green;
  height: 1em;
}
```

### 结果

使用了这个样式的进度条可能会看起来这样：

![](/zh-CN/docs/Web/CSS/::-moz-range-progress/screen_shot_2015-12-04_at_20.14.48.png)

规范
--

无内容

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

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

参见
--

* Gecko 用于设置范围输入的其他部分样式的伪元素：
    + `::-moz-range-thumb` (en-US) 代表在凹槽中滑动的指示器
    + `::-moz-range-track` (en-US) 代表有揪揪滑动的凹槽
* 其他浏览器使用的类似伪元素：
    + `::-ms-fill-upper`, Internet Explorer 和 Edge 支持的伪元素
* CSS-Tricks：使用 CSS 设置跨浏览器兼容范围输入的样式
* QuirksMode：样式和脚本滑块


transition-delay - CSS：层叠样式表

transition-delay
================

CSS 的**transition-delay**属性规定了在过渡效果开始作用之前需要等待的时间。

值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的 css 属性（**transition-property**）

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

语法
--

```css
/\* <time>?值 \*/
transition-delay: 3s;
transition-delay: 2s, 4ms;

/\* 全局变量 \*/
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
```

### 取值

`<time>`

表明动画效果属性生效之前需要等待的时间。

### 形式语法
```

transition-delay =
  <time>#

```

示例
--

### 展示不同的延迟

#### HTML

```html
<div class="box delay-1">0.5 秒</div>

<div class="box delay-2">2 秒</div>

<div class="box delay-3">4 秒</div>

<button id="change">变换</button>
```

#### CSS

```css
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.delay-1 {
  transition-delay: 0.5s;
}

.delay-2 {
  transition-delay: 2s;
}

.delay-3 {
  transition-delay: 4s;
}
```

#### JavaScript

```js
function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Transitions # transition-delay-property |

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

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

参见
--

* Using CSS transitions
* `TransitionEvent`


ID 选择器 - CSS：层叠样式表

ID 选择器
======

CSS **ID 选择器**会根据该元素的 `id` 属性中的内容匹配元素。为了使该元素被选中，它的 `id` 属性必须与选择器中给出的值完全匹配。

```css
/\* id 为 "demo" 的元素会被选中 \*/
#demo {
  border: red 2px solid;
}
```

语法
--

```css
#id 属性值 { 样式声明 }
```

它与下面的`属性选择器`语句语法上等价（但优先级并不等价）：

```css
[id=id 属性值] { 样式声明 }
```

示例
--

### CSS

```css
#identified {
  background-color: skyblue;
}
```

### HTML

```html
<div id="identified">这个 div 有一个特别的 ID 属性！</div>
<div>这只是一个普通的 div。</div>
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # id-selectors |

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

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

参见
--

* CSS 选择器
* 学习 CSS 选择器


text-orientation - CSS：层叠样式表

text-orientation
================

**`text-orientation`** CSS 属性设定行中字符的方向。但它仅影响纵向模式（当 `writing-mode` 的值不是`horizontal-tb`）下的文本。此属性在控制使用竖排文字的语言的显示上很有作用，也可以用来构建垂直的表格头。

尝试一下
----

语法
--

```css
/\* Keyword values \*/
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

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

`text-orientation` 应当被设置为上述关键字之一。

### 值

`mixed`

默认值。顺时针旋转水平书写的字符 90°，将垂直书写的文字自然布局。

`upright`

将水平书写的字符自然布局（直排），包括垂直书写的文字（as well as the glyphs for vertical scripts）。注意这个关键字会导致所有字符被视为从左到右，也就是 `direction` 被强制设为 `ltr`。

`sideways`

所有字符被布局为与水平方式一样，但是整行文本被顺时针旋转 90°。

`sideways-right`

处于兼容目的，`sideways` 的别名。

`use-glyph-orientation`

对于 SVG 元素，这个关键字导致使用已弃用的 SVG 属性。 `glyph-orientation-vertical` 和 `glyph-orientation-horizontal`。

形式化定义
-----

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

形式化语法
-----
```

text-orientation =
  mixed     |
  upright   |
  sideways

```

例子
--

### HTML

```html
<p>Lorem ipsum dolet semper quisquam.</p>
```

### CSS

```css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-orientation |

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

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

参见
--

* The other vertical-script related CSS properties: `writing-mode`, `text-combine-upright` (en-US), and `unicode-bidi`.
* CSS Logical properties
* Styling vertical text (Chinese, Japanese, Korean and Mongolian)
* Extensive browsers support test results: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text\_orientation


max-height - CSS：层叠样式表

max-height
==========

CSS属性 **`max-height`** 设置元素的最大高度。它防止`height`属性的使用值（used value）大于 `max-height` 的指定值。

尝试一下
----

`max-height` 会覆盖`height`, 而`min-height` 会覆盖 `max-height`.

Syntax
------

```css
/\* <length> value \*/
max-height: 3.5em;

/\* <percentage> value \*/
max-height: 75%;

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

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

### Values

`<length>`

Defines the `max-height` as an absolute value.

`<percentage>`

Defines the `max-height` as a percentage of the containing block's height.

`auto`

The browser will calculate and select a `max-height` for the specified element.

`none`

No limit on the size of the box.

`max-content`

The intrinsic preferred `max-height`.

`min-content`

The intrinsic minimum `max-height`.

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

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

### Formal syntax
```

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

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

```

Examples
--------

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

form {
  max-height: none;
}
```

Accessibility concerns
----------------------

Ensure that elements set with a `max-height` are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

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

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

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

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

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

See also
--------

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


perspective-origin - CSS：层叠样式表

perspective-origin
==================

CSS 属性 **`perspective-origin`** 指定了观察者的位置，用作 `perspective` 属性的消失点。

尝试一下
----

语法
--

```css
/\* One-value syntax \*/
perspective-origin: x-position;

/\* Two-value syntax \*/
perspective-origin: x-position y-position;

/\* When both x-position and y-position are keywords,
 the following is also valid \*/
perspective-origin: y-position x-position;

/\* Global values \*/
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: unset;
```

### 值

*x-position*

指定*消失点*的横坐标，其值有以下形式：

* `<length-percentage>` 长度值或相对于元素宽度的百分比值，可为负值。
* `left`, 关键字，0 值的简记。
* `center`, 关键字，50% 的简记。
* `right`, 关键字，100% 的简记。

*y-position*

指定*消失点*的纵坐标，其值有以下形式：

* `<length-percentage>` 长度值或相对于元素高度的百分比值，可为负值。
* `top`, 关键字，0 值的简记。
* `center`, 关键字，50% 的简记。
* `bottom`, 关键字，100% 的简记。

### 形式语法
```

perspective-origin =
  <position>

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

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

```

示例
--

### 修改 perspective origin

这个例子展示了带有常用 `perspective-origin` 值的立方体。

#### 结果

#### HTML

```html
<table>
  <tbody>
    <tr>
      <th>
        <code>perspective-origin: top left;</code>
      </th>
      <th>
        <code>perspective-origin: top;</code>
      </th>
      <th>
        <code>perspective-origin: top right;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube potl">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube potm">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube potr">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th>
        <code>perspective-origin: left;</code>
      </th>
      <th>
        <code>perspective-origin: 50% 50%;</code>
      </th>
      <th>
        <code>perspective-origin: right;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube poml">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pomm">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pomr">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th>
        <code>perspective-origin: bottom left;</code>
      </th>
      <th>
        <code>perspective-origin: bottom;</code>
      </th>
      <th>
        <code>perspective-origin: bottom right;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pobl">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pobm">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pobr">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
/\* Shorthand classes for perspective-origin values \*/
.potl {
  perspective-origin: top left;
  -webkit-perspective-origin: top left;
}

.potm {
  perspective-origin: top;
  -webkit-perspective-origin: top;
}

.potr {
  perspective-origin: top right;
  -webkit-perspective-origin: top right;
}

.poml {
  perspective-origin: left;
  -webkit-perspective-origin: left;
}

.pomm {
  perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
}

.pomr {
  perspective-origin: right;
  -webkit-perspective-origin: right;
}

.pobl {
  perspective-origin: bottom left;
  -webkit-perspective-origin: bottom left;
}

.pobm {
  perspective-origin: bottom;
  -webkit-perspective-origin: bottom;
}

.pobr {
  perspective-origin: bottom right;
  -webkit-perspective-origin: bottom right;
}

/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 100px;
  height: 100px;
  margin: 24px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective: 300px;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  -webkit-perspective: 300px;
  -webkit-transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Define each face based on direction \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
  -webkit-transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
  -webkit-transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
  -webkit-transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
  -webkit-transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/\* Make the table a little nicer \*/
th,
p,
td {
  background-color: #eeeeee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}
```

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # perspective-origin-property |

|  |  |
| --- | --- |
| 初始值 | `50% 50%` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the size of bounding box |
| 计算值 | for `length` the absolute value, otherwise a percentage |
| Animation type | simple list of length, percentage, or calc |

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

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

参见
--

* Using CSS Transforms


:last-child - CSS：层叠样式表

:last-child
===========

**`:last-child`** CSS 伪类代表一组兄弟元素中的最后元素。

尝试一下
----

语法
--

```css
:last-child {
  /\* ... \*/
}
```

示例
--

### 基础示例

#### HTML

```html
<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>
```

#### CSS

```css
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```

#### 结果

### 为列表添加样式

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```

#### CSS

```css
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

参见
--

* `:-moz-last-node` (en-US)
非标准
* `:last-of-type`
* `:first-child`
* `:nth-child`


-webkit-border-before - CSS：层叠样式表

-webkit-border-before
=====================

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

**`-webkit-border-before`** CSS 属性 是一种用于简写的属性。它用于在样式表的单个位置设置各个起始边框属性值。

```css
/\* Border values \*/
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

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

`-webkit-border-before` 可以使用以下一个或多个值：

1. `-webkit-border-before-width`
2. `-webkit-border-before-style`
3. `-webkit-border-before-color`.

它根据元素的书写模式、方向以及文本方向映射到 Border 上。对应到四个边框属性`border-top`、`border-right`、`border-bottom`或`border-left` ，具体取决于 `writing-mode`、`direction`、`text-orientation`三个属性定义的值。

这个属性和 `-webkit-border-after`、`-webkit-border-start`、`-webkit-border-end`三个属性用来定义元素的边界。

此属性在相关标准上的命名为 `border-block-start`.

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| Percentages | as each of the properties of the shorthand:* `-webkit-border-before-width`: logical-width of containing block
 |
| 计算值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `color`: computed color
 |
| Animation type | discrete |

语法
--

### 可选择的值

按以下顺序，一个或多个值

`<'border-width'>`

参考 `border-width`

`<'border-style'>`

参考 `border-style`

`<'color'>`

参考 `color`

### 形式语法

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

### HTML

```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  -webkit-border-before: 5px dashed blue;
}
```

规范
--

尽管它和 `border-block-start` 属性有关，但现在并不存在与任何一标准规范。

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

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

参见
--

* `border-block-start`
* The mapped physical properties: `border-top`, `border-right`, `border-bottom`, and `border-left`
* `writing-mode`, `direction`, `text-orientation`


CSS 布局手册 - CSS：层叠样式表

CSS 布局手册
========

CSS 布局手册旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。

**备注：** 如果你是首次接触 CSS 布局，你可以先看一下 CSS 布局学习模块，其中的基础知识有利于你更好的使用本书中的布局样式。

布局专题
----

| 专题 | 描述 | 布局方法 |
| --- | --- | --- |
| 媒体对象 | 一个两栏的框，一边是图片，另一边是描述性文字，例如 facebook 上的帖子或推文。 | CSS 网格、`float` 回落、`fit-content` 尺寸 |
| 栏目布局 | 多栏、弹性盒或网格布局的取舍 | CSS 网格、多栏布局、弹性盒布局 |
| 元素居中 | 如何水平或者垂直居中内容。 | 弹性盒布局、盒子对齐 |
| 粘性页脚 | 创建一个页脚，当内容较短时，该页脚位于容器或视图的底部。 | CSS 网格、弹性盒 |
| 分离导航 | 一种导航模式，其中一些链接在视觉上与其他链接分开。 | 弹性盒、`margin` |
| 面包屑导航 | 创建链接列表，允许访问者在页面层次结构中向上导航。 | 弹性盒 |
| 含有计数徽章的列表 (en-US) | 一个带有 count 计数的徽章的 items 列表。 | 弹性盒、盒子对齐 |
| 分页 (en-US) | 链接到内容的某个页面（比如搜索结果）。 | 弹性盒、盒子对齐 |
| 卡片 | 卡片组件，显示在卡片网格中 | CSS 网格 |
| 网格包装器 (en-US) | 用于在一个中央包装器内对齐网格内容，同时也允许项目脱离。 | CSS 网格 |

贡献布局专题
------

作为 MDN 的一员，我们希望你能贡献一份与上表所示相同格式的布局专题。参见本页以获得编写示例的模板和指南。


margin-right - CSS：层叠样式表

margin-right
============

摘要
--

![The effect of the CSS margin-right property on the element box](/files/4041/margin-right.svg)**`margin-right`** 属性 设置与元素相关联的盒子模型的右外边距。这个值可以为负值。

竖直排列相邻的两个盒子模型的外边距会重叠，称为 *margin collapsing*.

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

语法
--

```css
/\* <length> values \*/
margin-right: 20px; /\* An absolute length \*/
margin-right: 1em; /\* A length relative to the text size \*/
margin-right: 5%; /\* A margin relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-right: auto;

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

### 值

`<length>`

一个固定宽度 `<length>`值：可以是一个绝对宽度，e.g. in `px`, 也可以是一个相对宽度，e.g. in `em`, 或者相对视窗的大小，e.g. in `vh`.

`<percentage>`

以百分比为单位的 margin 值，计算时是相对于其最近的父级容器的宽度。

`auto`

auto 关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组 margin-left 和 margin-right 设置为 auto，那么最后计算的空间分布，会根据 display，float，position 属性，自动生成以下几种情况：

| Value of `display` | Value of `float` | Value of `position` | Computed value of `auto` | Comment |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *any* | `static` or `relative` | `0` | Inline layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the element inside its parent. | Block layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | Block layout mode (floating element) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` | Internal `table-*` elements don't have margins, use `border-spacing` instead |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the border area inside the available `width`, if fixed. | Absolutely positioned layout mode |
| `flex`, `inline-flex` | *any* | *any* | `0`, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal `auto` margins. | Flexbox layout mode |

### 形式语法
```

margin-right =
  <length-percentage>  |
  auto

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

```

实例
--
```

.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }
```

规范
--

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

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

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


counter-reset - CSS：层叠样式表

counter-reset
=============

`counter-reset` 属性用于将 CSS 计数器 (en-US) 重置为制定值

尝试一下
----

**备注：** 计数器的值能够通过 CSS 属性 `counter-increment` 控制递增或递减。

语法
--

```css
/\* Set counter-name to 0 \*/
counter-reset: counter-name;

/\* Set counter-name to -1 \*/
counter-reset: counter-name -1;

/\* Set counter1 to 1, and counter2 to 4 \*/
counter-reset: counter1 1 counter2 4;

/\* Cancel any reset that could have been set in less specific rules \*/
counter-reset: none;

/\* Global values \*/
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;
```

`counter-reset` 属性可以指定为以下之一：

* `<自定义 ID> [<数值>]`。你可以指定任意数量的计数器进行重置，每个名称或“名称 - 数字”对之间用空格分隔。
* 特殊值 `none`。
### 可选值

`<custom-ident>`

要递增的计数器的名称。

**备注：** 该名称由不区分大小写的字母 a 到 z，数字 0 到 9，下划线（\_）和 / 或短划线（ - ）的组合组成，并且第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号）。此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是 none，unset，initial 或 inherit。

`<integer>`

每次出现元素时将计数器重置为的值。如果不指定，则默认为 `0`。

`none`

该关键字表示不执行计数器重置。它可用于重置隐藏在不太具体的规则中定义的计数器。你可以指定要根据需要重置的计数器，每个计数器用空格分隔。

### 语法形式
```

counter-reset =
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |
  none

<reversed-counter-name> =
  reversed( <counter-name> )

```

示例
--

```css
h1 {
  counter-reset: chapter section 1 page;
  /\* Sets the chapter and page counters to 0
 and the section counter to 1. \*/
}
```

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-reset |

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

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

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

参考
--

* CSS Counters (en-US), `counter-increment`
* `counter-increment`
* `counter-set`
* `@counter-style`
* `counter()` and `counters()` functions
* `content` property


unset - CSS：层叠样式表

unset
=====

CSS 关键字 **`unset`** 可以分为两种情况，如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于`inherit` ，在第二种情况下（非继承属性）类似于`initial`。它可以应用于任何 CSS 属性，包括 CSS 简写属性 `all` 。

示例
--

### Color

#### HTML

```html
<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
```

#### CSS

```css
.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}
```

#### 结果

### Border

#### HTML

```html
<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has has a black border (initial default, not inherited).</p>
</div>
```

#### CSS

```css
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}
```

#### 结果

规范
--

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

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

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

参见
--

* 使用`initial`将属性设置为其初始值。
* 使用`revert` (en-US)将属性重置为 user-agent 样式表规定的值（或用户样式，如果存在）。
* 使用`inherit`使元素的属性与其父元素相同。
* `all`属性允许你一次将所有属性重置为其初始，继承，恢复或未设置状态。


min-block-size - CSS：层叠样式表

min-block-size
==============

CSS 属性 **`min-block-size`** 根据元素的书写模式定义了元素区块的横向或纵向最小尺寸。根据 `writing-mode` 的值，此属性对应于 `min-width` 或 `min-height` 属性。

若为纵向书写模式，则 `min-block-size` 的值对应于元素的最小宽度；否则对应于元素的最小高度。与此相关的属性为 `min-inline-size`，此属性定义了元素另一方向的尺度。

尝试一下
----

语法
--

```css
/\* <length> 值 \*/
min-block-size: 100px;
min-block-size: 5em;

/\* <percentage> 值 \*/
min-block-size: 10%;

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

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

### 取值

`min-block-size` 属性的取值与 `min-width` 和 `min-height` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | same as `width` and `height` |
| 是否是继承属性 | 否 |
| Percentages | block-size of containing block |
| 计算值 | same as `min-width` and `min-height` |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

min-block-size =
  <'min-width'>

```

示例
--

### 为竖排文本设置最小块向尺寸

#### HTML

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

#### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  min-block-size: 200px;
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

参见
--

* 对应的实体属性：`min-width` 和 `min-height`
* `writing-mode`


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

border-block-width
==================

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

尝试一下
----

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

语法
--

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

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

### 取值

`<'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-block-width =
  <'border-top-width'>{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: 1px solid blue;
  border-block-width: 5px;
}
```

#### 结果

规范
--

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


scale - CSS：层叠样式表

scale
=====

CSS 属性 **`scale`** 允许你可以分别且独立地指定 CSS 属性 `transform` 缩放的比例。这更好地映射到典型的 UI（用户界面）用法中，并免去了在指定变换值时必须记住变换函数的精确顺序的麻烦。

语法
--

```css
/\* 关键值 \*/
scale: none;

/\* 单个值 \*/
/\* 设定比 1 大的数值使该元素变大 \*/
scale: 2;
/\* 设定比 1 小的数值使该元素缩小 \*/
scale: 0.5;

/\* 两个值 \*/
scale: 2 0.5;

/\* 三个值 \*/
scale: 2 0.5 2;
```

### 取值

单一数值

单一的数值即指定了一个缩放系数，同时作用于 X 轴和 Y 轴让该元素进行缩放，相当于指定了单个值的 scale()(2D 缩放) 函数。

两个长度/百分比值

两个数值即分别指定了 2D 比例的 X 轴和 Y 轴的缩放系数，相当于指定了两个值的 scale()（2D 缩放）函数。

三个长度/百分比值

三个数值即分别指定了 3D 比例的 X 轴、Y 轴和 Z 轴的缩放系数。相当于一个 scale3d() 函数。

`none`

指定不进行缩放。

### 形式语法
```

scale =
  none                              |
  [ <number> | <percentage> ]{1,3}

```

示例
--

### HTML

```html
<div>
  <p class="scale">Scaling</p>
</div>
```

### CSS

```css
\* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.scale {
  transition: scale 1s;
}

div:hover .scale {
  scale: 2 0.7;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a transform |
| Creates stacking context | yes |

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

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


transform-box - CSS：层叠样式表

transform-box
=============

概述
--

**`transform-box`** 属性定义了与 `transform`、`transform-origin` 这两个属性有关联的布局框。

语法
--

```css
/\* Keyword values \*/
transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;

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

`transform-box`属性被指定为以下所列出的关键字值之一。

### 值

`border-box`

border box 是用作引用框，一个表格（table）的 border-box 是 table 包装盒的边框，而不是表的边框。

`fill-box`

Uses the object bounding box as reference box.

`view-box`

Uses the nearest SVG viewport as reference box. If a `viewBox` attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.

形式定义
----

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

形式语法
----
```

transform-box =
  content-box  |
  border-box   |
  fill-box     |
  stroke-box   |
  view-box

```

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-box |

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

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

参见
--

* 使用 CSS 变换 (en-US)


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

border-inline-start-style
=========================

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

尝试一下
----

语法
--

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

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

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

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

### 取值

`<'border-style'>`

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

形式定义
----

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

形式语法
----
```

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

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

```

示例
--

### HTML

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

### CSS

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

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

规范
--

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

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

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

参见
--

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


outline-offset - CSS：层叠样式表

outline-offset
==============

概要
--

**`outline-offset`** CSS 属性用于设置 `outline` 与一个元素边缘或边框之间的间隙。

outline 是元素的轮廓，悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

The space will be transparent (the parent will determine the background).

Syntax
------

```css
/\* <length> values \*/
outline-offset: 3px;
outline-offset: 0.2em;

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

### Values

`<length>`

元素和轮廓间的宽度。详见 `<length>` . 负值将轮廓绘制在元素之内。

### Formal syntax
```

outline-offset =
  <length>

```

Examples
--------

```css
p {
  outline: dashed thin;
  /\* Move the outline 10px away from the border \*/
  outline-offset: 10px;
  border: 1px solid black;
}
```

Html

```html
<p>outline: offset 10px. Border is solid and outline is dashed</p>
```

上面的代码将产生以下效果：

另一个例子：

outline: multiple offsets;

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-offset |

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

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


padding-block - CSS：层叠样式表

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

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

尝试一下
----

属性构成
----

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

* `padding-block-end`
* `padding-block-start`
语法
--

```css
/\* <length> 值 \*/
padding-block: 10px 20px; /\* 绝对长度 \*/
padding-block: 1em 2em; /\* 相对于文本尺寸 \*/
padding-block: 10px; /\* 同时设置块首和块末值 \*/

/\* <percentage> 值 \*/
padding-block: 5% 2%; /\* 相对于最近包含区块的宽度 \*/

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

`padding-block` 属性可用一个或两个值指定。若给一值，则此值同时用于 `padding-block-start` 和 `padding-block-end`。若给两值，则第一个用于 `padding-block-start` 而第二个用于 `padding-block-end`。

### 取值

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

描述
--

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `padding-block-start`: `0`
* `padding-block-end`: `0`
 |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | as each of the properties of the shorthand:* `padding-block-start`: as `length`
* `padding-block-end`: as `length`
 |
| Animation type | a length |

形式语法
----
```

padding-block =
  <'padding-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-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}
```

#### 结果

规范
--

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

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

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

参见
--

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


:autofill - CSS：层叠样式表

:autofill
=========

**`:autofill`** CSS 伪类将在浏览器自动填充表单中的 `<input>` 元素的值时匹配该 input 元素。如果用户编辑了该字段，则该类将不再匹配。

尝试一下
----

**备注：** 许多浏览器的用户代理样式表在其 `:-webkit-autofill` 样式声明中使用 `!important`，使它们无法被网页覆盖，除非通过 JavaScript 的方式。例如，Chrome 在其内部样式表中有以下内容：

```css
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;
```

这意味着你无法在自己的样式规则中设置 `background-color`、`background-image` 或 `color` 等属性。

语法
--

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

示例
--

以下示例演示了如何使用 `:autofill` 伪类来更改浏览器自动填充后的文本框的边框。为了最佳的浏览器兼容性，建议同时使用 `:-webkit-autofill` 和 `:autofill` 伪类。

```css
input {
  border: 3px solid grey;
  border-radius: 3px;
}

input:-webkit-autofill {
  border: 3px solid blue;
}
input:autofill {
  border: 3px solid blue;
}
```

```html
<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>
```

规范
--

| Specification |
| --- |
| HTML Standard # selector-autofill |

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

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

参见
--

* Chromium issue 46543：自动填充输入文本框黄色背景高亮无法关闭
* WebKit bug 66032：允许网站开发者覆盖自动填充字段的颜色。
* Mozilla bug 740979：在具有自动填充值的输入元素上实现 `:-moz-autofill` 伪类
* 用户界面模块 Level 4：更多选择器


:first-child - CSS：层叠样式表

:first-child
============

**`:first-child`** CSS 伪类表示在一组兄弟元素中的第一个元素。

尝试一下
----

语法
--

```css
:first-child {
  /\* ... \*/
}
```

示例
--

### 基础示例

#### HTML

```html
<div>
  <p>此文本已选中！</p>
  <p>此文本未选中。</p>
</div>

<div>
  <h2>此文本未被选中：它不是一个 `p`。</h2>
  <p>此文本未被选中。</p>
</div>
```

#### CSS

```css
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```

#### 结果

### 样式化列表

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```

#### CSS

```css
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}
```

#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

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

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

参见
--

* `:-moz-first-node`
非标准
* `:first-of-type`
* `:last-child`
* `:nth-child()`


acos() - CSS：层叠样式表

acos()
======

CSS 函数 **`acos()`** 为三角函数，返回介于 `-1` 和 `1` 之间的数的反余弦值。此函数含有单个计算式，此式返回表示介于 `0deg` 和 `180deg` 之间的 `<angle>` 的弧度数。

语法
--

```css
/\* 单个 <number> 值 \*/
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

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

### 参数

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

`number`

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

### 返回值

`number` 的反余弦值总将返回介于 `0deg` 和 `180deg` 之间的 `<angle>`。

* 若 `number` 小于 `-1` 或大于 `1`，则结果为 `NaN`。
* 若 `number` 恰为 `1`，则结果为 `0`。
### 形式语法
```

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

```

示例
--

### 旋转元素

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

#### HTML

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

#### CSS
```

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

```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(acos(1));
}
div.box-2 {
  transform: rotate(acos(0.5));
}
div.box-3 {
  transform: rotate(acos(0));
}
div.box-4 {
  transform: rotate(acos(-0.5));
}
div.box-5 {
  transform: rotate(acos(-1));
}
```

#### 结果

规范
--

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

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

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

参见
--

* `sin()`
* `cos()`
* `tan()`
* `asin()`
* `atan()`
* `atan2()`


padding-top - CSS：层叠样式表

padding-top
===========

CSS 属性 **padding-top** 是指一个元素在内边距区域（padding area）中上方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。

![The effect of the CSS padding-top property on the element box](/files/4105/padding-top.svg)

```css
/\* <length> values \*/
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;

/\* <percentage> value \*/
padding-top: 10%;

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

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

语法规则
----

### 取值

`<length>`

当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。

`<percentage>`

当内边距（padding）是一个百分比的时候，百分比是和**包含块（containing block）的宽度**有关的，同样一定不能为负数。

### 正式语法
```

padding-top =
  <length-percentage [0,∞]>

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

```

实例
--

```css
.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 10px;
}
```

规范
--

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

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

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

参见
--

* CSS Box Model
* The `padding` shorthand property can be used to set paddings on all four sides of an element with a single declaration: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.


clamp() - CSS：层叠样式表

clamp()
=======

**`clamp()`** 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 `clamp()` 被用在 `<length>`、`<frequency>`、`<angle>`、`<time>`、`<percentage>`、`<number>`、`<integer>` 中都是被允许的。

`clamp(MIN, VAL, MAX)` 其实就是表示 ``max`(MIN, `min`(VAL, MAX))`

尝试一下
----

示例中 `clamp()` 用来设置随窗口大小改变的字体大小，但是无论窗口怎么改变，字体大小不会小于设置的最小值，也不会超过设置的最大值。这个效果和 Fluid Typography 一致，但只用了一行代码，且不需要媒体查询语句。

语法
--

`clamp()` 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。

当首选值比最小值要小时，则使用最小值。

当首选值介于最小值和最大值之间时，用首选值。

当首选值比最大值要大时，则使用最大值。

这个表达式可以是数学函数 (参看 `calc()` )、字面量或其他计算为有效的参数类型 (如`<length>`) 表达式，如 `attr()`，或嵌套的 `min()` 和 `max()` 。作为数学表达式，你可以使用加减乘除运算而无需使用 `calc()` 函数。你也可以用括号来确定计算顺序。

表达式中的每一个值都可以用不同的单位。

### 注意

* 在自动和固定布局表格中，涉及到列、列组、行、行组、单元格的宽度和高度中如果有百分比数学表达式，*也许*会被视为指定了 `auto` 。
* 允许设置表达式的值为 `max()` 和 `min()` 。这些表达式是数学表达式，所以你可以进行加减乘除运算。
* 表达式可以是使用标准运算符优先规则组合 `+` 、`-` 、`*`、`/` 等运算符的值，确保在 `+` 、`-` 两侧各有一个空格。表达式中的操作数可以是 `<length>` 语法值。你可以给每一个值设置不同的单位。你还可以用括号来确定计算顺序。
* Oftentimes you will want to use `min()` and `max()` within a `clamp()` function.你可能经常会在 `clamp()` 中使用 `min()` 和 `max()` 。
### 形式语法
```

<clamp()> =
  clamp( <calc-sum>#{3} )

<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

```

示例
--

### min, max, and clamp comparison

这个示例中，我们用 `min()`、`max()` 和 `clamp()` 实现一个简单的响应式效果。

`<body>` 元素的 `width` 设置为 `min(1000px, calc(70% + 100px))`。其含义是宽度设置为 `1000px`，当 `calc(70% + 100px)` 比 `1000px` 小时，宽度为 `calc(70% + 100px)` 。 `min()` 允许你设置一个上限值。

`<p>` 元素的 `font-size` 设置为 `max(1.2rem, 1.2vw)`。其含义是 `font-size` 是 `1.2rem`，当计算出 `1.2vw` 比 `1.2rem` 大时，则 `font-size` 为 `1.2vw` 。 `max()` 允许你设置一个下限值。

`<h1>` 元素的 `font-size` 设置为 `clamp(1.8rem, 2.5vw, 2.8rem)`.。其含义是 `font-size` 为 `1.8rem`，当计算出 `2.5vw` 比 `1.8rem` 大时，`font-size` 为 `2.5vw`，同时，当 `2.5vw` 计算出来的值比 `2.8rem` 大时，`font-size` 为 `2.8rem`。`clamp()` 允许你设置一个上限值和下限值。

感兴趣可以在 GitHub 上查看源码

#### HTML

```html
<h1>Simple responsive test</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
  eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
  eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
  Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
  libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
  lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
  risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
  imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
  Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
  vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
  Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
  nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>

<p>
  Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
  facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
  quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
  quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
```

#### CSS

```css
html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

继续阅读
----

* `calc()`
* `max()`
* `min()`
* CSS Values


mask-border - CSS：层叠样式表

mask-border
===========

CSS 属性 **`mask-border`** 允许你创建一个紧贴元素边框边缘的 mask。

该属性为以下属性的简写: `mask-border-source` (en-US), `mask-border-slice`, `mask-border-width`, `mask-border-outset` (en-US), `mask-border-repeat`, and `mask-border-mode`. 与其他简写的属性一样，任何一个漏写的子属性，将会被设置为他们的初始值.

语法
--

```css
/\* source | slice \*/
mask-border: url("border-mask.png") 25;

/\* source | slice | repeat \*/
mask-border: url("border-mask.png") 25 space;

/\* source | slice | width \*/
mask-border: url("border-mask.png") 25 / 35px;

/\* source | slice | width | outset | repeat | mode \*/
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;
```

### Values

`<'mask-border-source'>`

该属性为源图像。参见 `mask-border-source` (en-US).

`<'mask-border-slice'>`

将源图像切割后的区域的尺寸，最多可指定四个值。参见 `mask-border-slice`.

`<'mask-border-width'>`

边框 mask 的宽度。最多可指定四个值。参见 `mask-border-width`.

`<'mask-border-outset'>`

边框 mask 距离元素外边界的距离。最多可指定四个值。参见 `mask-border-outset` (en-US).

`<'mask-border-repeat'>`

定义如何调整源图像的边缘区域以适应边框 mask 的尺寸。最多可指定四个值。参见 `mask-border-repeat`.

`<'mask-border-mode'>`

定义是否将源图片设置为明亮度 mask，或者透明度 mask. 参见 `mask-border-mode`.

### 形式语法
```

mask-border =
  <'mask-border-source'>                              ||
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||
  <'mask-border-repeat'>                              ||
  <'mask-border-mode'>

```

示例
--

### Bitmap

在此范例中，我们将使用钻石图案来给元素添加 mask. mask 的源文件是一个 ".png" 文件，大小为 90 像素 \* 90 像素，三颗钻石垂直和水平交叉；

![](/zh-CN/docs/Web/CSS/mask-border/mask-border-diamonds.png)

#### HTML

```html
<div id="bitmap">
  This element is surrounded by a bitmap-based mask border! Pretty neat, isn't
  it?
</div>
```

#### CSS

为了适应一个钻石的大小，我们使用 90/3 或者 30，用于设置将图像切割至边角以及边缘区域的值，并设置 repeat 属性为 `round` ，该属性使得切片均匀贴合，例如：没有裁剪和空隙。

```css
div {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  mask-border: url("mask-border-diamonds.png") 30 / 36px 18px round;
}
```

#### 结果

规范
--

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

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `mask-border-mode`: `alpha`
* `mask-border-outset` (en-US): `0`
* `mask-border-repeat`: `stretch`
* `mask-border-slice`: `0`
* `mask-border-source` (en-US): `none`
* `mask-border-width`: `auto`
 |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `mask-border-slice`: refer to size of the mask border image
* `mask-border-width`: relative to width/height of the mask border image area
 |
| 计算值 | as each of the properties of the shorthand:* `mask-border-mode`: as specified
* `mask-border-outset` (en-US): as specified, but with relative lengths converted into absolute lengths
* `mask-border-repeat`: as specified
* `mask-border-slice`: as specified
* `mask-border-source` (en-US): as specified, but with `url` values made absolute
* `mask-border-width`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `mask-border-mode`: discrete
* `mask-border-outset` (en-US): discrete
* `mask-border-repeat`: discrete
* `mask-border-slice`: discrete
* `mask-border-source` (en-US): discrete
* `mask-border-width`: discrete
 |
| Creates stacking context | yes |

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

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


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

scroll-margin-left
==================

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

尝试一下
----

语法
--

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

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

### 取值

`<length>`

滚动容器的左外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-left =
  <length>

```

规范
--

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

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

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

参见
--

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


<angle> - CSS：层叠样式表

<angle>
=======

CSS 数据类型 **`<angle>`** 用于表示角的大小，单位为度（degrees）、百分度（gradians）、弧度（radians）或圈数（turns）。在 `<gradient>` 和 `transform` 的某些方法等场景中有所应用。

语法
--

`<angle>` 数据类型由 `<number>` 和下列单位组成。数字与单位之间没有空格。数字为 0 时，单位可以省略。

`<angle>` 可以使用 `+` 或 `-` 开头。正数表示顺时针的角，负数表示逆时针的角。对于静态的角，同样的角度可以使用任意等效的值表示。比如 `90deg` 等于 `-270deg`，`1turn` 等于 `4turn`。而对于动态的角，比如应用了 `animation` 或 `transition` 时，显示效果则不一样。

### 单位

`deg`

度。一个完整的圆是 `360deg`。例：`0deg`，`90deg`，`14.23deg`。

`grad`

百分度。一个完整的圆是 `400grad`。例：`0grad`，`100grad`，`38.8grad`。

`rad`

弧度。一个完整的圆是 2π 弧度，约等于 `6.2832rad`。`1rad` 是 180/π 度。例：`0rad`，`1.0708rad`，`6.2832rad`。

turn

圈数。一个完整的圆是 `1turn`。例：`0turn`，`0.25turn`，`1.2turn`。

示例
--

| Angle90.png | 直角：`90deg = 100grad = 0.25turn ≈ 1.5708rad` |
| --- | --- |
| Angle180.png | 平角：`180deg = 200grad = 0.5turn ≈ 3.1416rad` |
| AngleMinus90.png | 直角（逆时针）：`-90deg = -100grad = -0.25turn ≈ -1.5708rad` |
| Angle0.png | 零角：`0 = 0deg = 0grad = 0turn = 0rad` |

规范
--

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

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

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


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

border-bottom-style
===================

The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.

```css
/\* Keyword values \*/
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

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

**备注：** The specification doesn't define how borders of different styles connect in the corners.

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

Syntax
------

The `border-bottom-style` property is specified as a single keyword chosen from those available for the `border-style` property.

### Formal syntax
```

border-bottom-style =
  <line-style>

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

```

Examples
--------

这是一种可显示 border-bottom-style 所有属性的标签。

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* Define look of the table \*/
table {
  border-width: 3px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-bottom-style example classes \*/
.b1 {
  border-bottom-style: none;
}
.b2 {
  border-bottom-style: hidden;
}
.b3 {
  border-bottom-style: dotted;
}
.b4 {
  border-bottom-style: dashed;
}
.b5 {
  border-bottom-style: solid;
}
.b6 {
  border-bottom-style: double;
}
.b7 {
  border-bottom-style: groove;
}
.b8 {
  border-bottom-style: ridge;
}
.b9 {
  border-bottom-style: inset;
}
.b10 {
  border-bottom-style: outset;
}
```

#### Result

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

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

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

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

See also
--------

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


transition-duration - CSS：层叠样式表

transition-duration
===================

**`transition-duration`** 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 `0s`，表示不出现过渡动画。

可以指定多个时长，每个时长会被应用到由 `transition-property` 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。

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

语法
--

```css
/\* <time> 值 \*/
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/\* 全局值 \*/
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;
```

### 值

`<time>`

`<time>` 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 `0s` ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。

### 形式语法
```

transition-duration =
  <time [0s,∞]>#

```

示例
--

### 展示不同的延迟

#### HTML

```html
<div class="box duration-1">0.5 秒</div>

<div class="box duration-2">2 秒</div>

<div class="box duration-3">4 秒</div>

<button id="change">变换</button>
```

#### CSS

```css
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
}

.duration-1 {
  transition-duration: 0.5s;
}

.duration-2 {
  transition-duration: 2s;
}

.duration-3 {
  transition-duration: 4s;
}
```

#### JavaScript

```js
function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Transitions # transition-duration-property |

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

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

参见
--

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


:focus - CSS：层叠样式表

:focus
======

**`:focus`** CSS 伪类表示获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 `Tab` 键选择它时，它会被触发。

尝试一下
----

**备注：** 此伪类仅适用于焦点的元素自身。如果要选择*包含*焦点元素的元素，请使用 `:focus-within`。

语法
--

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

示例
--

### HTML

```html
<div><input class="red-input" value="当获得焦点时我将呈现红色。" /></div>
<div><input class="blue-input" value="当获得焦点时我将呈现蓝色。" /></div>
```

### CSS

```css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}
```

### 结果

无障碍考虑
-----

请确保视力不佳的人可以看到视觉焦点指示器。这也将有利于任何在明亮空间（如室外阳光下）使用屏幕的人。WCAG 2.1 SC 1.4.11 非文本对比度 要求视觉焦点指示符的对比度至少为 3 比 1。

* 无障碍的视觉焦点指示：让你的网站更具焦点！设计有用且可用的焦点指示器的技巧
### `:focus { outline: none; }`

永远不要为了仅移除焦点轮廓（可见的焦点指示），而不替换为符合 WCAG 2.1 SC 1.4.11 非文本对比度标准的焦点轮廓。

* 小建议：永远不要移除 CSS 轮廓
规范
--

| Specification |
| --- |
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |

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

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

参见
--

* `:focus-visible`
* `:focus-within`


<position> - CSS：层叠样式表

<position>
==========

CSS `<position>`（或 **`<bg-position>`**）数据类型表示用于设置相对于元素盒子的位置的 2 维空间中的坐标。它被用于 `background-position` 和 `offset-anchor` (en-US) 属性。

**备注：** 由 `<position>` 值表述的最终位置并不需要位于元素的盒子中。

语法
--

![显示各类值放置的网格。0 0 是左上角。right、right center、center left 100% 和 top 50% left 100%，这四个值是等价的都在垂直方向中间的右侧边缘。top 75px left 100px 和 left 100px top 75px，这两个值是相同的。bottom left 25% 与 top 100% left 25% 相同。](/zh-CN/docs/Web/CSS/position_value/position_type.png)

`<position>` 数据类型可用一个或两个关键字（可带有偏移量）指定。

关键字值为：中（`center`）、上（`top`）、右（`right`）、下（`bottom`）、左（`left`）。每个关键字代表元素盒子的边缘或两个边缘之间的中心线。根据上下文，`center` 可以表示左边缘和右边缘之间的中心，或者顶部边缘或底部边缘之间的中心。

如果指定了偏移量，其值可以是相对值 `<percentage>` 或绝对值 `<length>`。正值是向右或向下的偏移，取决于应用的边缘。负值则是在相反方向上的偏移。

如果仅指定单个偏移量，则用于指定 x 轴坐标，其他轴的值默认为 `center`。

```css
/\* 单值语法 \*/
keyword                  /\* 水平或垂直位置；另一个轴默认为 center \*/
value                    /\* x 轴上的位置；y 轴默认为 50% \*/

/\* 2 值语法 \*/
keyword keyword          /\* 每个方向一个关键字（顺序无关） \*/
keyword value            /\* 水平位置为关键字，垂直位置为值 \*/
value keyword            /\* 水平位置为值，垂直位置为关键字 \*/
value value              /\* 每个方向一个值（先水平然后垂直） \*/

/\* 4 值语法 \*/
keyword value keyword value /\* 每个值都是其前面的关键字的偏移量 \*/
```

**备注：** `background-position` 属性也接受三值语法。这无法在其他使用 `<position>` 的属性中使用。

插值
--

横坐标值和纵坐标值都独立进行插值。而由于两者插值速度都由同一缓动函数定义，点将沿一条直线移动。

形式语法
----
```

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

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

```

示例
--

### 有效位置值
```

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px
```

### 无效位置值
```

left right
bottom top
10px 15px 20px 15px
```

规范
--

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

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

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

参见
--

* CSS 值与单位
* CSS 值与单位介绍
* `background-position`
* `radial-gradient()`
* `conic-gradient()`