Webkit CSS 扩展 - CSS：层叠样式表

Webkit CSS 扩展
=============

基于 WebKit 或 Blink 的应用，例如 Safari 和 Chrome，支持一些特殊的 **CSS WebKit 扩展**。这些扩展通常带有 `-webkit-` 前缀。大多数 `-webkit-` 前缀的属性通常也能够与 `-apple-` 前缀使用。少部分是有 `-epub-` 前缀的。

仅 WebKit 具有的属性
--------------

**备注：** 避免在网站上使用。这些属性仅在 WebKit 应用中可用。

### A

* `-webkit-animation-trigger`
* `-webkit-app-region`
* `-webkit-aspect-ratio`
### B

* `-webkit-backdrop-filter`
* `-webkit-border-after`\*\*
* `-webkit-border-after-color`\*\*
* `-webkit-border-after-style`\*\*
* `-webkit-border-after-width`\*\*
* `-webkit-border-before`\*\*
* `-webkit-border-before-color`\*\*
* `-webkit-border-before-style`\*\*
* `-webkit-border-before-width`\*\*
* `-webkit-border-end`\*\*
* `-webkit-border-end-color`\*\*
* `-webkit-border-end-style`\*\*
* `-webkit-border-end-width`\*\*
* `-webkit-border-horizontal-spacing`
* `-webkit-border-start`\*\*
* `-webkit-border-start-color`\*\*
* `-webkit-border-start-style`\*\*
* `-webkit-border-start-width`\*\*
* `-webkit-border-vertical-spacing`
* `-webkit-box-align`\*\*
* `-webkit-box-direction`\*\*
* `-webkit-box-flex-group`\*\*
* `-webkit-box-flex`\*\*
* `-webkit-box-lines`\*\*
* `-webkit-box-ordinal-group`\*\*
* `-webkit-box-orient`\*\*
* `-webkit-box-pack`\*\*
* `-webkit-box-reflect`\*\*
### C

* `-webkit-column-axis`
* `-webkit-column-break-after`
* `-webkit-column-break-before`
* `-webkit-column-break-inside`
* `-webkit-column-progression`
* `-webkit-cursor-visibility`
### D-I

* `-webkit-dashboard-region`
* `-webkit-font-size-delta`
* `-webkit-font-smoothing`
* `-webkit-hyphenate-character`
* `-webkit-hyphenate-limit-after`
* `-webkit-hyphenate-limit-before`
* `-webkit-hyphenate-limit-lines`
* `-webkit-initial-letter`
### L

* `-webkit-line-align`
* `-webkit-line-box-contain`
* `-webkit-line-clamp`
* `-webkit-line-grid`
* `-webkit-line-snap`
* `-webkit-locale`
* `-webkit-logical-height`
* `-webkit-logical-width`
### M

* `-webkit-margin-after`
* `-webkit-margin-before`
* `-webkit-margin-end`\*\*
* `-webkit-margin-start`\*\*
* `-webkit-marquee-direction`
* `-webkit-marquee-increment`
* `-webkit-marquee-repetition`
* `-webkit-marquee-speed`
* `-webkit-marquee-style`
* `-webkit-marquee`
* `-webkit-mask-box-image-outset`
* `-webkit-mask-box-image-repeat`
* `-webkit-mask-box-image-slice`
* `-webkit-mask-box-image-source`
* `-webkit-mask-box-image-width`
* `-webkit-mask-box-image` (en-US)
* `-webkit-mask-repeat-x` (en-US)\*\*\*
* `-webkit-mask-repeat-y` (en-US)\*\*\*
* `-webkit-mask-source-type`
* `-webkit-mask-position-x` (en-US)
* `-webkit-mask-position-y` (en-US)
* `-webkit-max-logical-height`
* `-webkit-max-logical-width`
* `-webkit-min-logical-height`
* `-webkit-min-logical-width`
### N

* `-webkit-nbsp-mode`
### P

* `-webkit-padding-after`\*\*
* `-webkit-padding-before`\*\*
* `-webkit-padding-end`\*\*
* `-webkit-padding-start`\*\*
* `-webkit-perspective-origin-x`
* `-webkit-perspective-origin-y`
### R-S

* `-webkit-rtl-ordering`
* `-webkit-svg-shadow`
### T

* `-webkit-tap-highlight-color`
* `-webkit-text-decoration-skip`
* `-webkit-text-decorations-in-effect`
* `-webkit-text-fill-color`
* `-webkit-text-security` (en-US)
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
* `-webkit-text-zoom`
* `-webkit-transform-origin-x`
* `-webkit-transform-origin-y`
* `-webkit-transform-origin-z`
### U

* `-webkit-user-drag`
* `-webkit-user-modify`

 \* 一些是在标准的、无前缀的轨道上。
 \*\* 新语法已经标准化。属性链接到新的语法。旧的带有前缀的语法在一些浏览器中依然支持。
 \*\*\* WebKit 支持不带 `-webkit` 前缀，但是不标准或者不在标准轨道上。

标准轨道上的带有 WebKit 前缀的属性
---------------------

* `-webkit-appearance`
* `-webkit-font-size-delta`
已经成为标准属性的前专有属性
--------------

**备注：** 要尽可能地提高兼容性，你需要使用无前缀的标准属性，而不是下面列出的这些有前缀的。

### A

* `-webkit-align-content`
* `-webkit-align-items`
* `-webkit-align-self`
* `-webkit-animation`
* `-webkit-animation-delay`
* `-webkit-animation-direction`
* `-webkit-animation-duration`
* `-webkit-animation-fill-mode`
* `-webkit-animation-iteration-count`
* `-webkit-animation-name`
* `-webkit-animation-play-state`
* `-webkit-animation-timing-function`
* `-webkit-appearance`
### B

* `-webkit-backface-visibility`
* `-webkit-background-clip`
* `-webkit-background-origin`
* `-webkit-background-size`
* `-webkit-border-bottom-left-radius`
* `-webkit-border-bottom-right-radius` (en-US)
* `-webkit-border-image`
* `-webkit-border-radius`
* `-webkit-border-top-left-radius`
* `-webkit-border-top-right-radius`
* `-webkit-box-decoration-break`
* `-webkit-box-shadow`
* `-webkit-box-sizing`
### C

* `-webkit-clip-path`
* `-webkit-column-count`
* `-webkit-column-fill` (en-US)
* `-webkit-column-gap`
* `-webkit-column-rule`
* `-webkit-column-rule-color`
* `-webkit-column-rule-style`
* `-webkit-column-rule-width`
* `-webkit-column-span`
* `-webkit-column-width` (en-US)
* `-webkit-columns`
### F

* `-webkit-filter`
* `-webkit-flex`
* `-webkit-flex-basis`
* `-webkit-flex-direction`
* `-webkit-flex-flow`
* `-webkit-flex-grow`
* `-webkit-flex-shrink`
* `-webkit-flex-wrap`
* `-webkit-font-feature-settings`
* `-webkit-font-kerning`
* `-webkit-font-variant-ligatures`
### G-J

* `-webkit-grid`
* `-webkit-grid-area`
* `-webkit-grid-auto-columns`
* `-webkit-grid-auto-flow`
* `-webkit-grid-auto-rows`
* `-webkit-grid-column`
* `-webkit-grid-column-end` (en-US)
* `-webkit-grid-column-gap`
* `-webkit-grid-column-start` (en-US)
* `-webkit-grid-gap`
* `-webkit-grid-row`
* `-webkit-grid-row-end` (en-US)
* `-webkit-grid-row-gap`
* `-webkit-grid-row-start` (en-US)
* `-webkit-grid-template`
* `-webkit-grid-template-areas`
* `-webkit-grid-template-columns`
* `-webkit-grid-template-rows`
### H-L

* `-webkit-hyphens`
* `-webkit-justify-content`
* `-webkit-justify-items`
* `-webkit-justify-self`
* `-webkit-line-break`
### M

* `-webkit-mask`
* `-webkit-mask-clip` (en-US)
* `-webkit-mask-composite` (en-US)
* `-webkit-mask-image`
* `-webkit-mask-origin` (en-US)
* `-webkit-mask-position` (en-US)
* `-webkit-mask-repeat`
* `-webkit-mask-size` (en-US)
### O-R

* `-webkit-opacity`
* `-webkit-order`
* `-webkit-perspective`
* `-webkit-perspective-origin`
* `-webkit-print-color-adjust` (en-US)
* `-webkit-ruby-position` (en-US)
### S

* `-webkit-scroll-snap-type`
* `-webkit-shape-image-threshold`
* `-webkit-shape-margin`
* `-webkit-shape-outside`
### T

* `-webkit-text-combine` (en-US)
* `-epub-text-decoration`
* `-webkit-text-color-decoration`
* `-webkit-text-decoration-line`
* `-webkit-text-decoration-style`
* `-epub-text-emphasis` (en-US)
* `-webkit-text-emphasis` (en-US)
* `-epub-text-emphasis-color` (en-US)
* `-webkit-text-emphasis-color` (en-US)
* `-webkit-text-emphasis-position` (en-US)
* `-epub-text-emphasis-style` (en-US)
* `-webkit-text-emphasis-style` (en-US)
* `-webkit-text-justify`
* `-webkit-text-orientation`
* `-webkit-text-size-adjust`
* `-webkit-text-underline-position`
* `-webkit-transform`
* `-webkit-transform-origin`
* `-webkit-transform-style`
* `-webkit-transition`
* `-webkit-transition-delay`
* `-webkit-transition-duration`
* `-webkit-transition-property`
* `-webkit-transition-timing-function`
### U-W

* `-webkit-user-select`
* `-epub-word-break`
* `-epub-writing-mode`
在非 webkit 浏览器中不带前缀支持，但是非标准
--------------------------

以下的属性在至少一个浏览器中不带前缀就支持，但是不在标准的轨道上。

* `-webkit-mask-position-x`\*
* `-webkit-mask-position-y`\*

\* 在 Firefox 中不带前缀支持，在 Safari 中带前缀。

在 Firefox 中带 `-webkit-` 前缀支持
----------------------------

以下属性在 Firefox 中带 `-webkit-` 前缀支持，其中许多也支持无前缀版本。参见上面的已经成为标准属性的前专有属性。

**备注：** 由于许多网站的旧版代码使用了以 -webkit- 为前缀的属性，Edge 和 Firefox 会将许多 -webkit- 为前缀的属性重定向到 -moz-、-ms- 和相应的没有前缀的等价属性上。

### A

* `-webkit-align-content`
* `-webkit-align-items`
* `-webkit-align-self`
* `-webkit-animation`
* `-webkit-animation-delay`
* `-webkit-animation-direction`
* `-webkit-animation-duration`
* `-webkit-animation-fill-mode`
* `-webkit-animation-iteration-count`
* `-webkit-animation-name`
* `-webkit-animation-play-state`
* `-webkit-animation-timing-function`
* `-webkit-appearance`\*
### B

* `-webkit-backface-visibility`
* `-webkit-background-clip`
* `-webkit-background-origin`
* `-webkit-background-size`
* `-webkit-border-bottom-left-radius`
* `-webkit-border-bottom-right-radius` (en-US)
* `-webkit-border-image`
* `-webkit-border-radius`
* `-webkit-box-align` (en-US)\*\*, \*\*\*
* `-webkit-box-direction` (en-US)\*\*, \*\*\*
* `-webkit-box-flex` (en-US)\*\*, \*\*\*
* `-webkit-box-orient`\*\*, \*\*\*
* `-webkit-box-pack` (en-US)\*\*, \*\*\*
* `-webkit-box-shadow`
* `-webkit-box-sizing`
* `-webkit-border-top-left-radius`
* `-webkit-border-top-right-radius`
### F

* `-webkit-filter`
* `-webkit-flex`
* `-webkit-flex-basis`
* `-webkit-flex-direction`
* `-webkit-flex-flow`
* `-webkit-flex-grow`
* `-webkit-flex-shrink`
* `-webkit-flex-wrap`
### J

* `-webkit-justify-content`
### M

* `-webkit-mask`
* `-webkit-mask-clip` (en-US)
* `-webkit-mask-composite` (en-US)\*
* `-webkit-mask-image`
* `-webkit-mask-origin` (en-US)
* `-webkit-mask-position` (en-US)
* `-webkit-mask-position-x` (en-US)\*\*
* `-webkit-mask-position-y` (en-US)\*\*
* `-webkit-mask-repeat`
* `-webkit-mask-size` (en-US)
### O-P

* `-webkit-order`
* `-webkit-perspective`
* `-webkit-perspective-origin`
### T

* `-webkit-text-fill-color`\*\*
* `-webkit-text-size-adjust`
* `-webkit-text-stroke`\*\*
* `-webkit-text-stroke-color`\*\*
* `-webkit-text-stroke-width`\*\*
* `-webkit-transform`
* `-webkit-transform-origin`
* `-webkit-transition`
* `-webkit-transition-delay`
* `-webkit-transition-duration`
* `-webkit-transition-property`
* `-webkit-transition-timing-function`
### U

* `-webkit-user-select`

 \* 在 Firefox 中支持有 `-moz-` 和 `-webkit-` 前缀的版本，但是不支持无前缀版本。
 \*\* 这些值是支持的，尽管不是标准的且也不在成为标准的轨道上。
 \*\*\* 应该使用 flex-box 属性。

弃用的 `-webkit-` 属性
-----------------

以下属性曾经带 -webkit- 前缀支持，但是在常新浏览器（evergreen browser）中不再支持，无论有无 `-webkit-` 前缀。

* `-webkit-alt*`
* `-webkit-background-composite`
* `-webkit-border-fit`
* `-webkit-color-correction`
* `-webkit-flow-from`
* `-webkit-flow-into`
* `-webkit-grid-columns`（参见 `grid-column`）
* `-webkit-grid-rows`（参见 `grid-row`）
* `-webkit-highlight`
* `-webkit-hyphenate-charset`
* `-webkit-image-set`（参见 `image-set` (en-US)）
* `-webkit-mask-attachment`
* `-webkit-match-nearest-mail-blockquote-color`
* `-webkit-margin-collapse`
* `-webkit-margin-after-collapse`
* `-webkit-margin-before-collapse`
* `-webkit-margin-bottom-collapse`
* `-webkit-margin-top-collapse`
* `-webkit-overflow-scrolling`
* `-webkit-region-break-after`
* `-webkit-region-break-before`
* `-webkit-region-break-inside`
* `-webkit-region-fragment`
* `-webkit-shape-inside`
* -webkit-touch-callout（参见 `touch-action`）
* `background-origin-x`（无前缀！）
* `background-origin-y`（无前缀！）

\* 仍在 Safari 技术预览版中支持，但是通常在正式发布的浏览器中不支持。

伪类
--

* `:-webkit-animating-full-screen-transition`
* `:-webkit-any()`
* `:-webkit-any-link`\*
* `:-webkit-autofill`
* `:-webkit-autofill-strong-password`
* `:-webkit-drag`
* `:-webkit-full-page-media`
* `:-webkit-full-screen`\*
* `:-webkit-full-screen-ancestor`
* `:-webkit-full-screen-document`
* `:-webkit-full-screen-controls-hidden`

\* 现为标准。

**备注：** 如果在选择器的链或组中有一个无效的伪类，那么整个选择器列表都是无效的。

伪元素
---

由于网页兼容性的原因，Blink、WebKit 和 Gecko 浏览器将所有以 `::-webkit-` 开头的伪类都视为有效的。

* `::-webkit-file-upload-button`\*
* `::-webkit-inner-spin-button` (en-US)
* `::-webkit-input-placeholder`
* `::-webkit-media-controls`
* `::-webkit-media-controls-current-time-display`
* `::-webkit-media-controls-enclosure`
* `::-webkit-media-controls-fullscreen-button`
* `::-webkit-media-controls-mute-button`
* `::-webkit-media-controls-overlay-enclosure`
* `::-webkit-media-controls-panel`
* `::-webkit-media-controls-play-button`
* `::-webkit-media-controls-timeline`
* `::-webkit-media-controls-time-remaining-display`
* `::-webkit-media-controls-toggle-closed-captions-button`
* `::-webkit-media-controls-volume-control-container`
* `::-webkit-media-controls-volume-control-hover-background`
* `::-webkit-media-controls-volume-slider`
* `::-webkit-meter-bar` (en-US)
* `::-webkit-meter-even-less-good-value` (en-US)
* `::-webkit-meter-inner-element` (en-US)
* `::-webkit-meter-optimum-value` (en-US)
* `::-webkit-meter-suboptimum-value` (en-US)
* `-webkit-media-text-track-container`
* `::-webkit-outer-spin-button` (en-US)
* `::-webkit-progress-bar`
* `::-webkit-progress-inner-element`
* `::-webkit-progress-value`
* `::-webkit-search-cancel-button` (en-US)
* `::-webkit-search-results-button` (en-US)
* `::-webkit-slider-runnable-track`
* `::-webkit-slider-thumb`

\* 现为标准

**备注：** 通常来说，如果在选择器的链或组中有一个无效的伪元素或者伪类，那么整个选择器列表都是无效的。如果伪元素（不是伪类）有 -webkit- 前缀，那么自 Firefox 版本 63 起，Blink、WebKit 和 Gecko 浏览器都假定其为有效的，不会使整个选择器列表无效。

媒体特性
----

* `-webkit-animation` (en-US)
* `-webkit-device-pixel-ratio`
* `-webkit-transform-2d` (en-US)
* `-webkit-transform-3d` (en-US)
* `-webkit-transition` (en-US)
参见
--

* 在 WebKit Trac 上设计表单控件的样式
* Mozilla CSS 扩展 (en-US)


<display-internal> - CSS：层叠样式表

<display-internal>
==================

一些布局模型，例如 `table` 和 `ruby`具有复杂的内部结构，具有他们的孩子和后代可以填充的几个不同的角色。此页面定义了那些“内部”显示值，这些值仅在该特定布局模式中具有意义。

语法
--

除非另有说明，否则使用这些显示值的元素的内部显示类型和外部显示类型都将设置为给定的关键字。

`table-row-group`

这些元素的行为类似于`<tbody>`HTML 元素。

`table-header-group`

这些元素的行为类似于`<thead>`HTML 元素。

`table-footer-group`

这些元素的行为类似于`<tfoot>`HTML 元素。

`table-row`

这些元素的行为类似于`<tr>`HTML 元素。

`table-cell`

这些元素的行为类似于`<td>` (en-US)HTML 元素。

`table-column-group`

这些元素的行为类似于`<colgroup>`HTML 元素。

`table-column`

这些元素的行为类似于`<col>`HTML 元素。

`table-caption`

这些元素的行为类似于`<caption>`HTML 元素。

`ruby-base`
实验性

这些元素的行为类似于`<rb>`HTML 元素。

`ruby-text`
实验性

这些元素的行为类似于`<rt>`HTML 元素。

`ruby-base-container`
实验性

这些元素的行为类似于`<rbc>`匿名框生成的 HTML 元素。

`ruby-text-container`
实验性

这些元素的行为类似于`<rtc>`HTML 元素。

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

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

参见
--

* `display`
    + `<display-outside>`
    + `<display-inside>` (en-US)
    + `<display-listitem>` (en-US)
    + `<display-box>`
    + `<display-legacy>`


bottom - CSS：层叠样式表

bottom
======

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

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

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

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

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

语法
--
```

/* <length> values */
bottom: 3px;
bottom: 2.4em;

/* <percentage>s of the height of the containing block */
bottom: 10%;

/* Keyword value */
bottom: auto;

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

### 值

* 对于**绝对定位的元素**，元素下外边距边界与其包含块下边界之间的偏移。
* 对于**相对定位定位的元素**，元素的下边界离开其正常位置的偏移。
* `<length>`
    + : 一个负值、空值或正值，代表了：
* `<percentage>`
    + : 包含块高度的百分比`<percentage>`。
* `auto`
    + : 规定：
        - 对于绝对定位元素，元素将忽略此属性而以`top`属性为准，如果此时设置`height: auto`，将基于内容需要的高度设置宽度；如果`top`也为`auto`的话，元素的垂直位置就是它假如作为静态 (即 static) 元素时该在的位置。
        - 对于相对定位元素，元素相对正常位置的偏移量将基于`top`属性；如果`top`也为`auto`的话，元素将不会有偏移。
* `inherit`
    + : 指代有明确计算结果的父级元素的值，（需要注意的是，父级元素并不一定是包裹该子元素的块级元素）。该值会根据父级元素的具体情况被处理为`<length>`, `<percentage>`或者`auto`。
### Formal syntax
```

bottom =
  auto                 |
  <length-percentage>

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

```

示例
--

下面的例子分别展示了`bottom`属性在`position`为`absolute`和`fixed`的不同行为。

### HTML

```html
<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>
```

### CSS

```css
p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgba(55, 55, 55, 0.2);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
```

### 结果

规范
--

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

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

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


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

grid-auto-columns
=================

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

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

* Learn more
* See full compatibility
* Report feedback
CSS 属性 **`grid-auto-columns`** 指定了隐式创建的网格纵向轨道（track）的宽度。

尝试一下
----

如果一个表格项目被定位在没有使用 `grid-template-columns` 显式指定尺寸的列中，隐式的 grid 轨道就会被创建出来支撑它。显式地定位到超出范围的列中，或者通过自动布局算法创建额外的列，就会发生上述情况。

语法
--

```css
/\* 以下是不同类型的属性值示例 \*/
/\* Keyword values \*/
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

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

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

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

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

/\* fit-content() values \*/
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

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

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

### 属性值

`<length>`

指定一个非负的数作为尺寸。

`<percentage>`

一个非负的百分数（`<percentage>`），相对于 grid 容器的尺寸。如果 grid 的尺寸不确定，该百分值就会被当作 `auto` 对待。

`<flex>`

一个以 `fr` 为单位非负的尺寸，表示轨道的伸缩系数。每个以 `<flex>` 定义尺寸的轨道会以该伸缩系数为比例来占据剩余的可用空间。如果使用 `minmax()`，则表示自动缩小并指定最大尺寸（也就是 `minmax(auto, <flex>)`）。

`max-content`

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

`min-content`

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

`minmax(min, max)`

定义一个尺寸范围，即大于或等于 min 值，并且小于或等于 max 值。如果 max 值小于 min 值，那么 max 值会被忽略并且最终表现为 min 值。最大值可以设置为网格轨道系数值`<flex>` ，但最小值则不行。

`fit-content(argument)`

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

`auto`

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

Note: `auto` 轨道尺寸 (且只为 `auto` 值时) 才可以被 `align-content` 和 `justify-content` 属性拉伸。

### 形式语法
```

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

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

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

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

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

```

示例
--

### HTML

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

### CSS

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

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

规范
--

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

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

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

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

参见
--

* Related CSS properties: `grid-auto-rows`, `grid-auto-flow`, `grid`
* Grid Layout Guide: *Auto-placement in grid layout - sizing rows in the implicit grid*
* Video tutorial: *Introducing Grid auto-placement and order*


backface-visibility - CSS：层叠样式表

backface-visibility
===================

CSS 属性 **`backface-visibility`** 指定当元素背面朝向观察者时是否可见。

尝试一下
----

元素的背面是其正面的镜像。虽然在 2D 中不可见，但是当变换导致元素在 3D 空间中旋转时，背面可以变得可见。 （此属性对 2D 变换没有影响，它没有透视。）

语法
--

```css
/\* 关键字值 \*/
backface-visibility: visible;
backface-visibility: hidden;

/\* 全局值 \*/
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;
```

`backface-visibility` 属性可以指定为下面列出的值

### 值

`visible`

背面朝向用户时可见。

`hidden`

背面朝向用户时不可见。

### 形式定义

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

### 形式语法
```

backface-visibility =
  visible  |
  hidden

```

示例
--

### 具有透明和不透明面的立方体

这个例子展示了一个透明面的立方体和一个不透明面的立方体。

#### HTML

```html
<table>
  <tr>
    <th><code>backface-visibility: visible;</code></th>
    <th><code>backface-visibility: hidden;</code></th>
  </tr>
  <tr>
    <td>
      <div class="container">
        <div class="cube showbf">
          <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>
      <p>
        由于所有的面都是部分透明的，所以背面（2、4、5）可以透过前面（1、3、6）看到。
      </p>
    </td>
    <td>
      <div class="container">
        <div class="cube hidebf">
          <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>
      <p>后面的三个面（2、4、5）被隐藏了。</p>
    </td>
  </tr>
</table>
```

#### CSS

```css
/\* Classes that will show or hide the
 three back faces of the "cube" \*/
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

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

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  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);
}

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

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

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

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

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

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

#### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # backface-visibility-property |

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

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

参见
--

* 使用 CSS 变换


unicode-bidi - CSS：层叠样式表

unicode-bidi
============

CSS **`unicode-bidi`** 属性，和 `direction` 属性，决定如何处理文档中的双书写方向文本（bidirectional text）。比如，如果一块内容同时包含有从左到右书写和从右到左书写的文本，那么用户代理（the user-agent）会使用复杂的 Unicode 算法来决定如何显示文本。`unicode-bidi` 属性会覆盖此算法，允许开发人员控制文本嵌入（text embedding）。

`unicode-bidi` 与 `direction` 是仅有的两个不受 `all` 简写影响的属性。

**警告：** 此属性是文档类型定义（Document Type Definition, DTD）的设计者专用的。Web 设计者与其他类似的人员不应覆盖此属性。

```css
/\* 关键字值 \*/
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;
/\* 全局值 \*/
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: unset;
```

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements, though some values have no effect on non-inline elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

语法
--

### 值

`normal`

对双向算法，此元素不提供额外的嵌入级别。对于内联元素，隐式的重新排序在元素的边界上起作用。

`embed`

对于内联元素，该值会为双向算法打开一个额外的嵌入级别。嵌入级别的方向是由 `direction` 属性给出的。

`bidi-override`

对于内联元素，该值会创建一个覆盖；对于块容器元素，该值将为不在另一个块容器元素内的内联级别的后代创建一个覆盖。这意味着在元素内部，根据 `direction` 属性，重新排序是严格按照顺序排列的；双向算法的隐式部分被忽略。

`isolate`

这个关键字表示计算元素容器的方向时，不考虑这个元素的内容。因此，这个元素就从它的兄弟姐妹中分离出来了。当应用它的双向分辨算法的时候，它的容器元素将其视为一个或多个 `U+FFFC Object Replacement Character`，即像 image 一样。

`isolate-override`

这个关键字将 `isolate` 关键字的隔离行为应用于周围的内容，并将 `bidi-override` 关键字的覆盖行为应用于内部内容。

`plaintext`

 这个关键字在计算元素方向的时候，不考虑父元素的双向状态，也不考虑 `direction` 属性的值。它是使用 Unicode 双向算法的 P2 和 P3 规则计算的。
 这个值允许按照 Unicode 双向算法显示已经格式化的数据。

### 形式语法
```

unicode-bidi =
  normal            |
  embed             |
  isolate           |
  bidi-override     |
  isolate-override  |
  plaintext

```

示例
--

### CSS

```css
.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}
```

### HTML

```html
<div class="bible-quote">A line of text</div>
<div>Another line of text</div>
```

### 结果

规范
--

| Specification |
| --- |
| CSS Writing Modes Level 4 # unicode-bidi |

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

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

参见
--

* `direction`


list-style-position - CSS：层叠样式表

list-style-position
===================

**`list-style-position`** 属性指定标记框在主体块框中的位置。

使用助记符`list-style`更方便。

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

语法
--

```css
/\* Keyword values \*/
list-style-position: inside;
list-style-position: outside;

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

### 数值

`outside`

标记盒在主块盒的外面。

`inside`

标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后。

### Formal syntax
```

list-style-position =
  inside   |
  outside

```

例子
--

### HTML

```html
<ul class="one">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="two">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="three">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>
```

### CSS

```css
.one {
  list-style: square inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url("starsolid.gif");
  list-style-position: inherit;
}
```

### Result

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-position-property |

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

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

See also
--------

* `list-style`, `list-style-type`, `list-style-image`


transform-origin - CSS：层叠样式表

transform-origin
================

**`transform-origin`** CSS 属性让你更改一个元素变形的原点。

尝试一下
----

转换起点是应用转换的点。例如，`rotate()`函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）

默认的转换原点是 `center`

语法
--

```css
/\* One-value syntax \*/
transform-origin: 2px;
transform-origin: bottom;

/\* x-offset | y-offset \*/
transform-origin: 3cm 2px;

/\* x-offset-keyword | y-offset \*/
transform-origin: left 2px;

/\* x-offset-keyword | y-offset-keyword \*/
transform-origin: right top;

/\* y-offset-keyword | x-offset-keyword \*/
transform-origin: top right;

/\* x-offset | y-offset | z-offset \*/
transform-origin: 2px 30% 10px;

/\* x-offset-keyword | y-offset | z-offset \*/
transform-origin: left 5px -3px;

/\* x-offset-keyword | y-offset-keyword | z-offset \*/
transform-origin: right bottom 2cm;

/\* y-offset-keyword | x-offset-keyword | z-offset \*/
transform-origin: bottom right 2cm;

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

`transform-origin`属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值。

如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是`center`，则第一个值表示水平偏移量，第二个值表示垂直偏移量。

* 一个值：
    + 必须是`<length>`，`<percentage>`，或 `left`, `center`, `right`, `top`, `bottom`关键字中的一个。
* 两个值：
    + 其中一个必须是`<length>`，`<percentage>`，或`left`, `center`, `right`关键字中的一个。
    + 另一个必须是`<length>`，`<percentage>`，或`top`, `center`, `bottom`关键字中的一个。
* 三个值：
    + 前两个值和只有两个值时的用法相同。
    + 第三个值必须是`<length>`。它始终代表 Z 轴偏移量。
### 值

*x-offset*

定义变形中心距离盒模型的左侧的`<length>`或`<percentage>`偏移值。

*offset-keyword*

`left`，`right`，`top`，`bottom` 或 `center` 中之一，定义相对应的变形中心偏移。

*y-offset*

定义变形中心距离盒模型的顶的`<length>`或`<percentage>`偏移值。

*x-offset-keyword*

`left`，`right` 或 `center` 中之一，定义相对应的变形中心偏移。

*y-offset-keyword*

`top`，`bottom` 或 `center` 中之一，定义相对应的变形中心偏移。

*z-offset*

定义变形中心距离用户视线（z=0 处）的`<length>`（不能是`<percentage>`）偏移值。

关键字是方便的简写方法，等同于以下`<percentage>`值：

| keyword | value |
| --- | --- |
| `left` | `0%` |
| `center` | `50%` |
| `right` | `100%` |
| `top` | `0%` |
| `bottom` | `100%` |

### 形式语法
```

transform-origin =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>?  |
  [ [ center | left | right ] && [ center | top | bottom ] ] <length>?

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

```

示例
--

| Code | Sample |
| --- | --- |
| `transform: none;` |

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

```css
.box1 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: none;
-webkit-transform: none;
}
```

 |
| `transform: rotate(30deg);` |

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

```css
.box2 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
```

 |
| `transform: rotate(30deg);transform-origin: 0 0;` |

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

```css
.box3 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
```

 |
| `transform: rotate(30deg);transform-origin: 100% 100%;` |

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

```css
.box4 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
```

 |
| `transform: rotate(30deg);transform-origin: -1em -3em;` |

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

```css
.box5 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: -1em -3em;
-webkit-transform-origin: -1em -3em;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
```

 |
| `transform: scale(1.7);` |

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

```css
.box6 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.7);
-webkit-transform: scale(1.7);
}
```

 |
| `transform: scale(1.7);transform-origin: 0 0;` |

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

```css
.box7 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.7);
-webkit-transform: scale(1.7);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
```

 |
| `transform: scale(1.7);transform-origin: 100% -30%;` |

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

```css
.box8 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.7);
-webkit-transform: scale(1.7);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
```

 |
| `transform: skewX(50deg);transform-origin: 100% -30%;` |

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

```css
.box9 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewX(50deg);
-webkit-transform: skewX(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
```

 |
| `transform: skewY(50deg);transform-origin: 100% -30%;` |

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

```css
.box10 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewY(50deg);
-webkit-transform: skewY(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
```

 |

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-origin-property |

|  |  |
| --- | --- |
| 初始值 | `50% 50% 0` |
| 适用元素 | 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.

参见
--

* 使用 CSS 变形 (en-US)


background-color - CSS：层叠样式表

background-color
================

概览
--

CSS属性中的 **background-color** 会设置元素的背景色，属性的值为颜色值或关键字"transparent"二者选其一。

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

语法
--

```css
/\* Keyword values \*/
background-color: red;

/\* Hexadecimal value \*/
background-color: #bbff00;

/\* RGB value \*/
background-color: rgb(255, 255, 128);

/\* HSLA value \*/
background-color: hsla(50, 33%, 25%, 0.75);

/\* Special keyword values \*/
background-color: currentColor;
background-color: transparent;

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

`background-color` 属性只能使用 `<color>` 值。

### 取值

`<color>`

一个描述背景统一颜色的 CSS `<color>` 值。即使一个或几个的 `background-image` 被定义，如果图像是不透明的，通过透明度该颜色也能影响到渲染。在 CSS 中，`transparent` 是一种颜色。

### 正式语法
```

background-color =
  <color>

```

示例
--

### HTML

```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS

```css
.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### 结果

规范
--

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

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

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

参见
--

* Multiple backgrounds


justify-content - CSS：层叠样式表

justify-content
===============

CSS **`justify-content`** 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

下面的交互示例演示了使用网格布局的一些值。

尝试一下
----

当 length 属性和自动外边距属性生效之后，对齐已经完成了。也就是说，如果弹性布局中存在至少一个弹性元素，而且这个元素的 `flex-grow` 属性不等于 `0`，那么对齐方式不会生效，就像没有多余空间的情况。

语法
--

```css
/\* Positional alignment \*/
justify-content: center; /\* 居中排列 \*/
justify-content: start; /\* Pack items from the start \*/
justify-content: end; /\* Pack items from the end \*/
justify-content: flex-start; /\* 从行首起始位置开始排列 \*/
justify-content: flex-end; /\* 从行尾位置开始排列 \*/
justify-content: left; /\* Pack items from the left \*/
justify-content: right; /\* Pack items from the right \*/

/\* Baseline alignment \*/
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/\* Distributed alignment \*/
justify-content: space-between; /\* 均匀排列每个元素
 首个元素放置于起点，末尾元素放置于终点 \*/
justify-content: space-around; /\* 均匀排列每个元素
 每个元素周围分配相同的空间 \*/
justify-content: space-evenly; /\* 均匀排列每个元素
 每个元素之间的间隔相等 \*/
justify-content: stretch; /\* 均匀排列每个元素
 'auto'-sized 的元素会被拉伸以适应容器的大小 \*/

/\* Overflow alignment \*/
justify-content: safe center;
justify-content: unsafe center;

/\* Global values \*/
justify-content: inherit;
justify-content: initial;
justify-content: unset;
```

### 值

`start`

从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。

`end`

从行尾开始排列。每行最后一个元素与行尾对齐，同时所有前面的元素与后一个对齐。

`flex-start`

元素紧密地排列在弹性容器的主轴起始侧。仅应用于弹性布局的项目。对于不是弹性容器里的元素，此值将被视为 `start`。

`flex-end`

元素紧密地排列在弹性容器的主轴结束侧。仅应用于弹性布局的元素。对于不是弹性容器里的元素，此值将被视为 `end`。

`center`

伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。

`left`

伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则 `left` 的行为类似于 `start`。

`right`

元素以容器右边缘为基准，一个挨着一个对齐，如果属性轴与内联轴不平行，则 `right` 的行为类似于 `end`。

`space-between`

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

`space-around`

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

`space-evenly`

flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。

`stretch`

如果元素沿主轴的组合尺寸小于对齐容器的尺寸，任何尺寸设置为 `auto` 的元素都会等比例地增加其尺寸（而不是按比例增加），同时仍然遵守由 `max-height`/`max-width`（或相应功能）施加的约束，以便沿主轴完全填充对齐容器的组合尺寸。

**备注：** 虽然弹性盒子支持 `stretch` 属性，但将其应用于弹性盒子时，由于拉伸是由 `flex` 属性控制的，所以 `stretch` 的行为与 `start` 相同。

`safe`

如果元素溢出对齐容器，则元素将按照对齐模式为 `start` 进行对齐。所期望的对齐将不会被实现。

`unsafe`

即使元素溢出对齐容器，也会实现所需的对齐方式。与 `safe` 不同，`safe` 会忽略所要求的对齐方式以防止溢出。

形式定义
----

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

形式语法
----
```

justify-content =
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]

<content-distribution> =
  space-between  |
  space-around   |
  space-evenly   |
  stretch

<overflow-position> =
  unsafe  |
  safe

<content-position> =
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

```

示例
--

### CSS

```css
#container {
  display: flex;
  justify-content: space-between; /\* Can be changed in the live sample \*/
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
```

```
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="baseline">baseline</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>
```

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

### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # justify-content-property |

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

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

参考
--

* 使用 CSS 弹性元素 (en-US)


CSS Transforms - CSS：层叠样式表

CSS Transforms
==============

**CSS Transforms** 是一个 CSS 模块，它定义了如何在二维或三维空间中转换元素的 CSS 样式。

引用参考
----

### CSS 属性

* `backface-visibility`
* `perspective`
* `perspective-origin`
* `transform`
* `transform-box`
* `transform-origin`
* `transform-style`
使用指南
----

CSS transforms 使用

循序渐进的教程，教你如何使用 CSS 对进行元素变形处理。

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1  |
| CSS Transforms Module Level 2  |


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

类选择器
====

CSS **类选择器**根据 `class` 属性的内容匹配元素。

```css
/\* 所有含有 class="spacious" 类的元素 \*/
.spacious {
  margin: 2em;
}

/\* 所有含有 class="spacious" 类的 <li> 元素 \*/
li.spacious {
  margin: 2em;
}

/\* 所有同时含有“spacious”和“elegant”类的 <li> 元素 \*/
/\* 例如 class="elegant retro spacious" \*/
li.spacious.elegant {
  margin: 2em;
}
```

语法
--

```css
.类名 { 样式声明 }
```

注意它与下面的`属性选择器`语句等价：

```css
[class~=类名] { 样式声明 }
```

示例
--

### CSS

```css
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}
```

### HTML

```html
<p class="red">这段文字是红色的。</p>
<p class="red yellow-bg">这段文字是红色的，背景是黄色的。</p>
<p class="red fancy">这段文字是红色的，有“fancy”样式。</p>
<p>这只是普通的段落。</p>
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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

参见
--

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


font-language-override - CSS：层叠样式表

font-language-override
======================

**font-language-override** CSS 属性控制在指定的语言中使用特定的字形。

```css
/\* 关键字作为值 \*/
font-language-override: normal;

/\* 字符串作为值 \*/
font-language-override: "ENG"; /\* Use English glyphs \*/
font-language-override: "TRK"; /\* Use Turkish glyphs \*/

/\* 使用全局值 \*/
font-language-override: initial;
font-language-override: inherit;
font-language-override: unset;
```

默认情况下，HTML 的 `lang` 属性告诉浏览器使用语言的特定字形。例如，很多字体都有针对合成符 `fi` 的字形（i 上的点会被合并进 f 里）。而当使用土耳其语时，字体就不会使用合成字形。因为土耳其语有两个版本的 i: 一个带点 (`i`) 一个不带点 (`ı`)。这种情况下如果使用连写会把带点的 `i` 不正确地渲染成不带点的 `ı`。

`font-language-override`属性可以使你重载针对特定语言的字体行为。当你使用的字体缺少对某种语言的正确支持时，这很有用。例如，如果一种字体没有针对阿塞拜疆语的适当规则，你可以强制字体使用遵循类似规则的土耳其语字形。

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

语法
--

`font-language-override` 属性被指定为关键词 `normal` 或者一个字符串 `<string>`。

### 值

`normal`

指示浏览器使用适合 `lang` 属性指定的语言的字体字形。这是默认值。

`<string>`

指示浏览器使用适合该字符串指定的语言的字体字形。该字符串必须与 OpenType 语言系统中的语言标签相匹配。例如，"ENG "是英语，"KOR "是韩语。

### 正式语法
```

font-language-override =
  normal    |
  <string>

```

示例
--

### 使用丹麦文字形

#### HTML

```html
<p class="para1">Default language setting.</p>
<p class="para2">
  This is a string with the <code>font-language-override</code> set to Danish.
</p>
```

#### CSS

```css
p.para1 {
  font-language-override: normal;
}

p.para2 {
  font-language-override: "DAN";
}
```

#### 结果

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-language-override-prop |

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

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

参见
--

* `font-variant`, `font-variant-position`, `font-variant-east-asian` (en-US), `font-variant-caps`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-alternates`, `font-synthesis`, `font-kerning`.


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

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

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

尝试一下
----

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

语法
--

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

/\* 全局值 \*/
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: revert-layer;
border-inline-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-inline-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-inline-width: 5px 10px;
}
```

规范
--

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


grid-column - CSS：层叠样式表

grid-column
===========

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-column` CSS 属性是 `grid-column-start` (en-US) 和 `grid-column-end` (en-US) 的简写属性，用于指定网格项目的大小和位置{ 通过为它的网格位置贡献线条，跨度或不添加任何内容（自动），从而指定其 grid area。

尝试一下
----

语法
--

如果给出两个`<grid-line>`值，它们之间用“ /”分隔。将`grid-column-start`的正手设置为斜线之前的值，并将`grid-column-end`的正手设置为斜线之后的值。

每个`<grid-line>`值可以指定为：

* 要么是`auto`关键字
* 或`<custom-ident>`值
* 或`<integer>`值
* 或者`<custom-ident>`和`<integer>`，两者之间用空格分隔
* 或关键字 span 与`<custom-ident>`或`<integer>`或两者一起使用。
### 值

`auto`

是一个关键字，指示该属性对网格项目的放置没有任何作用，表示自动放置，自动跨度或默认跨度为 1。

`<custom-ident>`

如果有一个名为"<custom-ident>-start"/"<custom-ident>-start"的命名行，则它将第一行添加到网格项目的位置。

**警告：** 命名网格区域会自动生成这种形式的隐式命名行，因此请指定`grid-column: foo;`将选择该命名网格区域的开始/结束边缘（除非在其之前明确指定了另一条名为`foo-start / foo-end`的行）。

否则，将其视为与`<custom-ident>`一起指定了整数 1。

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

将第 n 条网格线贡献到网格项目的位置。如果给定一个负整数，则从显式网格的末端开始，反向计数。

如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则假定所有隐式网格线都具有该名称，以查找该位置。

`<integer>`的值为`0`无效。

`span && [ <integer> || <custom-ident> ]`
 将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘 n 行。
 如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则为计算此跨度，假定与搜索方向相对应的显式网格侧的所有隐式网格线均具有该名称。

如果省略<integer>，则默认为`1`。负整数或 0 无效。

### 形式语法
```

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

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

```

示例
--

### HTML

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

### CSS

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

#item1 {
  background-color: lime;
}

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

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

IE 问题
-----

IE11 不支持自动放置网格项目。除非用-ms-`grid-column`和-ms-`grid-row`显式注释，否则所有项目都以网格的第一行/列结尾。可以使用一些 JavaScript 来启用自动注释：源存储库。

规范
--

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

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

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

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

参见
--

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


:target - CSS：层叠样式表

:target
=======

**`:target`** CSS 伪类表示一个唯一的元素（*目标元素*），其 `id` 与当前 URL 片段匹配。

```css
/\* 选择一个 ID 与当前 URL 片段匹配的元素\*/
:target {
  border: 2px solid black;
}
```

例如，以下 URL 具有一个片段（由 # 符号表示），指向名为 `section2` 的元素：
```

http://www.example.com/index.html#section2
```

若当前 URL 等于上面的 URL 时，以下元素将被 `:target` 选择器被选中：

```html
<section id="section2">Example</section>
```

语法
--

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

示例
--

### 一个目录

`:target` 伪类可用于高亮显示页面中可从目录中链接到的部分。

#### HTML

```html
<h3>目录</h3>
<ol>
  <li><a href="#p1">跳转到第一个段落！</a></li>
  <li><a href="#p2">跳转到第二个段落！</a></li>
  <li><a href="#nowhere">此链接不会跳转，因为目标不存在。</a></li>
</ol>

<h3>我的趣味文章</h3>
<p id="p1">你可以使用 URL 片段定位此<i>段落</i>。点击上面的链接试试吧！</p>
<p id="p2">这是<i>另一个段落</i>，也可以从上面的链接访问。这不是很愉快吗？</p>
```

#### CSS

```css
p:target {
  background-color: gold;
}

/\* 在目标元素中增加一个伪元素\*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\*在目标元素中使用 italic 样式\*/
p:target i {
  color: red;
}
```

#### 结果

### 纯 CSS 高亮

你可以不使用任何 Javascript 代码，只使用 `:target` 伪类创建一个高亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS 就会更改其 `display` 以便显示它们。

**备注：** 一个基于 `:target` 伪类的更为完善的纯 CSS 高亮框可以在 GitHub（demo）上找到。

#### HTML

```html
<ul>
  <li><a href="#example1">打开示例 #1</a></li>
  <li><a href="#example2">打开示例 #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,
      placerat id eleifend eu, semper vel sem.
    </figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam
      quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
    </figcaption>
  </figure>
</div>
```

#### CSS

```css
/\* Unopened lightbox \*/
.lightbox {
  display: none;
}

/\* Opened lightbox \*/
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/\* Lightbox content \*/
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/\* Close button \*/
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/\* Lightbox overlay \*/
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  cursor: default;
}
```

#### 结果

规范
--

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

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

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

参见
--

* 在选择器中使用 :target 伪类


<frequency> - CSS：层叠样式表

<frequency>
===========

`<frequency>` CSS数据类型表示频率维度，例如语音的音高。目前它未在任何 CSS 属性中被使用。

语法
--

The `<frequency>` data type consists of a `<number>` followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

### 单位

可以使用以下单位：

`Hz`

表示以赫兹（hertz）为单位的频率。例如：`0Hz`、`1500Hz`、`10000Hz`。

`kHz`

表示以千赫兹（kilohertz）为单位的频率。例如：`0kHz`、`1.5kHz`、`10kHz`。

**备注：** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0Hz` or `0kHz`. Though the units are case-insensitive, it is good practice to use a capital "H" for `Hz` and `kHz`, as specified in the SI.

示例
--
```

12Hz     Positive integer
4.3Hz    Non-integer
14KhZ    The unit is case-insensitive, though non-SI capitalization is not recommended.
+0Hz     Zero, with a leading + and a unit
-0kHz    Zero, with a leading - and a unit
```

### Invalid frequency values
```

12.0     This is a <number>, not an <frequency>, because it is missing a unit.
7 Hz     No space is allowed between the number and the unit.
0        Although unitless zero is an allowable <length>, it's an invalid <frequency>.
```

规范
--

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

**备注：** This data type was initially introduced in CSS Level 2 for the now-obsolete aural (en-US) media type, where it was used to define the pitch of the voice. However, the `<frequency>` data type has been reintroduced in CSS3, though no CSS property is using it at the moment.

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

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


max-width - CSS：层叠样式表

max-width
=========

摘要
--

max-width 属性用来给元素设置最大宽度值。定义了 max-width 的元素会在达到 max-width 值之后避免进一步按照 width 属性设置变大。

`max-width` 会覆盖`width`设置，但 `min-width`设置会覆盖 `max-width`.

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements but non-replaced inline elements, table rows, and row groups |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

语法
--

```css
/\* <长度> 值 \*/
max-width: 3.5em;

/\* <百分比> 值 \*/
max-width: 75%;

/\* 关键字 \*/
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/\* 全局设置 \*/
max-width: inherit;
max-width: initial;
max-width: unset;
```

### 可选值

`none`

元素未设置最大值

`<长度>`

请参阅`<length>`所提及的长度单位。

`<百分比>`

以父级块级容器宽度的百分比`<percentage>`作为最大宽度。

`max-content`
实验性

The intrinsic preferred width.

`min-content`
实验性

The intrinsic minimum width.

`fill-available`
实验性

The containing block width minus horizontal margin, border, and padding. Some browsers implement an ancient name for this keyword, `available`.

`fit-content`
实验性

与 `max-content` 等价。

### 形式语法
```

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

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

```

示例
--

### 设置最大像素宽度

在下面的例子里，id 为"child"的<div>元素设置了 width 值，使它的宽度与父元素"parent"相等 (100%),但是 max-width 值限制了它最大宽度只能到 150px.

#### HTML

```html
<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
```

#### CSS

```css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}
```

规范
--

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

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

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

参见
--

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


tan() - CSS：层叠样式表

tan()
=====

CSS 函数 **`tan()`** 为三角函数，返回某数的正切值，此值介于 `−infinity` 和 `infinity` 之间。此函数含有单个计算式，此式须将参数结果按弧度数解析为 `<number>` 或 `<angle>`。

语法
--

```css
/\* 单个 <angle> 值 \*/
width: calc(100px * tan(45deg));
width: calc(100px * tan(0.125turn));
width: calc(100px * tan(0.785398163rad));

/\* 单个 <number> 值 \*/
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 – 1));

/\* 其他值 \*/
width: calc(100px * tan(pi / 3));
width: calc(100px * tan(e));
```

### 参数

`tan(angle)` 函数仅接受一值作为其参数。

`angle`

解析为 `<number>` 或 `<angle>` 的计算式。指定无单位数时，数理解为弧度数，表示 `<angle>`。

### 返回值

`angle` 的正切值总将返回介于 `−∞` 和 `+∞` 之间的数。

* 若 `angle` 为 `infinity`、`-infinity` 或 `NaN`，则结果为 `NaN`。
* 若 `angle` 为 `0⁻`，则结果为 `0⁻`。
* 若 `angle` 为渐近线值（如 `90deg`、`270deg` 等），则*明确不定义*结果。作者*须不*依赖于 `tan()` 为这些输入返回任何特定值。
### 形式语法
```

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

```

示例
--

### 绘制平行四边形

`tan()` 函数可用于绘制有指定包围盒的平行四边形。

#### HTML

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

#### CSS
```

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

```css
.parallelogram {
  --w: 400;
  --h: 200;
  --angle: 30deg;
  position: relative;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
}
.parallelogram::before {
  content: "";
  position: absolute;
  width: calc(100% - 100% * var(--h) / var(--w) * tan(var(--angle)));
  height: 100%;
  transform-origin: 0 100%;
  transform: skewX(calc(0deg - var(--angle)));
  background-color: red;
}
```

#### 结果

规范
--

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


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

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

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

尝试一下
----

语法
--

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

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

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

### 取值

`<'border-style'>`

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

形式定义
----

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

形式语法
----
```

border-block-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-block-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`


border-block - CSS：层叠样式表

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

CSS 属性 **`border-block`** 为简写属性，用于在样式表中的某处同时设置逻辑块向边框的各属性值。

尝试一下
----

`border-block` 可用于设置 `border-block-width`、`border-block-style` 和 `border-block-color` 中至少一个属性的值，且一次性设置块首和块末。此属性所对应的实体边框取决于元素的书写模式、行内方向和文本朝向。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top` 和 `border-bottom`，或者 `border-right` 和 `border-left` 属性。

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

属性构成
----

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

* `border-block-color`
* `border-block-style`
* `border-block-width`
语法
--

```css
border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;

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

### 取值

`border-block` 属性可用下列值中的至少一个指定，次序任意：

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-block-width`: `medium`
* `border-block-style`: `none`
* `border-block-color`: `currentcolor`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-block-width`: absolute length; `0` if the border style is `none` or `hidden`
* `border-block-style`: as specified
* `border-block-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-block-width`: by computed value type
* `border-block-style`: discrete
* `border-block-color`: by computed value type
 |

形式语法
----
```

border-block =
  <'border-block-start'>

```

示例
--

### 竖排文本的边框

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


:left - CSS：层叠样式表

:left
=====

**`:left`** CSS 伪类, 需要和@规则 `@page` 配套使用，对打印文档的左侧页设置 CSS 样式。

```css
/\* 设置打印时的左侧文档样式 \*/
@page :left {
  margin: 2in 3in;
}
```

打印文档的“左”或“右”是由书写方向相关的。举个例子，从左到右的书写方向中第一页应当使用 `:right` 配置；从右至左的书写方向中第一页应当使用 `:left` 配置。

**备注：** 并不是所有样式属性都能应用在此选择器内。仅仅 `margin`、`padding`、`border` 和 `background` 等打印时需要的属性可以使用。其他属性将直接忽略，并且可以使用的属性也只会在打印时生效，显示时不会生效。

参数
--

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

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

规范
--

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

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

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

参见
--

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


outline-style - CSS：层叠样式表

outline-style
=============

概要
--

**`outline-style`** CSS 属性被用于设置一个元素轮廓的样式。

元素轮廓是绘制于元素周围的一条线，位于`border`的外围，使元素突出

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

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

语法
--

```css
/\* 关键字 值 \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/\* 全局 值\*/
outline-style: inherit;
outline-style: initial;
outline-style: unset;
```

取值
--

`<br-style>` 可为以下这些值：

none

无轮廓 (`outline-width` 为 `0`).

dotted

轮廓为一系列点。

dashed

轮廓为一系列短线。

solid

轮廓为实线。

double

轮廓为两根有空隙的线。`outline-width` 为线与空间的总和。

groove

轮廓呈凹下状。

ridge

与 `groove` 相反：轮廓呈凸起状。

inset

轮廓呈嵌入状。

outset

与 `inset` 相反：轮廓呈突出状。

### 正式语法
```

outline-style =
  auto                  |
  <outline-line-style>

```

示例
--

### `dotted` 和 `dashed`

#### HTML

```html
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.dotted {
  outline-style: dotted; /\* 于 "outline: dotted"等价 \*/
}
.dashed {
  outline-style: dashed;
}

/\* 让效果更清楚 \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

### `solid` 和 `double`

#### HTML

```html
<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/\* 让效果更清楚 \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

### `groove` 和 `ridge`

#### HTML

```html
<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/\* 让效果更清楚 \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

### `inset` 和 `outset`

#### HTML

```html
<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>
```

#### CSS

```css
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/\* 让效果更清楚 \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

规范
--

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

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

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


border-inline - CSS：层叠样式表

border-inline
=============

CSS 属性 **`border-inline`** 为简写属性，用于在样式表中的某处同时设置逻辑行向边框的各属性值。

尝试一下
----

`border-inline` 所对应的实体边框取决于元素的书写模式、行内方向和文本朝向。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top` 和 `border-bottom`，或者 `border-right` 和 `border-left` 属性。

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

属性构成
----

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

* `border-inline-color`
* `border-inline-style`
* `border-inline-width`
语法
--

```css
border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

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

### 取值

`border-inline` 属性可用下列值中的至少一个指定，次序任意：

`<'border-width'>`

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

`<'border-style'>`

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

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-inline-width`: `medium`
* `border-inline-style`: `none`
* `border-inline-color`: `currentcolor`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-inline-width`: absolute length; `0` if the border style is `none` or `hidden`
* `border-inline-style`: as specified
* `border-inline-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-inline-color`: by computed value type
* `border-inline-style`: discrete
* `border-inline-width`: by computed value type
 |

形式语法
----
```

border-inline =
  <'border-block-start'>

```

示例
--

### 竖排文本的边框

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


outline - CSS：层叠样式表

outline
=======

CSS 的 `outline` 属性是在一条声明中设置多个轮廓属性的简写属性 ，例如 `outline-style`, `outline-width` 和 `outline-color`。

尝试一下
----

与其他简写属性一样，忽略的子属性会被设为 初始值。

### border 和 outline

border 和 outline 很类似，但有如下区别：

* outline 不占据空间，绘制于元素内容周围。
* 根据规范，outline 通常是矩形，但也可以是非矩形的。
语法
--
```

/* 样式 */
outline: solid;

/* 颜色 | 样式 */
outline: #f66 dashed;

/* 样式 | 宽度 */
outline: inset thick;

/* 颜色 | 样式 | 宽度 */
outline: green solid 3px;

/* 全局值 */
outline: inherit;
outline: initial;
outline: unset;
```

`outline` 属性可使用以下一个、两个或三个值来声明，且顺序不重要。

**备注：** 对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 `none`。但 `input` 元素是例外，其样式默认值由浏览器决定。

### 取值

**`<'outline-color'>`**

设置轮廓的颜色。没有设置时默认值为 `currentcolor`。参见 `outline-color`。

`<'outline-style'>`

设置轮廓的样式。没有设置时默认值为 `none`。参见 `outline-style`。

`<'outline-width'>`

设置轮廓的宽度。没有设置时默认值为 `medium`。参见 `outline-width`。

### 形式语法
```

outline =
  <'outline-color'>  ||
  <'outline-style'>  ||
  <'outline-width'>

```

示例
--

### HTML
```

<a href="#">This link has a special focus style.</a>
```

### CSS
```

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
```

### 结果

无障碍考虑
-----

将 `outline` 设置为 `0` 或 `none` 会移除浏览器的默认聚焦样式。如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。

* How to Design Useful and Usable Focus Indicators
* WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
规范
--

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

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `outline-color`: `auto`
* `outline-style`: `none`
* `outline-width`: `medium`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `outline-color`: For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
* `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0`
* `outline-style`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `outline-color`: a color
* `outline-width`: a length
* `outline-style`: by computed value type
 |

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

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


类型选择器 - CSS：层叠样式表

类型选择器
=====

CSS **类型选择器**通过节点名称匹配元素。换句话说，它选择一个文件中所有给定类型的元素。

```css
/\* 所有 <a> 元素。\*/
a {
  color: red;
}
```

类型选择器可以使用 `@namespace` 赋予命名空间。这在处理包含多个命名空间的文件时很有用，比如带有内联 SVG 或 MathML 的 HTML 文档，或者混合了多个词汇的 XML 文档。

* `ns|h1`——匹配命名空间为 *ns* 的 `<h1>` 元素
* `*|h1`——匹配所有 `<h1>` 元素
* `|h1`——匹配没有声明命名空间的 `<h1>` 元素
语法
--

```css
元素 { 样式声明 }
```

示例
--

### CSS

```css
span {
  background-color: skyblue;
}
```

### HTML

```html
<span>这里是由 span 元素包裹的一些文字。</span>
<p>这里是由 p 元素包裹的一些文字。</p>
<span>这里是由 span 元素包裹的一些文字。</span>
```

### 结果

### 命名空间

在这个示例中，选择器将仅匹配 example 命名空间的 `<h1>` 元素。

```css
@namespace example url(http://www.example.com);
example|h1 {
  color: blue;
}
```

规范
--

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

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

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

参见
--

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


CSS 弹性盒子布局 - CSS：层叠样式表

CSS 弹性盒子布局
==========

**CSS 弹性盒子布局**是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

基本例子
----

在以下示例中，已将容器设置为 `display: flex` ，这意味着三个子项成为弹性项。`justify-content` 的值已设置为 `space-between` ，以便在主轴上均匀地分隔项目。在每个项目之间放置等量的空间，左侧和右侧项目与 Flex 容器的边缘齐平。你还能看到项目在十字轴上拉伸，因为 `align-items` 的默认值为 `stretch`。这些项目伸展到 Flex 容器的高度，使它们看起来都像最高的项目一样高。

参考
--

### CSS 属性

* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `order`
### 对齐属性

属性 `align-content`、`align-self`、`align-items` 和 `justify-content` 最初出现在 Flexbox 规范中，但现在在 Box Alignment 中定义，Flexbox 规范引用了 Box Alignment 规范以获取最新定义。Box Alignment 中还定义了其他对齐属性。

* `align-content`
* `align-items`
* `align-self`
* `justify-content`
* `place-content`
* `row-gap`
* `column-gap`
* `gap`
### 术语表

* 弹性盒子（Flexbox）
* 伸缩容器（Flex Container）
* 弹性项目（Flex Item）
* 主轴（Main Axis）
* 交叉轴（Cross Axis）
* 伸缩性（Flex）
指南
--

弹性盒子基本概念

概述 flexbox 的功能

使用 CSS 弹性盒子 (en-US)

循序渐进的讲解如何用此特性来建立布局。

Flexbox 与其他布局方法的关系

Flexbox 如何与其他布局方法和其他 CSS 规范相关

对齐 Flex 容器中的项目

Box Alignment 属性如何与 flexbox 一起使用。

弹性项顺序

解释改变项目顺序和方向的不同方法，并解决这样做的潜在问题。

控制柔性项沿主轴的比率

本文介绍了 flex-grow，flex-shrink 和 flex-basis 属性。

精通包装弹性项

如何使用多行创建 Flex 容器并控制这些行中项目的显示。

Flexbox 的典型用例

常见的设计模式是典型的 flexbox 用例。

用弹性盒子进行 Web 应用布局 (en-US)

讲解在 Web 应用的特定环境下如何应用弹性盒子。

规范
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |


align-items - CSS：层叠样式表

align-items
===========

CSS **`align-items`** 属性设置了所有直接子元素的 `align-self` 值作为一个组。在 Flexbox 中，它控制子元素在交叉轴上的对齐。在 Grid 布局中，它控制了子元素在其网格区域内的块向轴上的对齐。

下面的交互示例演示了使用网格布局的 `align-items` 的一些值。

尝试一下
----

语法
--

```css
/\* 基本关键字 \*/
align-items: normal;
align-items: stretch;

/\* 定位对齐 \*/
/\* align-items 不能设置为 left 和 right \*/
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;

/\* 基线对齐 \*/
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /\* 溢出对齐（仅用于位置对齐） \*/
align-items: safe center;
align-items: unsafe center;

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

### 取值

`normal`

这个关键字的效果取决于我们处在什么布局模式中：

* 在绝对定位的布局中，对于*被替代*的绝对定位盒子，行为与 `start` 类似；对于*其他所有*绝对定位的盒子，行为与 `stretch` 类似。
* 在绝对定位布局的静态位置上，行为与 `stretch` 类似。
* 对于那些 flex 元素而言，行为与 `stretch` 类似。
* 对于那些 grid 元素而言，行为与 `stretch` 类似，但对于具有长宽比或固有尺寸的盒子，其行为与 `start` 类似。
* 这个属性不适用于块级盒子和表格。

`flex-start`

只在 flex 布局中使用，将元素与 flex 容器的主轴起点或交叉轴起点对齐。

`flex-end`

只在 flex 布局中使用，将元素与 flex 容器的主轴末端或交叉轴末端对齐。

`center`

flex 元素的外边距框在交叉轴上居中对齐。如果元素的交叉轴尺寸大于 flex 容器，它将在两个方向上等距溢出。

`start`

将元素与容器的主轴起点或交叉轴起点对齐。

`end`

将元素与容器的主轴末端或交叉轴末端对齐。

`self-start`

将元素与容器的主轴起点或交叉轴起点对齐，轴起点的方向对应于元素的起始方向。

`self-end`

将元素与容器的主轴末端或交叉轴末端对齐，轴末端的方向对应于元素的结尾方向。

`baseline`、`first baseline`、`last baseline`

所有 flex 元素都对齐，以使它们的 flex 容器基线 对齐。距离其交叉轴起点和基线之间最远的元素与行的交叉轴起点对齐。

`stretch`

如果（多个）元素的组合大小小于容器的大小，其中自动调整大小的元素将等量增大，以填满容器，同时这些元素仍然保持其宽高比例的约束。

`safe`

与其它对齐值一起使用。如果所选对齐值导致元素溢出容器，则将元素按 `start` 方式对齐。

`unsafe`

与其它对齐值一起使用。不管元素和容器的相对尺寸以及是否会发生溢出，都会采用给定的对齐值。

形式定义
----

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

形式语法
----
```

align-items =
  normal                                    |
  stretch                                   |
  <baseline-position>                       |
  [ <overflow-position>? <self-position> ]  |
  anchor-center

<baseline-position> =
  [ first | last ]?  &&
  baseline

<overflow-position> =
  unsafe  |
  safe

<self-position> =
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

```

示例
--

### CSS

```css
#container {
  height: 200px;
  width: 240px;
  align-items: center; /\* 可以在运行实例中更改 \*/
  background-color: #8c8c8c;
}

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

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

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

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

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

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

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

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

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

select {
  font-size: 16px;
}

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

### HTML

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

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

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>
```

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

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

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

### 结果

规范
--

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-items-property |
| CSS Flexible Box Layout Module Level 1 # align-items-property |

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

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

参见
--

* CSS Flexbox 指南：*flex 布局的基本概念*
* CSS Flexbox 指南：*对齐弹性容器中的弹性项目*
* CSS Grid 指南：*网格布局中的盒模型对齐*
* CSS 盒子对齐
* `align-self` 属性


@font-feature-values - CSS：层叠样式表

@font-feature-values
====================

概要
--

**`@font-feature-values`** CSS at-rule 允许作者在`font-variant-alternates` 中使用通用名称，用于在 OpenType 中以不同方式激活功能。它允许在使用几种字体时简化 CSS。

```css
@font-feature-values Font One {
  /\* How to activate nice-style in Font One \*/
  @styleset {
    nice-style: 12;
  }
}

@font-feature-values Font Two {
  /\* How to activate nice-style in Font Two \*/
  @styleset {
    nice-style: 4;
  }
}

/\* … \*/

.nice-look {
  font-variant-alternates: styleset(nice-style);
} /\* Independent of the font \*/
```

The `@font-feature-values` at-rule may be used at the top level of a CSS, but also inside any CSS conditional-group at-rule.

Syntax
------

### Feature value blocks

`@swash`

Specifies a feature name that will work with the `swash()` functional notation of `font-variant-alternates`. A swash feature value definition allows only one value: `ident1: 2` is valid when `ident2: 2 4` isn't.

`@annotation`

Specifies a feature name that will work with the `annotation()` functional notation of `font-variant-alternates`. An annotation feature value definition allows only one value: `ident1: 2` is valid when `ident2: 2 4` isn't.

`@ornaments`

Specifies a feature name that will work with the `ornaments()` functional notation of `font-variant-alternates`. An ornaments feature value definition allows only one value: `ident1: 2` is valid when `ident2: 2 4` isn't.

`@stylistic`

Specifies a feature name that will work with the `stylistic()` functional notation of `font-variant-alternates`. A stylistice feature value definition allows only one value: `ident1: 2` is valid when `ident2: 2 4` isn't.

`@styleset`

Specifies a feature name that will work with the `styleset()` functional notation of `font-variant-alternates`. A stylset feature value definition allows and illimited amount of values: `ident1: 2 4 12 1`maps to the OpenType values `ss02`, `ss04`, `ss12`, `ss01`. Note that values higher than `99` are valid, but doesn't map to any OpenType values and are ignored.

`@character-variant`

Specifies a feature name that will work with the `character-variant()` functional notation of `font-variant-alternates`. A character-variant feature value definition allows one or two values: `ident1: 2` maps to `cv02=1` and `ident2: 2 4` maps to `cv02)4` and `ident2: 2 4 5` isn't valid.

### Formal syntax
```

@font-feature-values =
  @font-feature-values <family-name># { <declaration-rule-list> }

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

```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-values |

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

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

See also
--------

* The `font-variant-alternates` property that uses values that this at-rule defines.


<resolution> - CSS：层叠样式表

<resolution>
============

分辨率：用于描述媒体查询中的分辨率的 <resolution> CSS 数据类型表示输出设备的像素密度。

在屏幕上，单位与 CSS 英寸，厘米或像素有关，而与物理值无关。

语法
--

<resolution> 数据类型由严格为正 `<number>` 组成，后跟下面列出的单位之一。与所有 CSS 维度一样，单位字面值与数字之间没有空格。

### 单位

`dpi`

表示每英寸的点数。屏幕通常每英寸包含 72 或 96 个点，但打印文档的 dpi 通常要大得多。1 英寸是 2.54 厘米，1dpi≈0.39dpcm。

`dpcm`

每厘米上的点数。1 英寸是 2.54 厘米，`1dpcm ≈ 2.54dpi`.

`dppx`

表示每个`px`的点数。由于 CSS px 的固定比率为 1:96，因此 1dppx 相当于 96dpi。which corresponds to the default resolution of images displayed in CSS as defined by `image-resolution` (en-US).

`x`

`dppx` 的别名

**备注：** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0dpi`, `0dpcm`, or `0dppx`.

Examples
--------

### Use in a media query

```css
@media print and (min-resolution: 300dpi) { ... }
```

### Valid resolutions
```

96dpi
50.82dpcm
3dppx
```

### Invalid resolutions
```

72 dpi     Spaces are not allowed between the number and the unit.
ten dpi    The number must use digits only.
0          The unit is required.
```

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

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

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

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

See also
--------

* resolution (en-US) media feature


text-justify - CSS：层叠样式表

text-justify
============

CSS 属性 **`text-justify`** 定义的是当文本的 `text-align` 属性被设置为 `:justify` 时的齐行方法。

```css
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /\* 已被废除，不提倡使用 \*/
```

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

语法
--

`text-justify` 属性的值只能取下面列表中的单个关键词值。

### 值

`none`

表示关闭掉齐行的设置。表现的效果和没有设置 `text-align` 一样，当你因为某种原因需要在已经设置了 `text-align` 的元素上禁用齐行效果的时候，这个属性值很有用。

`auto`

默认值，浏览器根据显示的效果和质量来确定符合当前状态的最佳对齐方式，当然这种对齐方式将是最适合某种语言文字的排版（例如：英语，中文，日语，韩语等）。如果没有对 `text-justify` 进行设置的话，则是默认使用这样子的对齐规则。

`inter-word`

通过在文本中的单词之间添加空间来实现行对齐（这将会改变 `word-spacing` 的值），比如英语或韩语就是最适合使用这个属性来用空格分隔单词的语言。

`inter-character`

通过在文本中的字符之间添加空间来实现行对齐（这将会改变 `letter-spacing` 的值），比如日语就是最适合使用这个属性的语言。

`distribute`
已弃用

显示效果与设置了 `inter-word` 一致，不提倡使用这个属性，现在这个属性或许还能有效果，但那完全是为了向后兼容而被保留着。

### 语法
```

text-justify =
  auto             |
  none             |
  inter-word       |
  inter-character

```

示例
--
```

<p class="none">
  <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="auto">
  <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="dist">
  <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="word">
  <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="char">
  <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
```

```css
p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}
```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # text-justify-property |

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

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

参见
--

* `text-align`


scroll-margin-inline-end - CSS：层叠样式表

scroll-margin-inline-end
========================

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

尝试一下
----

语法
--

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

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

### 取值

`<length>`

滚动容器的行末外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-inline-end =
  <length>

```

示例
--

### 简单演示

此示例所实现的内容与上述互动示例非常相似，但此处将解释其实现方法。

此处的目标为创建四个横向滚动区块，其中第二个和第三个吸附至指定位置——靠近但不恰好位于每个区块的右侧。

#### HTML

表示这些区块的 HTML 非常简单：

```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

#### CSS

一起来过一遍 CSS。外层容器有如下样式：

```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```

与滚动吸附相关的主要部分为 `overflow-x: scroll`——确保内容可滚动且不被隐藏——以及 `scroll-snap-type: x mandatory`——要求必须沿横轴出现滚动吸附，且滚动总将止于吸附点。

子元素有如下样式：

```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```

此处最相关的部分为 `scroll-snap-align: end`——指定右侧的边（即此情形中沿 x 轴的“末侧”）为吸附点。

最后指定滚动外边距的值，为第二个和第三个子元素指定不同的值：

```css
.scroller > div:nth-child(2) {
  scroll-margin-inline-end: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-end: 2rem;
}
```

这意味着当滚动过中间的子元素后，滚动将吸附至第二个 `<div>` 行末边的 `1rem` 外处，及第三个 `<div>` 行末边的 `2rems` 外处。

#### 结果

请自行尝试：

规范
--

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

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

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

参见
--

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


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

border-inline-end-style
=======================

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

尝试一下
----

语法
--

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

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

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

### 取值

`<'border-style'>`

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

形式定义
----

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

形式语法
----
```

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

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

```

示例
--

### 设置行末线型

#### HTML

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

#### CSS

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

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

#### 结果

规范
--

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

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

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

参见
--

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


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

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

概述
--

**`border-bottom-color`** 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 `border-color` 或 `border-bottom` 更方便实用。

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

语法
--

```css
border-bottom-color: yellow;
border-bottom-color: #f5f6f7;
```

### 值

`<color>`

一个描绘底边的颜色的 CSS `<color>` 值。

`inherit`

一个代表父元素底边颜色的关键字（可能和 `border-bottom-color` 默认值不同）

### 正式语法
```

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

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

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

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

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

```

示例
--

### 一个带有边框的简单 div

#### HTML 内容

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

#### CSS 内容

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

.redtext {
  color: red;
}
```

#### 结果

规范
--

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

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

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

参见
--

* 边框相关的 CSS 简写属性 `border`, `border-bottom` 和 `border-color` 。
* 用于其他边框颜色相关的 CSS 属性： `border-right-color`, `border-top-color`, 和 `border-left-color` 。
* 同样用于底边的其他边框相关的 CSS 属性： `border-bottom-style` 和 `border-bottom-width` 。


sqrt() - CSS：层叠样式表

sqrt()
======

CSS 函数 **`sqrt()`** 为指数型函数，返回某数的平方根。

函数 `pow(x, 0.5)` 等价于 `sqrt(x)`。

语法
--

```css
/\* <number> 值 \*/
width: calc(100px * sqrt(9)); /\* 300px \*/
width: calc(100px * sqrt(25)); /\* 500px \*/
width: calc(100px * sqrt(100)); /\* 1000px \*/
```

### 参数

`sqrt(x)` 函数仅接受一值作为其参数。

`x`

解析为大于等于 0 的 `<number>` 的计算式。

### 返回值

返回 `<number>`，为 `x` 的平方根。

* 若 `x` 为 `+∞`，则结果为 `+∞`。
* 若 `x` 为 `0⁻`，则结果为 `0⁻`。
* 若 `x` 小于 `0`，则结果为 `NaN`。
### 形式语法
```

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

```

示例
--

### 根据平方根缩放尺寸

此示例展示了如何使用 `sqrt()` 函数计算尺寸。

#### HTML

```html
<div class="boxes">
  <div class="box">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>
```

#### CSS

此处使用 CSS 自定义属性定义待用尺寸。首先声明第一个尺寸（`--size-0`），再用此尺寸计算其他尺寸。

* `--size-1` 所计算的为 `--size-0` 的值（50px）乘以 4 的平方根（2），结果为 100px。
* `--size-2` 所计算的为 `--size-0` 的值（50px）乘以 9 的平方根（3），结果为 150px。
* `--size-3` 所计算的为 `--size-0` 的值（50px）乘以 16 的平方根（4），结果为 200px。

```css
:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * sqrt(4)); /\* 100px \*/
  --size-2: calc(var(--size-0) * sqrt(9)); /\* 150px \*/
  --size-3: calc(var(--size-0) * sqrt(16)); /\* 200px \*/
}
```

```
.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

再将这些尺寸应用于这些选择器的 `width` 和 `height` 值。

```css
.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}
```

#### 结果

规范
--

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

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

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

参见
--

* `pow()`
* `hypot()`
* `log()`
* `exp()`


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

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

**`mask-border-repeat`** CSS 属性设置如何调整源图像的边缘区域以适应元素遮罩边框的尺寸。

语法
--

```css
/\* Keyword value \*/
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/\* vertical | horizontal \*/
mask-border-repeat: round stretch;

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

可以从下面的列表中选择一个或两个值来指定 `mask-border-repeat` 属性。

* 指定一个值时，它会在**四个边**应用相同的行为。
* 指定**两个**值时，第一个应用于**顶部和底部**，第二个应用于**左侧和右侧**。
### Values

`stretch`

拉伸源图像的边缘区域以填充每个边界之间的间隙。

`repeat`

源图像的边缘区域被平铺（重复）以填充每个边界之间的间隙，可以裁剪平铺图形以达到合适的贴合效果。

`round`

源图像的边缘区域被平铺（重复）以填充每个边界之间的间隙，可以拉伸平铺图形以实现适当的贴合。

`space`

源图像的边缘区域被平铺（重复）以填充每个边框之间的间隙。平铺图形之间将分配额外的空间，以实现适当的贴合。

### 正式语法
```

mask-border-repeat =
  [ stretch | repeat | round | space ]{1,2}

```

规范
--

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

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

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

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


<display-box> - CSS：层叠样式表

<display-box>
=============

这些关键词定义一个元素到底是否产生显示盒（display boxes）。

语法
--

有效的 `<display-box>` 值：

`contents`
实验性

这些元素自己不显示。它们被它们的伪盒（pseudo-box）和子项盒（child boxes）取代。请注意 CSS 层次 3 显示规格定义的 `contents` 值应该怎样影响"非常见元素" - 即不由 CSS 渲染的元素（诸如被取代元素）。参考 Appendix B: Effects of display: contents on Unusual Elements 以获取细节。

由于浏览器中有个 bug，它会从访问树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方访问性关注 Accessibility concerns 章节以获取细节。

`none`

关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。

要一个元素占据空间（文件中存在），但不渲染，请使用 `visibility` 属性。

示例
--

在第一个例子中，带有 secret 类的段落，会被设置成 `display: none`; 该盒子和内容不会渲染。

### display: none

#### HTML

```html
<p>Visible text</p>
<p class="secret">Invisible text</p>
```

#### CSS

```css
p.secret {
  display: none;
}
```

#### 结果

### display: contents

在本例中，其外部 `<div>` 有一个 2px 红色边框 和 300px 的宽度。然而，它有 `display: contents` 因而指定这个 `<div>` 不会渲染，边框和宽度都没有，其子元素会显示。

#### HTML

```html
<div class="outer">
  <div>Inner div.</div>
</div>
```

#### CSS

```css
.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}
```

#### 结果

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

目前在大多数浏览器中的实现，是会从删除 accessibility tree 删除 `display` 属性值为 `contents` 的元素。这会引起该元素（在部分浏览器版本中）和其子项不读出来。这不符合 CSSWG specification的行为要求。

* More accessible markup with display: contents | Hidde de Vries
* Display: Contents Is Not a CSS Reset | Adrian Roselli
浏览器兼容性
------

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

参见
--

* `display`
    + `<display-outside>`
    + `<display-inside>` (en-US)
    + `<display-listitem>` (en-US)
    + `<display-internal>`
    + `<display-legacy>`
* Display: Contents Is Not a CSS Reset | Adrian Roselli
* More accessible markup with display: contents — hiddedevries.nl


border-width - CSS：层叠样式表

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

概要
--

**`border-width`** 属性可以设置盒子模型的边框宽度。

尝试一下
----

它是`border-top-width`, `border-right-width`, `border-bottom-width` 和 `border-left-width`的简写;

语法
--

```css
/\* 用法一：明确指定宽度值 \*/
/\* 当给定一个宽度时，该宽度作用于选定元素的所有边框 \*/
border-width: 5px;
/\* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 \*/
border-width: 2px 1.5em;
/\* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 \*/
border-width: 1px 2em 1.5cm;
/\* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边（即按顺时针依次作用） \*/
border-width: 1px 2em 0 4rem;

/\* 用法二：使用全局关键字 \*/
/\* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） \*/
border-width: inherit;

/\* 用法三：使用作用于 border-width 的关键字 \*/
border-width: thin;
border-width: medium;
border-width: thick;
```

### 正式语法
```

border-width =
  <line-width>{1,4}

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

```

| 关键字 | 实例 | 说明 |
| --- | --- | --- |
| `thin` |  | 细边线 |
| `medium` |  | 中等边线 |
| `thick` |  | 宽边线 |

**备注：** 规范并没有规定关键字的实际值故在不同浏览器效果是不一样的，但显然 thin≤medium≤thick，并且值在单个文档中是恒定的

示例
--

### A mix of values and lengths

HTML

```html
<p id="sval">one value: 6px wide border on all 4 sides</p>
<p id="bival">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="treval">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="fourval">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  right
</p>
```

#### CSS

```css
#sval {
  border: ridge #ccc;
  border-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
```

#### 运行结果

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

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

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

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

参考
--

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