transform-origin - CSS

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

CSS 內的\*\*`transform-origin`\*\*屬性可以設定元素變化的原點。

嘗試一下
----

變化原點指的是應用變化的點。舉例來說， `rotate()` (en-US)函數的原點為旋轉中心。 (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

語法
--

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

The `transform-origin` p 屬性可以使用多次，每一次都代表著一個偏移量。若未設定偏移量，則重置為其對應的 初始值 (en-US)。

If two or more values are defined and either no value is a keyword, or the only used keyword is `center`, then the first value represents the horizontal offset and the second represents the vertical offset.

* One-value syntax:
    + The value must be a `<length>` (en-US), a `<percentage>` (en-US), or one of the keywords `left`, `center`, `right`, `top` or `bottom`.
* Two-value syntax:
    + One value must be a `<length>` (en-US), a `<percentage>` (en-US), or one of the keywords `left`, `center`, and `right`.
    + The other value must be a `<length>` (en-US), a `<percentage>` (en-US), or one of the keywords `top`, `center`, and `bottom`.
* Three-value syntax:
    + The first two values are the same as for the two-value syntax.
    + The third value must be a `<length>` (en-US). It always represents the Z offset.
### Values

*x-offset*

Is a `<length>` (en-US) or a `<percentage>` (en-US) describing how far from the left edge of the box the origin of the transform is set.

*offset-keyword*

Is one of the `left`, `right`, `top`, `bottom`, or `center` keyword describing the corresponding offset.

*y-offset*

Is a `<length>` (en-US) or a `<percentage>` (en-US) describing how far from the top edge of the box the origin of the transform is set.

*x-offset-keyword*

Is one of the `left`, `right`, or `center` keyword describing how far from the left edge of the box the origin of the transform is set.

*y-offset-keyword*

Is one of the `top`, `bottom`, or `center` keyword describing how far from the top edge of the box the origin of the transform is set.

*z-offset*

Is a `<length>` (en-US) (and never a `<percentage>` (en-US) which would make the statement invalid) describing how far from the user eye the z=0 origin is set.

The keywords are convenience shorthands and match the following `<percentage>` (en-US) values:

| Keyword | Value |
| --- | --- |
| `left` | `0%` |
| `center` | `50%` |
| `right` | `100%` |
| `top` | `0%` |
| `bottom` | `100%` |

### Formal syntax
```

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

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

Examples
--------
```

<div class="container">
  <div class="example">
    <div class="box box1"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: none;
</pre
 >

  <div class="example">
    <div class="box box2"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
</pre
 >

  <div class="example">
    <div class="box box3"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 0 0;
</pre
 >

  <div class="example">
    <div class="box box4"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 100% 100%;
</pre
 >

  <div class="example">
    <div class="box box5"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: -1em -3em;
</pre
 >

  <div class="example">
    <div class="box box6"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
</pre
 >

  <div class="example">
    <div class="box box7"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 0 0;
</pre
 >

  <div class="example">
    <div class="box box8"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 100% -30%;
</pre
 >

  <div class="example">
    <div class="box box9"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: skewX(50deg);
transform-origin: 100% -30%;
</pre
 >

  <div class="example">
    <div class="box box10"> </div>
    <div class="box original"> </div>
  </div>

  <pre>
transform: skewY(50deg);
transform-origin: 100% -30%;
</pre
 >
</div>
```

```
.container {
  display: grid;
  grid-template-columns: 200px 100px;
  gap: 20px;
}

.example {
  position: relative;
  margin: 0 2em 4em 5em;
}

.box {
  display: inline-block;
  width: 3em;
  height: 3em;
  border: solid 1px;
  background-color: palegreen;
}

.original {
  position: absolute;
  left: 0;
  opacity: 20%;
}

.box1 {
  transform: none;
}

.box2 {
  transform: rotate(30deg);
}

.box3 {
  transform: rotate(30deg);
  transform-origin: 0 0;
}

.box4 {
  transform: rotate(30deg);
  transform-origin: 100% 100%;
}

.box5 {
  transform: rotate(30deg);
  transform-origin: -1em -3em;
}

.box6 {
  transform: scale(1.7);
}

.box7 {
  transform: scale(1.7);
  transform-origin: 0 0;
}

.box8 {
  transform: scale(1.7);
  transform-origin: 100% -30%;
}

.box9 {
  transform: skewX(50deg);
  transform-origin: 100% -30%;
}

.box10 {
  transform: skewY(50deg);
  transform-origin: 100% -30%;
}
```

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

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

|  |  |
| --- | --- |
| 預設值 (en-US) | `50% 50% 0` |
| Applies to | transformable elements |
| 繼承與否 | no |
| Percentages | refer to the size of bounding box |
| Computed value (en-US) | for `length` (en-US) the absolute value, otherwise a percentage |
| Animation type | simple list of length, percentage, or calc |

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

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

See also
--------

* Using CSS transforms (en-US)


background-color - CSS

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

**`background-color`** CSS property 是用來設定 HTML 元素的背景顏色，值可以是顏色亦可以是特定關鍵字－－ `transparent`.

語法
--

```css
background-color: red;
background-color: rgb(255, 255, 128);
background-color: hsla(50, 33%, 25%, 0.75);
background-color: currentColor;
background-color: transparent;
background-color: #bbff00;

background-color: inherit;
```

### 參數

`<color>`

一個 CSS `<color>` (en-US) 用來表示一致的背景顏色。即便設定了一個或多個 `background-image` (en-US) ，背景渲染上依舊會渲染這顏色，若是圖片並非不透明圖，在透明區域就能看見。在 CSS 中， `transparent` 是一種顏色

### 正式語法
```

background-color =
  <color> (en-US)

```

範例
--

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

### Result

規格定義
----

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

|  |  |
| --- | --- |
| 預設值 (en-US) | `transparent` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line` (en-US). |
| 繼承與否 | no |
| Computed value (en-US) | computed color |
| Animation type | a color |

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

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

延伸閱讀
----

* 複數背景


box-shadow - CSS

box-shadow
==========

`box-shadow` 屬性為一個逗號分隔的列表描述一個或多個的陰影效果. 這使的你能夠從幾乎任何元素的框架放入陰影. 如果一個標記了 `border-radius` (en-US) 的元素也標記了 box shadow, 這將使得他們有相同的圓邊. 多重 box shadows 的 z-index 排序跟多重 text shadows 一樣(第一個備標記的陰影在最上面).

|  |  |
| --- | --- |
| 預設值 (en-US) | `none` |
| Applies to | all elements. It also applies to `::first-letter`. |
| 繼承與否 | no |
| Computed value (en-US) | any length made absolute; any specified color computed; otherwise as specified |
| Animation type | a shadow list |

### Box-shadow 產生器

Interactive tool (en-US) 可以產生 box-shadow.

表達式
---

```css
/\* offset-x | offset-y | color \*/
box-shadow: 60px -16px teal;

/\* offset-x | offset-y | blur-radius | color \*/
box-shadow: 10px 5px 5px black;

/\* offset-x | offset-y | blur-radius | spread-radius | color \*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/\* inset | offset-x | offset-y | color \*/
box-shadow: inset 5em 1em gold;

/\* Any number of shadows, separated by commas \*/
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;
```

### 參數

`inset`

如果未指定（默認），則假定陰影為陰影（就好像該框被提升到內容之上）。 inset 關鍵字的存在將陰影更改為幀內的陰影（就好像內容在框內被壓下）。在邊框內部（甚至是透明的）繪製插入陰影，在背景上方，但在內容下方。

`<offset-x> <offset-y>`

這兩個 `<length>` (en-US) 值用於設置陰影偏移量。 <offset-x>指定水平距離。負值將陰影置於元素的左側。 <offset-y>指定垂直距離。負值將陰影置於元素上方。有關可能的單位，請參見 `<length>` (en-US)。 如果兩個值均為 0，則陰影位於元素後面（如果設置了<blur-radius>和/或<spread-radius>，則可能會生成模糊效果）。

`<blur-radius>`

這是第三個 `<length>` (en-US) 值。此值越大，模糊越大，陰影變得越來越大。不允許使用負值。如果未指定，則為 0（陰影邊緣清晰）。

`<spread-radius>`

這是第四個 `<length>` (en-US) 值。正值將導致陰影擴大並變大，負值將導致陰影縮小。如果未指定，則為 0（陰影將與元素的大小相同）。

`<color>`

有關可能的關鍵字和符號，請參閱 `<color>` (en-US) 值。 如果未指定，則使用的顏色取決於瀏覽器 - 它通常是 `color` (en-US) 屬性的值，但請注意，Safari 在此情況下當前繪製透明陰影。

### 語法
```

box-shadow =
  <spread-shadow># (en-US)

<spread-shadow> =
  <'box-shadow-color'>? (en-US)                               && (en-US)
  [ (en-US) <'box-shadow-offset'> [ (en-US) <'box-shadow-blur'> <'box-shadow-spread'>? (en-US) ] (en-US)? (en-US) ] (en-US)  && (en-US)
  <'box-shadow-position'>? (en-US)

```

範例
--

* CSS box-shadow examples
* box-shadow test
* box-shadow tutorial and examples
```

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
```

```
box-shadow: 60px -16px teal;
```

```
box-shadow: 10px 5px 5px black;
```

```
box-shadow: 3px 3px red, -1em 0 0.4em olive;
```

```
box-shadow: inset 5em 1em gold;
```

```
box-shadow: 0 0 1em gold;
```

```
box-shadow: inset 0 0 1em gold;
```

```
box-shadow: inset 0 0 1em gold, 0 0 1em red;
```

規範
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # box-shadow |

瀏覽相容性
-----

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


border-left-color - CSS

border-left-color
=================

**`border-left-color`** 是一種 CSS 屬性，用來設定元件左側邊框 (en-US)的顏色。也可由含括此屬性功能的簡寫屬性 `border-color` 或 `border-left` (en-US) 設定該屬性值。

嘗試一下
----

語法
--

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

/\* Global values \*/
border-left-color: inherit;
border-left-color: initial;
border-left-color: revert;
border-left-color: revert-layer;
border-left-color: unset;
```

`border-left-color`只能宣告一個屬性值。

### 屬性值

`<color>` (en-US)

定義左側邊框色彩。

Formal definition 標準定義
----------------------

|  |  |
| --- | --- |
| 預設值 (en-US) | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter`. |
| 繼承與否 | no |
| Computed value (en-US) | computed color |
| Animation type | a color |

Formal syntax 語法規則
------------------
```

border-left-color =
  <color> (en-US)     | (en-US)
  <image-1D>

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

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

<color-stripe> =
  <color> (en-US)                            && (en-US)
  [ (en-US) <length-percentage> | (en-US) <flex> (en-US) ] (en-US)? (en-US)

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

範例
--

### 簡易邊框範例

#### HTML

```html
<div class="mybox">
  <p>
    這是一個帶有框線的方框。 請注意某側框線顏色已設為
    <span class="redtext">紅色</span>。
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-left-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.

參見
--

* 與框線相關的簡寫屬性：`border` (en-US)、`border-left` (en-US)、`border-color`。
* 與顏色相關的其他框線屬性：`border-right-color`、`border-bottom-color`、`border-top-color`。
* 與同側框線相關的其他屬性：`border-left-style` (en-US)、`border-left-width` (en-US)。


置換元素 (Replaced element) - CSS

置換元素 (Replaced element)
=======================

摘要
--

CSS 中所謂的「置換元素 (**Replaced element**)」，即是該元素所呈現的內容不在 CSS 的控制範圍之內。這類外部物件所呈現的內容均獨立於 CSS 之外。常見的置換元素包含 `<img>` (en-US)、`<object>` (en-US)、`<video>` (en-US)，或如 `<textarea>` (en-US) 與 `<input>` (en-US) 的表單元素。某些元素 (像是 `<audio>` (en-US) 或 `<canvas>`) 只有在特殊情況下才是置替換元素。若是透過 CSS `content` (en-US) 屬性所插入的物件，則稱為「不具名置換元素 (Anonymous replaced elements)」。

在某些情況下，CSS 會特別處理置換元素，如計算邊距空白 (Margin) 與某些 `auto` 的值。

另需注意的是，**某些**置換元素本身就具備固定尺寸 (Intrinsic dimension) 或已定義的基準線 (Baseline)，並可由 CSS 的某些屬性 (如 `vertical-align` (en-US)) 所利用。

另可參閱
----

* CSS 重要概念：
    + CSS 語法
    + @ 規則 (en-US)
    + 註釋 (en-US)
    + 優先級 (en-US)
    + 繼承
    + 盒模型 (en-US)
    + 佈局模式 (en-US)
    + 視覺格式化模型 (en-US)
    + 外邊距合併
    + 值
        - 初始值 (en-US)
        - 計算值 (en-US)
        - 解析值 (en-US)
        - 指定值 (en-US)
        - 應用值 (en-US)
        - 實際值 (en-US)
    + 特性值定義語法 (en-US)
    + 特性簡寫
    + 可置換元素


CSS格線布局 - CSS

CSS格線布局
=======

**CSS 格線佈局**長於把頁面的主要區域分離、或是在 HTML 原生語法構建的區域間，定義大小、位置、層次等方面的關聯。

格線佈局使作者能夠對齊元素為行和列，就像表格一樣。然而，格線佈局可以更輕易的達成比一般表格更多元化的排版。例如，一個網格容器的子元素可以定位自己和層重疊，類似於 CSS 定位元素。

基本示例
----

以下示例展示了一個三列軌道格線，其中創建的行數最小為 100 像素，最大為 auto。Items 已經使用基於線放置在網格的位置上。
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233, 171, 88);
  border-radius: 5px;
  background-color: rgba(233, 171, 88, 0.5);
  padding: 1em;
  color: #d9480f;
}
```

### HTML

```html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
```

### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
```

參考
--

### CSS 屬性

* `grid-template-columns` (en-US)
* `grid-template-rows` (en-US)
* `grid-template-areas` (en-US)
* `grid-template`
* `grid-auto-columns` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-flow` (en-US)
* `grid` (en-US)
* `grid-row-start` (en-US)
* `grid-column-start` (en-US)
* `grid-row-end` (en-US)
* `grid-column-end` (en-US)
* `grid-row` (en-US)
* `grid-column` (en-US)
* `grid-area` (en-US)
* `grid-row-gap` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)
### CSS 函式

* `repeat()` (en-US)
* `minmax()` (en-US)
* `fit-content()` (en-US)
### CSS 資料型別

* `<flex>` (en-US)
### 詞匯表條目

* 格線
* 網格線 (en-US)
* 格線軌道 (en-US)
* 格線單元 (en-US)
* 格線區域 (en-US)
* 間距 (en-US)
* 格線軸 (en-US)
* 格線行 (en-US)
* 格線列 (en-US)
指引
--

* 格線布局的基本概念
* 格線布局與其它布局的關係 (en-US)
* 使用指定的格線命名排版 (en-US)
* 格線模板區域 (en-US)
* Layout using named grid lines (en-US)
* 使用指定的網格線排版 (en-US)
* 在 CSS 自動放置格線布局 (en-US)
* 用 Box 對齊 CSS 格線布局 (en-US)
* CSS 格線、邏輯值和寫作模式 (en-US)
* CSS 格線布局與無障礙 (en-US)
* CSS 格線與漸進增強 (en-US)
* 用 CSS 格線實做常見排版 (en-US)
外部資源
----

* Jen Simmons 的示範
* 格線示例：一些影片教學與使用範例
* Codrops 格線參考
* Firefox DevTools CSS Grid Inspector
* CSS Grid Playground
規範
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |


transform - CSS

transform
=========

**`transform`** CSS 屬性可以讓你修改 CSS 可視化格式模型（visual formatting model）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。

嘗試一下
----

如果這個屬性的值不是 `none`，將會建立一個 stacking context (en-US)。在這個情況下，此元素將被其所包含的 `position: fixed` 元素當成一個 containing block。

**警告：** 只有可以變形的元素可以被變形，這包括所有被 CSS box model 掌管輸出的元素，除了視覺格式化模型 (en-US), table-column box (en-US) 和 table-colunm-group box (en-US)。

語法
--

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

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

/\* Multiple function values \*/
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

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

`transform` 屬性可能被指定為關鍵字值 `none` 或著一或多個 `<transform-function>` 值。

### 值

`<transform-function>` (en-US)

可使用一個或多個 CSS transform 函數 (en-US)。複合的 transform 會由左至右的順序來套用。

`none`

設定為沒有套用任何 transform。

可使用性問題
------

改變尺寸和伸縮的動畫會影響網頁普遍的可使用性，因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能，最好在網頁中放上給使用者關閉這些功能的控制開關。

另外也可考慮使用 `prefers-reduced-motion` (en-US) 這個媒體功能來寫一個在系統設定端的媒體查詢 (en-US)，讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。

瞭解更多:

* MDN Understanding WCAG, Guideline 2.3 explanations (en-US)
* Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1
正式定義
----

|  |  |
| --- | --- |
| 預設值 (en-US) | `none` |
| Applies to | transformable elements |
| 繼承與否 | no |
| Percentages | refer to the size of bounding box |
| Computed value (en-US) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates stacking context | yes |

標準語法
----
```

transform =
  none              | (en-US)
  <transform-list>

<transform-list> =
  <transform-function> (en-US)+ (en-US)

```

範例
--

### 平移、旋轉元素

#### HTML

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

#### CSS

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

#### 結果

### 更多範例

請參考使用 CSS transform (en-US) 以及 `<transform-function>` (en-US) 的更多範例。

規範
--

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

瀏覽器相容性
------

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

參見
--

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


語法 - CSS

語法
==

串接式樣式表 (CSS) 語言的基礎目標是是讓瀏覽器引擎用特定的功能將元素寫在頁面上，像是顏色、位置與裝飾。CSS 語法反映出了目的，而它的基本組成為：

* **屬性**為人可閱讀的識別碼，定義使用哪項功能。
* **參數**描述了引擎必須如何處理這項功能。每個屬性都有一套有效的參數，由形式的文法與語意所定義，並由瀏覽器引擎執行。
CSS 宣告
------

設定特定參數值給 CSS 屬性是 CSS 語言的核心功能。一對屬性與參數叫做**宣告**，而為了適當的排版與套用樣式，任何 CSS 引擎會演算每個頁面上的元素該套用哪個宣告。

在 CSS 中屬性與參數都預設為不區分大小寫。它們由冒號區隔，'`:`' (`U+003A COLON`)，而在屬性與參數前、中間與後面並不需要有空白，空白會被忽略。

![css syntax - declaration.png](/zh-TW/docs/Web/CSS/Syntax/css_syntax_-_declaration.png)

在 CSS 中有超過100 種不同的屬性 (en-US)與接近無限個不同的參數。並非所有的屬性與參數組都是被准許的，且每個屬性定義了哪些是有效的參數。當一個參數對屬性無效的時候，宣告會被認為是無效的且會完全被 CSS 引擎忽略。

CSS 宣告區塊
--------

Declarations are grouped in **blocks**, that is in a structure delimited by an opening brace, '`{`' (`U+007B LEFT CURLY BRACKET`), and a closing one, '`}`' (`U+007D RIGHT CURLY BRACKET`). Blocks sometimes can be nested, so opening and closing braces must be matched.

![css syntax - block.png](/zh-TW/docs/Web/CSS/Syntax/css_syntax_-_block.png)

Such blocks are naturally called **declaration blocks** and declarations inside them are separated by a semi-colon, '`;`' (`U+003B SEMICOLON`). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered *good style* to do it as it prevents forgetting to add it when extending the block with another declaration.

![css syntax - declarations block.png](/zh-TW/docs/Web/CSS/Syntax/declaration-block.png)

**備註：** The content of a CSS declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an HTML `style` (en-US) attribute.

CSS rulesets
------------

If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by one or more comma-separated **selectors** which are conditions selecting some elements of the page. The pair selector group-declarations block is called a **ruleset**, or often simply a **rule**.

![css syntax - ruleset.png](/zh-TW/docs/Web/CSS/Syntax/ruleset.png)

As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade (en-US) algorithm.

**備註：** It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.

This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole *selector* is invalid and therefore the entire rule is ignored (as invalid too).

CSS statements
--------------

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

A **statement** is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

![css syntax - statements Venn diag.png](/zh-TW/docs/Web/CSS/Syntax/css_syntax_-_statements_venn_diag.png)

There are two kinds of statements:

* **Rulesets** (or *rules*) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
* **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of at-rules (en-US), defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like `@charset` (en-US) or `@import` (en-US)), conditional information (like `@media` (en-US) or `@document` (en-US)), or descriptive information (like `@font-face`).

Any statement which isn't a ruleset or an at-rule is invalid and ignored.

There is another group of statements - the **nested statements**. These are statements that can be used in a specific subset of at-rules – the *conditional group rules*. These statements only apply if a specific condition is matched: the `@media` at-rule content is applied only if the device on which the browser runs matches the expressed condition; the `@document` at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only *rulesets* could be used inside conditional group rules. That was very restrictive and this restriction was lifted in *CSS Conditionals Level 3*. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.

See also
--------

* CSS 重要概念：
    + CSS 語法
    + @ 規則 (en-US)
    + 註釋 (en-US)
    + 優先級 (en-US)
    + 繼承
    + 盒模型 (en-US)
    + 佈局模式 (en-US)
    + 視覺格式化模型 (en-US)
    + 外邊距合併
    + 值
        - 初始值 (en-US)
        - 計算值 (en-US)
        - 解析值 (en-US)
        - 指定值 (en-US)
        - 應用值 (en-US)
        - 實際值 (en-US)
    + 特性值定義語法 (en-US)
    + 特性簡寫
    + 可置換元素


border-color - CSS

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

**`border-color`** 是一種CSS 簡寫屬性，用來綜合設定元件四邊框線的顏色。

嘗試一下
----

border-color 雖可一次設定四邊框線色彩，但每個邊框亦可用以下屬性分別指定：`border-top-color`、`border-right-color`、`border-bottom-color`、`border-left-color`；能因應文字書寫方向改變框線相對位置（the writing mode-aware）的屬性如：`border-block-start-color` (en-US)、`border-block-end-color` (en-US)、`border-inline-start-color` (en-US)、`border-inline-end-color` (en-US)，也可達成分別指定的功能。

關於更多邊框色彩的設定說明，請見 CSS 顏色 (en-US)。

Constituent properties 屬性組成
---------------------------

border-color 簡寫的屬性值內容由以下 CSS 的屬性值構成。

* `border-bottom-color`
* `border-left-color`
* `border-right-color`
* `border-top-color`
語法
--

```css
/\* <color> values \*/
border-color: red;

/\* top and bottom | left and right \*/
border-color: red #f015ca;

/\* top | left and right | bottom \*/
border-color: red rgb(240, 30, 50, 0.7) green;

/\* top | right | bottom | left \*/
border-color: red yellow green blue;

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

`border-color` 屬性值可設定一到四個輸入值。

* 一個值：將單一顏色指定給**全部四個邊**。
* 兩個值：依顏色排列順序分別指定給：**上下邊**、**左右邊**。
* 三個值：依顏色排列順序分別指定給：**上邊框**、**左右邊**、**下邊框**。
* 四個值：依顏色排列順序，沿邊框順時鐘方向，分別指定給：**上邊框**、**右邊框**、**下邊框**、**左邊框**。
### 屬性值

`<color>` (en-US)

定義框線的顏色。

Formal definition 語法定義
----------------------

|  |  |
| --- | --- |
| 預設值 (en-US) | as each of the properties of the shorthand:* `border-top-color`: `currentcolor`
* `border-right-color`: `currentcolor`
* `border-bottom-color`: `currentcolor`
* `border-left-color`: `currentcolor`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| 繼承與否 | no |
| Computed value (en-US) | as each of the properties of the shorthand:* `border-bottom-color`: computed color
* `border-left-color`: computed color
* `border-right-color`: computed color
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-color`: a color
* `border-left-color`: a color
* `border-right-color`: a color
* `border-top-color`: a color
 |

Formal syntax 語法規則
------------------
```

border-color =
  [ (en-US) <color> (en-US) | (en-US) <image-1D> ] (en-US){1,4} (en-US)

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

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

<color-stripe> =
  <color> (en-US)                            && (en-US)
  [ (en-US) <length-percentage> | (en-US) <flex> (en-US) ] (en-US)? (en-US)

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

範例
--

### 完整的 border-color 簡寫使用

#### HTML

```html
<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>
```

#### CSS

```css
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/\* 設定每個div的邊框與樣式 \*/
/\* Set width and style for all divs \*/
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}
```

#### 成果

規範
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |

瀏覽器相容性
------

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

參見
--

* 與 border-color 相關的 CSS 屬性：`border` (en-US)、`border-top-color`、 `border-right-color`、`border-bottom-color`、`border-left-color`。
* 其他框線屬性：`border-width` (en-US)、`border-style` (en-US)
* 資料型態 `<color>` (en-US)
* 其他顏色相關屬性：`color` (en-US)、`background-color`、`outline-color` (en-US)、`text-decoration-color` (en-US)、`text-emphasis-color` (en-US)、`text-shadow` (en-US)、`caret-color` (en-US)、`column-rule-color` (en-US)
* 以 CSS 指定 HTML 元件的顏色 (en-US)


clip - CSS

clip
====

**已棄用:** 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

總結
--

**`這個 clip`** CSS 屬性用來定義元素的哪一個部分是可見的. `clip` 屬性只能被賦予在絕對位置的元素(element)上, 像是帶有這些的 CSS 屬性的元素 `position:absolute` (en-US) or `position:fixed` (en-US).

**警告：** 這個屬性被遺棄了. 請改用 `clip-path` (en-US) .

|  |  |
| --- | --- |
| 預設值 (en-US) | `auto` |
| Applies to | absolutely positioned elements |
| 繼承與否 | no |
| Computed value (en-US) | `auto` if specified as `auto`, otherwise a rectangle with four values, each of which is `auto` if specified as `auto` or the computed length otherwise |
| Animation type | a rectangle |

Syntax
------

```css
/\* Keyword value \*/
clip: auto;

/\* <shape> values \*/
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);

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

### Values

`<shape>`

A rectangular `<shape>` (en-US) of the form `rect(<top>, <right>, <bottom>, <left>)` or of the form `rect(<top> <right> <bottom> <left>)` (which is a more backwards compatible syntax) `<top>` and `<bottom>` specify offsets from the *inside top border edge* of the box, and `<right>`, and `<left>` specify offsets from the *inside left border edge* of the box — that is, the extent of the padding box.`<top>`, `<right>`, `<bottom>`, and `<left>` may either have a `<length>` (en-US) value or `auto`. If any side's value is `auto`, the element is clipped to that side's *inside border edge*.

`auto`

The element does not clip (default value). Note that this is distinct from `rect(auto, auto, auto, auto)`, which does clip to the inside border edges of the element.

### Formal syntax
```

clip =
  <rect()>  | (en-US)
  auto

<rect()> =
  rect( <top> (en-US) , <right> (en-US) , <bottom> (en-US) , <left> (en-US) )

```

Examples
--------

### HTML

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

### CSS

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

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

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

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

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

### 結果

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

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

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

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

See also
--------

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


@namespace - CSS

@namespace
==========

**`@namespace`** 是一個 at-rule (en-US)，它決定要在 CSS 樣式表 (en-US)中要使用的 XML 命名空間。

嘗試一下
----

語法
--

```css
/\* 默認的命名空間 \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";
/\* 有前綴的命名空間 \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
```

說明
--

`@namespace` 可以用来限制樣式的選擇器（包含通用的 (en-US)、元素選擇器和屬性 (en-US)選擇器 (en-US)）僅套用於指定的命名空間。`@namespace` 通常在處理有多個命名空間的檔案時很有用——例如有內嵌 SVG 或 MathML 的 HTML、混和多個命名空間的 XML 等。

`@namespace` 必须放在 `@charset` (en-US) 和 `@import` (en-US) 規則之後，在其他 at-rule 及 Style Declaration (en-US) 之前。

`@namespace` 可以用來定義**默認命名空間**或是**有前綴的命名空間**的樣式。所有在指定命名空間下的通用、元素選擇器都會套用該樣式，屬性選擇器則只適用於「有前綴的命名空間」（詳見下方註釋）。

在 HTML5，已知的外部元素會自動為其分配命名空間。舉例來說，即使沒有設置 `xmlns` 屬性，所有的 HTML 元素都會自動視為 XHTML 命名空間（`http://www.w3.org/1999/xhtml`）；<svg> (en-US) 和 <math> (en-US) 則會自動分配屬於他們的命名空間（`http://www.w3.org/2000/svg` 和 `http://www.w3.org/1998/Math/MathML`）。

**備註：** 在 XML，屬性若沒有前綴（例如 `xlink:href`），該屬性就不會繼承元素的命名空間（亦即 `link`的命名空間可能是 `http://www.w3.org/1999/xhtml` 而不是 `http://www.w3.org/2000/svg`）。因此，CSS 的「默認的命名空間」並不適用於屬性

形式語法
----
```

@namespace =
  @namespace <namespace-prefix>? (en-US) [ (en-US) <string> (en-US) | (en-US) <url> ] (en-US) ;

<namespace-prefix> =
  <ident> (en-US)

<url> =
  <url()>  | (en-US)
  <src()>

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

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

```

範例
--

### 指定默認及前缀的命名空間

```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* 在文檔裡面所有使用 XHTML 命名空間的 <a> 元素都會套用以下樣式 \*/
a {
}

/\* 以下則是會套用所有「命名空間為 http://www.w3.org/2000/svg 的 svg」底下的所有 <a> 元素 \*/
svg|a {
}

/\* 無論是 XHTML 還是 SVG 的 <a> 元素都會套用以下樣式 \*/
\*|a {
}
```

瀏覽器相容性
------

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

參見
--

* 命名空間速成班 (en-US)


:target - CSS

:target
=======

The`:target`pseudo-class represents the unique element, if any, with an **id** matching the fragment identifier of the URI of the document..

 URIs with fragment identifiers link to a certain element within the document, known as the *target element*. For instance, here is a URI pointing to an *anchor* named section2:
 `http://example.com/folder/document.html#section2`
 The *anchor* can be any element with an`id`attribute, e.g. `<h1 id="section2">` in our example. The *target element* `h1` can be represented by the `:target` pseudo-class.

**備註：** The`id`attribute was new in HTML 4 (December 1997). In old-style HTML `<a>` is a target element. The`:target`pseudo-class applies to those targets as well.

範例
--

```css
:target {
  outline: solid red;
} /\* draw a red, solid line around the target element \*/
```

```css
/\* example code for userContent.css or any web pages;
 a red/yellow arrow indicates the target element \*/

:target {
  -webkit-box-shadow: 0.2em 0.2em 0.3em #888;
  -moz-box-shadow: 0.2em 0.2em 0.3em #888;
  box-shadow: 0.2em 0.2em 0.3em #888;
}

:target:before {
  font:
    70% Arial,
    "Nimbus Sans L",
    sans-serif !important;
  content: "\25ba"; /\* ► \*/
  color: red;
  background: gold;
  border: solid thin;
  padding-left: 1px;
  display: inline-block;
  margin-right: 0.13em;
  vertical-align: 20%;
}
```

### Working with display: none elements…

The `:target` pseudo-class also works fine with **undisplayed elements**:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>:target pseudoclass example</title>
    <style>
 #newcomment {
 display: none;
 }

 #newcomment:target {
 display: block;
 }
 </style>
  </head>
  <body>
    <p><a href="#newcomment">Add a comment</a></p>
    <div id="newcomment">
      <form>
        <p>
          Write your comment:<br />
          <textarea></textarea>
        </p>
      </form>
    </div>
  </body>
</html>
```

### Creating a pure CSS "lightbox"

The `:target` pseudo-class is useful to switch on/off some invisible elements. In this way you can create a pure-CSS lightbox (live demo).
```

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>MDN Example – CSS Lightbox</title>
    <style type="text/css">
 div.lightbox {
 display: none;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 }

 div.lightbox:target {
 display: table;
 }

 div.lightbox figure {
 display: table-cell;
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 vertical-align: middle;
 }

 div.lightbox figure figcaption {
 display: block;
 margin: auto;
 padding: 8px;
 background-color: #ddbbff;
 height: 250px;
 position: relative;
 overflow: auto;
 border: 1px #000000 solid;
 border-radius: 10px;
 text-align: justify;
 font-size: 14px;
 }

 div.lightbox figure .closemsg {
 display: block;
 margin: auto;
 height: 0;
 overflow: visible;
 text-align: right;
 z-index: 2;
 cursor: default;
 }

 div.lightbox figure .closemsg,
 div.lightbox figure figcaption {
 width: 300px;
 }

 .closemsg::after {
 content: "\00D7";
 display: inline-block;
 position: relative;
 right: -20px;
 top: -10px;
 z-index: 3;
 color: #ffffff;
 border: 1px #ffffff solid;
 border-radius: 10px;
 width: 20px;
 height: 20px;
 line-height: 18px;
 text-align: center;
 margin: 0;
 background-color: #000000;
 font-weight: bold;
 cursor: pointer;
 }

 .closemsg::before {
 content: "";
 display: block;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: #000000;
 opacity: 0.85;
 }
 </style>
  </head>

  <body>
    <h1>Pure CSS Lightbox</h1>

    <p>Some sample text…</p>

    <p>
      [ <a href="#example1">Open example #1</a> |
      <a href="#example2">Open example #2</a> ]
    </p>

    <p>Another sample text…</p>

    <div class="lightbox" id="example1">
      <figure>
        <a href="#" class="closemsg"></a>
        <figcaption>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis
          enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo
          enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque
          hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit
          dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in
          posuere sapien mattis vel. Proin molestie rutrum diam, pharetra
          feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam
          gravida. Aliquam erat volutpat.<br />
          Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo.
          Integer molestie massa ut massa commodo in blandit purus aliquam.
          Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales
          mauris nec tellus pharetra dictum.
        </figcaption>
      </figure>
    </div>

    <div class="lightbox" id="example2">
      <figure>
        <a href="#" class="closemsg"></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. Etiam ullamcorper augue quis orci posuere et tincidunt
          augue semper. Maecenas varius augue eu orci auctor bibendum tristique
          ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam
          leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.
        </figcaption>
      </figure>
    </div>
  </body>
</html>
```

規範
--

| 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 (en-US)


transition-duration - CSS

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

**`transition-duration`** CSS 屬性指定轉場動畫所需經歷的時間，以秒或是毫秒為單位。默認值為 0，表示沒有任何轉場動畫。

嘗試一下
----

你可以指定多個時間長度，每一個時間長度都會被應用在`transition-property` (en-US) 設定的對應屬性上(which acts as a master list.) 如果指定的時間長度的數量比對應屬性的數量少，那麼時間長度就會被重複使用。反之，多餘的時間長度就會被刪去。而這兩種情況之下的 CSS 宣告都是有效的。

語法
--

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

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

### 值

`<time>`

`<time>` (en-US)類型表示轉場動畫從舊狀態轉至新狀態所需要的時間。如果時間長度為 0，表示沒有任何轉場，狀態之間會立即改變。若時間長度為負值則無效。

### 正式語法
```

transition-duration =
  <time [0s,∞]># (en-US)

```

範例
--

### `transition-duration: 0.5s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transformv color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-duration: 1s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top -webkit-transform color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top -webkit-transform transform color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-duration: 2s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

### `transition-duration: 4s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

規範
--

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

|  |  |
| --- | --- |
| 預設值 (en-US) | `0s` |
| Applies to | all elements, `::before` (en-US) and `::after` (en-US) pseudo-elements |
| 繼承與否 | no |
| Computed value (en-US) | as specified |
| Animation type | Not animatable |

瀏覽器支援情形
-------

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

更多資訊
----

* CSS 轉場
* `TransitionEvent` (en-US)


border-image - CSS

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

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

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

* Learn more
* See full compatibility
* Report feedback
CSS 屬性 `border-image` 可以讓你在元素的邊框上擺上圖片。這讓呈現看似很複雜的一個網頁的小單元簡單很多，它可以省最多九個元素。

**警告：** 官方的 CSS3 規範描述的 border-image 屬性在這個功能被凍結並出現在 Gecko 1.9.1 的釋出版之後改變很多。因此，這項功能的語法跟呈現方法很可能在未來 Gecko 的釋出版改變。特別是選擇性的 `border-width` 參數，它覆蓋既有 `border-width` 取值的這項特性已經從規範移除了，因此勢必也會在未來的 Gecko 被拿掉。

瀏覽器會顯示 `border-image` 指定的圖片而不是 `border-style` (en-US) 給的邊框樣式，但是若它的取值是 `none` 或是因某些理由無法顯示該圖片，瀏覽器就會顯示邊框樣式。`border-image` 會畫一個額外的背景圖片在原來 `background-image` (en-US) 指定的背景圖片之上。

語法
--
```

none |
  [ <圖片> [ <數字> | <百分比> ]{1,4} [/ <邊框寬度>{1,4}]? ] && [ stretch | repeat | round ]{0,2}
```

取值
--

none

不顯示圖片，使用邊框樣式。

<圖片>（必填）

圖片值是一個 `<uri>()` (en-US)，例：`url(http://example.org/image.png)`。

<數> | <百分比>（必填）

一個、兩個、三個、四個分別代表從頂邊、右邊、底邊、左邊從圖片外圍到切圖線的距離，將圖片切為九塊：四個角、四個邊跟一個中間部份。

 一個值的話，該值用於圖片的全部四個邊。
 兩個值得話，值用於：一、頂邊與底邊 二、右邊與左邊。
 三個值的話，值用於：一、頂邊 二、右邊與左邊 三、底邊。
 四個值的情況，四個值分邊用在圖片的頂邊、右邊、底邊、左邊。

在 Gecko 1.9.1 (Firefox 3.5) 圖片的中間那個部份會被當做元素的背景。這在未來的版本可能會改變。

**百分比** 由圖片的長度/寬度計算。
 **數** 但表圖片的像素（若為點陣圖）或向量座標（若為 SVG）。

<邊框寬度> （選擇性）

如果斜線 **/** 出現在屬性值的話，一個、兩個、三個或是四個在它之後的取值會被當成是 `border-width` (en-US) 的取值使用。取值的順序如同 `border-width` (en-US) 。

stretch | round | repeat （選擇性）

一個或兩個關鍵字，指定邊上的圖片跟中間部份要如何縮放及鋪擺。

**`stretch`**（預設值）縮放該圖片，使其與配置大小相等。
 **`round`** 鋪擺該圖片，但也縮放它使得被配置範圍鋪滿整數張該圖片。
 **`repeat`** 直接鋪擺該圖片。
 第一個關鍵字的對象是頂邊，中間跟底邊的圖片，而第二個關鍵字的對象是左邊跟右邊的邊框。如果第二個不存在，則沿用第一個關鍵字的設定。如果兩者皆不存在，預設值為 `stretch`。

形式定義
----

|  |  |
| --- | --- |
| 預設值 (en-US) | as each of the properties of the shorthand:* `border-image-source` (en-US): `none`
* `border-image-slice` (en-US): `100%`
* `border-image-width` (en-US): `1`
* `border-image-outset` (en-US): `0`
* `border-image-repeat` (en-US): `stretch`
 |
| Applies to | all elements, except internal table elements when `border-collapse` (en-US) is `collapse`. It also applies to `::first-letter`. |
| 繼承與否 | no |
| Percentages | as each of the properties of the shorthand:* `border-image-slice` (en-US): refer to the size of the border image
* `border-image-width` (en-US): refer to the width or height of the border image area
 |
| Computed value (en-US) | as each of the properties of the shorthand:* `border-image-outset` (en-US): as specified, but with relative lengths converted into absolute lengths
* `border-image-repeat` (en-US): as specified
* `border-image-slice` (en-US): one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
* `border-image-source` (en-US): `none` or the image with its URI made absolute
* `border-image-width` (en-US): as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `border-image-outset` (en-US): by computed value type
* `border-image-repeat` (en-US): discrete
* `border-image-slice` (en-US): by computed value type
* `border-image-source` (en-US): discrete
* `border-image-width` (en-US): by computed value type
 |

形式語法
----
```

border-image =
  <'border-image-source'>                             || (en-US)
  <'border-image-slice'> [ (en-US) / <'border-image-width'> | (en-US) / <'border-image-width'>? (en-US) / <'border-image-outset'> ] (en-US)? (en-US)  || (en-US)
  <'border-image-repeat'>

```

範例
--

[這裡還需要一些活範例]
```

#header  { -moz-border-image: url(border.png) 27 27 27 27 round round; }

.button  { -moz-border-image: url(button.png) 0 5 0 5; }

.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px; }
```

```
/* 鮮見例，在 Firefox 3.5 下看起來像是完全伸展的 background-image */

 div     { -moz-border-image: url(bgimage.png) 0; }
```

規範
--

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

瀏覽器兼容性
------

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


background-attachment - CSS

background-attachment
=====================

**`background-attachment`** 這個 CSS 屬性能夠設定，背景圖片的位置是否要固定在 viewport（視圖）上，還是背景圖片會隨著它的 containing block（外層容器）一起滾動。

嘗試一下
----

語法
--

```css
/\* Keyword values \*/
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

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

`background-attachment` 屬性的值，可以是下方清單中的其中之一。

### Values

`fixed`

讓背景相對於 viewport（視圖）的移動是固定的。即便元素中的內容是可滾動的，背景也不會在滾動元素內容時跟著移動。(這個屬性與 `background-clip: text` (en-US) 不相容。)

`local`

讓背景相對於元素的內容是固定的，且背景在滾動元素的內容時會跟著移動。另外，背景的繪製與定位區域是相對於元素的可滾動區域，而不是包裹著它們的邊框。

`scroll`

讓背景相對於元素本身是固定的，使背景在滾動元素的內容時不會跟著移動。（It is effectively attached to the element's border.）

### Formal syntax
```

background-attachment =
  <attachment># (en-US)

<attachment> =
  scroll  | (en-US)
  fixed   | (en-US)
  local

```

例子
--

### Simple example

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```

#### Result

### Multiple background images

這個屬性支援多個背景圖片。你可以對每個背景設定不同的 `<attachment>`。每個背景圖片會依序對應在 `<attachment>` 設定的類型。

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```

#### Result

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

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

|  |  |
| --- | --- |
| 預設值 (en-US) | `scroll` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line` (en-US). |
| 繼承與否 | no |
| Computed value (en-US) | as specified |
| Animation type | discrete |

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

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

See also
--------

* Using multiple backgrounds


width - CSS

width
=====

The **`width`** CSS property specifies the width of an element. By default, the property defines the width of the content area (en-US). If `box-sizing` is set to `border-box`, however, it instead determines the width of the border area (en-US).

```css
/\* <length> values \*/
width: 300px;
width: 25em;

/\* <percentage> value \*/
width: 75%;

/\* Keyword values \*/
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

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

Examples
--------
```

<div class="grid">
  <div class="col">
    <div class="cell">
      <length> values
      <p class="w1">width: 150px</p>
      <p class="w2">width: 20em</p>
      <p
 class="w3 warning"
 title="this feature is experimental and might not work in your browser">
        width: 20em content-box
      </p>
      <p
 class="w4 warning"
 title="this feature is experimental and might not work in your browser">
        width: 20em border-box
      </p>
    </div>
    <div class="cell">
      <percentage> values
      <p class="w5">width: 75%</p>
      <p
 class="w6 warning"
 title="this feature is experimental and might not work in your browser">
        width: 75% content-box
      </p>
      <p
 class="w7 warning"
 title="this feature is experimental and might not work in your browser">
        width: 75% border-box
      </p>
    </div>
    <div class="cell">
      Keyword values
      <p>width: auto</p>
      <p
 class="w8 warning"
 title="this feature is experimental and might not work in your browser">
        width: max-content
      </p>
      <p
 class="w9 warning"
 title="this feature is experimental and might not work in your browser">
        width: min-content
      </p>
      <p
 class="w10 warning"
 title="this feature is experimental and might not work in your browser">
        width: available
      </p>
      <p
 class="w11 warning"
 title="this feature is experimental and might not work in your browser">
        width: fit-content
      </p>
    </div>
  </div>
</div>
```

```
html,
body {
  height: 100%;
  box-sizing: border-box;
}

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

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: left;
  font-style: italic;
}

p {
  font-size: 1rem;
  font-style: normal;
  background: #e4f0f5;
  padding: 0.5em;
  margin: 0.5em;
}

.warning {
  background: #e4e4e4;
}

.warning:before {
  content: "⚠ ";
}

/\* values \*/
.w1 {
  width: 150px;
}
.w2 {
  width: 20em;
}
.w3 {
  width: 20em content-box;
}
.w4 {
  width: 20em border-box;
}

/\* value \*/
.w5 {
  width: 75%;
}
.w6 {
  width: 75% content-box;
}
.w7 {
  width: 75% border-box;
}

/\* Keyword values (mostly experimental) \*/
.w8 {
  width: max-content;
}
.w9 {
  width: min-content;
}
.w10 {
  width: available;
}
.w11 {
  width: fit-content;
}
```

**備註：** `min-width` (en-US) 和 `max-width` (en-US) 會覆寫 `width`.

|  |  |
| --- | --- |
| 預設值 (en-US) | `auto` |
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| 繼承與否 | no |
| Percentages | refer to the width of the containing block |
| Computed value (en-US) | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

Syntax
------

The `width` property is specified as either:

* one of the following keyword values: `available`, `min-content`, `max-content`, `fit-content`, `auto`.
* a `<length>` or a `<percentage>`. This may optionally be followed by one of the following keywords: `border-box`, `content-box`.
### Values

`<length>` (en-US)

Defines the width as an absolute value.

`<percentage>` (en-US)

Defines the width as a percentage of the containing block's width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.

`border-box`
實驗性質

If present, the preceding `<length>` (en-US) or `<percentage>` (en-US) is applied to the element's border box.

`content-box`
實驗性質

If present, the preceding `<length>` (en-US) or `<percentage>` (en-US) is applied to the element's content box.

`auto`

The browser will calculate and select a width for the specified element.

`fill`
實驗性質

Use the `fill-available` inline size or `fill-available` block size, as appropriate to the writing mode.

`max-content`
實驗性質

The intrinsic preferred width.

`min-content`
實驗性質

The intrinsic minimum width.

`available`
實驗性質

The containing block width minus horizontal margin, border and padding.

`fit-content`
實驗性質

The larger of: the intrinsic minimum width

* the smaller of the intrinsic preferred width and the available width

### Formal syntax
```

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

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

範例
--

### 預設寬度

```css
p.goldie {
  background: gold;
}
```

```html
<p class="goldie">The Mozilla community produces a lot of great software.</p>
```

### 像素和相對大小

```css
.px\_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em\_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
```

```html
<div class="px\_length">Width measured in px</div>
<div class="em\_length">Width measured in em</div>
```

### 百分比

```css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
```

```html
<div class="percent">Width in percentage</div>
```

### 內容最大值

```css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /\* Safari/WebKit uses a non-standard name \*/
  width: -moz-max-content; /\* Firefox/Gecko \*/
  width: -webkit-max-content; /\* Chrome \*/
}
```

```html
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
```

### 內容最小值

```css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
}
```

```html
<p class="minblue">The Mozilla community produces a lot of great software.</p>
```

規範
--

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

參考
--

* box model (en-US), `height`, `box-sizing`, `min-width` (en-US), `max-width` (en-US)


white-space - CSS

white-space
===========

此 CSS **`white-space`** 屬性決定如何處理元素內的空白字元。

**備註：** 如果要讓文字本身斷行，請改用 `overflow-wrap` (en-US)、`word-break` (en-US) 或 `hyphens` (en-US)。

```css
/\* Keyword values \*/
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/\* Global values \*/
white-space: inherit;
white-space: initial;
white-space: unset;
```

|  |  |
| --- | --- |
| 預設值 (en-US) | `normal` |
| Applies to | all elements |
| 繼承與否 | yes |
| Computed value (en-US) | as specified |
| Animation type | discrete |

Syntax
------

`white-space` 的特性值為下列其中之一。

### Values

`normal`

連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。

`nowrap`

對待空白字元的方式跟 `normal` 一樣，且會強制不換行。

`pre`

連續的空白字元都會被保留。換行在有換行字元以及`<br>`時發生。

`pre-wrap`

連續的空白字元都會被保留。換行會在換行字元、有`<br>`元素以及被文字空間限制時發生。

`pre-line`

連續的空白字元會被合併(collapse)。換行在換行字元、 `<br>`以及被文字空間限制時發生。

下列表格整理了各項 `white-space` 值的行為：

|  | New lines | Spaces and tabs | Text wrapping |
| --- | --- | --- | --- |
| `normal` | Collapse | Collapse | Wrap |
| `nowrap` | Collapse | Collapse | No wrap |
| `pre` | Preserve | Preserve | No wrap |
| `pre-wrap` | Preserve | Preserve | Wrap |
| `pre-line` | Preserve | Collapse | Wrap |

### Formal syntax
```

white-space =
  normal        | (en-US)
  pre           | (en-US)
  nowrap        | (en-US)
  pre-wrap      | (en-US)
  break-spaces  | (en-US)
  pre-line

```

Examples
--------

### Basic example

```css
code {
  white-space: pre;
}
```

### Line breaks inside `<pre>` (en-US) elements

```css
pre {
  word-wrap: break-word; /\* IE 5.5-7 \*/
  white-space: -moz-pre-wrap; /\* Firefox 1.0-2.0 \*/
  white-space: pre-wrap; /\* Modern browsers \*/
}
```

See it in action
----------------
```

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
```

```
.box {
  width: 300px;
  padding: 16px;
  border-radius: 10px;
}

#css-code {
  background-color: rgb(220, 220, 220);
  font-size: 16px;
}

#results {
  background-color: rgb(230, 230, 230);
  overflow-x: scroll;
  height: 400px;
  white-space: normal;
  font-size: 14px;
}
```

```
var select = document.querySelector("#css-code select");
var results = document.querySelector("#results p");
select.addEventListener("change", function (e) {
  results.setAttribute("style", "white-space: " + e.target.value);
});
```

### Source
```

    <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
```

### CSS + Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # white-space-property |

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

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

See also
--------

* Properties that define how words break *within themselves*: `overflow-wrap` (en-US), `word-break` (en-US), `hyphens` (en-US)


grid-template - CSS

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

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

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

* Learn more
* See full compatibility
* Report feedback
的\*\*`grid-template`\*\*CSS 屬性是一個速記屬性，用於定義grid columns (en-US)，rows (en-US)，和area (en-US)。

嘗試一下
----

作者可以為長期屬性設置值：`grid-template-rows` (en-US),`grid-template-columns` (en-US)和`grid-template-areas`  (en-US)。

句法
--

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

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

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

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

### 價值觀

`none`

是將所有三個長期屬性設置為的關鍵字`none`，表示沒有顯式網格。沒有命名的網格區域。行和列將隱式生成；它們的大小將由`grid-auto-rows` (en-US)和`grid-auto-columns` (en-US)屬性確定。

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

將`grid-template-rows` (en-US)和`grid-template-columns` (en-US)設置為指定值，並設置`grid-template-areas` (en-US)至`none`。

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

 Sets `grid-template-areas` (en-US) to the strings listed, `grid-template-rows` (en-US) to the track sizes following each string (filling in `auto` for any missing sizes), and splicing in the named lines defined before/after each size, and `grid-template-columns` (en-US) to the track listing specified after the slash (or `none`, if not specified).
 Note: The `repeat()` (en-US) function isn't allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the 「ASCII art」.

**Note:** The `grid` (en-US) shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use `grid` (as opposed to `grid-template`) to prevent these values from cascading in seperately.

### Formal syntax
```

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

<line-names> =
  '[' <custom-ident> (en-US)\* (en-US) ']'

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

<explicit-track-list> =
  [ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US)

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

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

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

Examples
--------

### CSS

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

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

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

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

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

### HTML

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

### Result

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

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

|  |  |
| --- | --- |
| 預設值 (en-US) | as each of the properties of the shorthand:* `grid-template-columns` (en-US): `none`
* `grid-template-rows` (en-US): `none`
* `grid-template-areas` (en-US): `none`
 |
| Applies to | grid containers |
| 繼承與否 | no |
| Percentages | as each of the properties of the shorthand:* `grid-template-columns` (en-US): refer to corresponding dimension of the content area
* `grid-template-rows` (en-US): refer to corresponding dimension of the content area
 |
| Computed value (en-US) | as each of the properties of the shorthand:* `grid-template-columns` (en-US): as specified, but with relative lengths converted into absolute lengths
* `grid-template-rows` (en-US): as specified, but with relative lengths converted into absolute lengths
* `grid-template-areas` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `grid-template-columns` (en-US): simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-rows` (en-US): simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-areas` (en-US): discrete
 |

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

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

See also
--------

* Related CSS properties: `grid-template-rows` (en-US), `grid-template-columns` (en-US), `grid-template-areas` (en-US)
* Grid Layout Guide: *Line-based placement with CSS Grid (en-US)*
* Grid Layout Guide: *Grid template areas - Grid definition shorthands (en-US)*
* Video tutorial:\_ Grid Template shorthand\_


border-bottom-color - CSS

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

**`border-bottom-color`** 是一種 CSS 屬性，用來設定元件下側邊框 (en-US)的顏色。也可由含括此屬性功能的簡寫屬性 `border-color` 或 `border-bottom` (en-US) 設定該屬性值。

嘗試一下
----

語法
--

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

/\* Global values \*/
border-bottom-color: inherit;
border-bottom-color: initial;
border-bottom-color: revert;
border-bottom-color: revert-layer;
border-bottom-color: unset;
```

`border-bottom-color`只能宣告一個屬性值。

### 屬性值

`<color>` (en-US)

定義下側邊框色彩。

Formal definition 標準定義
----------------------

|  |  |
| --- | --- |
| 預設值 (en-US) | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter`. |
| 繼承與否 | no |
| Computed value (en-US) | computed color |
| Animation type | a color |

Formal syntax 語法規則
------------------
```

border-bottom-color =
  <color> (en-US)     | (en-US)
  <image-1D>

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

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

<color-stripe> =
  <color> (en-US)                            && (en-US)
  [ (en-US) <length-percentage> | (en-US) <flex> (en-US) ] (en-US)? (en-US)

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

範例
--

### 簡易邊框範例

#### HTML

```html
<div class="mybox">
  <p>
    這是一個帶有框線的方框。 請注意某側框線顏色已設為
    <span class="redtext">紅色</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.

參見
--

* 與框線相關的簡寫屬性：`border` (en-US)、`border-bottom` (en-US)、`border-color`。
* 與顏色相關的其他框線屬性：`border-right-color`、`border-top-color`、`border-left-color`。
* 與同側框線相關的其他屬性：`border-bottom-style` (en-US)、`border-bottom-width` (en-US)。


::first-letter (:first-letter) - CSS

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

概要
--

`::first-letter` CSS 虛擬元素 (en-US)選取了一個區塊第一行的第一個字母，如果那一行前面沒有其他內容（例如圖片或是行內表格）。

The first letter of an element is not necessarily trivial to identify:

* Punctuation, that is any characters defined in Unicode in the *open* (Ps), *close* (Pe), *initial quote* (Pi), *final quote* (Pf) and *other punctuation* (Po) classes, preceding or immediately following the first letter is also matched by this pseudo-element.
* Similarly some languages have digraphs that are always capitalized together, like the `IJ` in Dutch. In these rare cases, both letters of the digraph should be matched by the `::first-letter` pseudo-element. (This is poorly supported by browsers, check the browser compatibility table (en-US)).
* Finally, a combination of the `::before` (en-US) pseudo-element and the `content` (en-US) property may inject some text at the beginning of the element. In that case, `::first-letter` will match the first letter of this generated content.

A first line has meaning only in a block-container box (en-US), therefore the `::first-letter` pseudo-element has an effect only on elements with a `display` (en-US) value of `block`, `inline-block`, `table-cell`, `list-item` or `table-caption`. In all other cases, `::first-letter` has no effect.

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the `::first-letter` pseudo-element:

* All font properties : `font` (en-US), `font-style` (en-US), `font-feature-settings` (en-US), `font-kerning` (en-US), `font-language-override` (en-US), `font-stretch` (en-US), `font-synthesis` (en-US), `font-variant` (en-US), `font-variant-alternates` (en-US), `font-variant-caps` (en-US), `font-variant-east-asian` (en-US), `font-variant-ligatures` (en-US), `font-variant-numeric` (en-US), `font-variant-position` (en-US), `font-weight` (en-US), `font-size` (en-US), `font-size-adjust` (en-US), `line-height` (en-US) and `font-family` (en-US).
* All background properties : `background` (en-US), `background-color`, `background-image` (en-US), `background-clip` (en-US), `background-origin` (en-US), `background-position` (en-US), `background-repeat` (en-US), `background-size` (en-US), `background-attachment`, and `background-blend-mode` (en-US).
* All margin properties: `margin` (en-US), `margin-top` (en-US), `margin-right` (en-US), `margin-bottom` (en-US), `margin-left` (en-US).
* All padding properties: `padding` (en-US), `padding-top` (en-US), `padding-right` (en-US), `padding-bottom` (en-US), `padding-left` (en-US).
* All border properties: the shorthands `border` (en-US), `border-style` (en-US), `border-color`, `border-width` (en-US), `border-radius` (en-US), `border-image`, and the longhands properties.
* The `color` (en-US) property.
* The `text-decoration` (en-US), `text-shadow` (en-US), `text-transform` (en-US), `letter-spacing` (en-US), `word-spacing` (en-US) (when appropriate), `line-height` (en-US), `text-decoration-color` (en-US), `text-decoration-line` (en-US), `text-decoration-style` (en-US), `box-shadow`, `float` (en-US), `vertical-align` (en-US) (only if `float` is `none`) CSS properties.

As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.

**備註：** In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.If legacy browsers must be supported, `:first-letter` is the only viable choice; if not, `::first-letter` is preferred.

Example
-------

Make the first letter of every paragraph red and big.

### HTML Content

```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem
  ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
  dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
  feugait nulla facilisi.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>
```

### CSS Content

```css
p::first-letter {
  /\* Use :first-letter if support for IE 8 or earlier is needed \*/
  color: red;
  font-size: 130%;
}
```

### Output

規範
--

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

瀏覽器相容性
------

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

參見
--

* `::first-line` (en-US) 虛擬元素。


box-sizing - CSS

box-sizing
==========

**實驗性質:** **這是一個實驗中的功能 (en-US)**
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

The **`box-sizing`** property is used to alter the default CSS box model (en-US) used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

**`box-sizing`** 屬性用於更改預設 CSS 盒子模型 (en-US)中所計算的寬度和高度。可以使用此屬性來模擬不正確支持 CSS 盒子模型規範的瀏覽器的行為。

|  |  |
| --- | --- |
| 預設值 (en-US) | `content-box` |
| Applies to | all elements that accept width or height |
| 繼承與否 | no |
| Computed value (en-US) | as specified |
| Animation type | discrete |

句法
--

```css
/\* Keyword values \*/
box-sizing: content-box;
box-sizing: border-box;

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

### 值

* `content-box`
    + : 這是根據 CSS 標準的起始值和預設值。 `width` 與 `height` 只包括內容本身的寬和高， 不包括邊框（border）、內邊距（padding）、外邊距（margin）。注意：內邊距、邊框和外邊距都在這個盒子的外部。例如，如果 `.box {width: 350px};` 而且 `{border: 10px solid black;}`，那麼在瀏覽器中的渲染該容器的實際寬度將是 370px，簡單來說，尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。
* `border-box`
    + : `width` 和 `height` 屬性包括內容（content），內邊距（padding）和邊框（border），但不包括外邊距（margin）。這是當文檔處於 Quirks 模式時 Internet Explorer 所使用的盒模型 (en-US)。注意，內邊距和邊框都將在盒子內 ，例如，`.box {width: 350px; border: 10px solid black;}`，渲染出的容器寬度會固定在 350px，而內容（content）的寬度就會變成 330px，因為邊框（border）佔了 20px。內容框不能為負，並且進位到 0，使得不可能使用 border-box 使元素消失。這裡的維度計算為：
 *width = border + padding + 內容的 width*，
 *height = border + padding + 內容的 height*。
* `padding-box`
非標準

已棄用

    + : The `width` and `height` properties include the content, the padding but neither the border, nor the margin. Only Firefox implemented this value, and it was removed in Firefox 50.
### Formal syntax
```

box-sizing =
  content-box  | (en-US)
  border-box

```

Examples
--------

```css
/\* support Firefox, Chrome, Safari, Opera, IE8+ and old Android \*/

.example {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # box-sizing |

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

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

See also
--------

* CSS box model (en-US)


虛擬類別 - CSS

虛擬類別
====

CSS **虛擬類別**（pseudo-class）的元素，在特殊狀態下被選取的話，會作為關鍵字被加到選擇器裡面。例如 `:hover` (en-US) 會讓用戶的滑鼠停在某個元素的時候，套用指定選擇器的樣式。

虛擬類別與 `pseudo-elements` (en-US) 能讓你不只能給文件樹（document tree）本身的相關內容套用樣式，還能給諸如瀏覽歷史（`:visited` (en-US)）、內容的狀態（`:checked` (en-US)）、還有滑鼠的位置（像 `:hover` (en-US) 就能讓偵測滑鼠是否在元件上）之類的外部相關因素套用樣式。

語法
--
```

selector:pseudo-class {
  property: value;
}
```

基本虛擬類別的目錄
---------

* `:active` (en-US)
* `:any` (en-US)
* `:checked` (en-US)
* `:default` (en-US)
* `:dir()` (en-US)
* `:disabled` (en-US)
* `:empty` (en-US)
* `:enabled` (en-US)
* `:first` (en-US)
* `:first-child`
* `:first-of-type`
* `:fullscreen` (en-US)
* `:focus` (en-US)
* `:hover` (en-US)
* `:indeterminate` (en-US)
* `:in-range` (en-US)
* `:invalid` (en-US)
* `:lang()`
* `:last-child` (en-US)
* `:last-of-type` (en-US)
* `:left` (en-US)
* `:link` (en-US)
* `:not()` (en-US)
* `:nth-child()` (en-US)
* `:nth-last-child()` (en-US)
* `:nth-last-of-type()` (en-US)
* `:nth-of-type()` (en-US)
* `:only-child` (en-US)
* `:only-of-type` (en-US)
* `:optional` (en-US)
* `:out-of-range` (en-US)
* `:read-only` (en-US)
* `:read-write` (en-US)
* `:required` (en-US)
* `:right` (en-US)
* `:root` (en-US)
* `:scope` (en-US)
* `:target`
* `:valid` (en-US)
* `:visited` (en-US)
規範
--

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

參閱
--

* `pseudo-elements` (en-US)


animation-fill-mode - CSS

animation-fill-mode
===================

**`animation-fill-mode`** CSS 属性指定 CSS 动画应该如何在其执行前后的样式展示情况。

```css
/\* Single animation \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* Multiple animations \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
```

使用提示 `animation` 来一次设置所有动画属性通常很方便。

语法
--

### 属性值

`none`

不执行动画时，动画不会应用任何样式。该元素会使用其 **`keyframes`** 关键动画帧规则来显示动画。这是默认值。

`forwards`

动画执行后停留到最后一个关键帧动画的计算值，简单来说执行结束动画会停留到结束时候的状态，不会是动画执行之前的效果。比如一个元素从左往右运动，添加当前属性值 **`forwards`** 元素会停留到动画执行结束后的右边而不是最初的左边。

当然最后动画停留显示的关键帧会取决于 `"animation-direction"` 和 `"animation-iteration-count"` 这两个属性 运行方向和运行次数:

| `animation-direction` | `animation-iteration-count` | last keyframe encountered |
| --- | --- | --- |
| `normal` | 偶数或奇数值 | `100%` 或 `to` |
| `reverse` | 偶数或奇数值 | `0%` 或 `from` |
| `alternate` | 偶数值 | `0%` 或 `from` |
| `alternate` | 奇数值 | `100%` 或 `to` |
| `alternate-reverse` | 偶数值 | `100%` 或 `to` |
| `alternate-reverse` | 奇数值 | `0%` 或 `from` |

`backwards`

与上面 **`forwards`** 值效果相反，动画执行后停留到第一个关键帧动画，准确说是没有执行动画之前的初始状态。

【（the animation will apply the values defined in the first relevant keyframe (en-US) as soon as it is applied to the target, and retain this during the `"animation-delay"` period.）原文大概意思是会停留第一个关键帧，并会保留 `"animation-delay"` 延迟属性的所设定周期。】

会在延迟之后才开始执行关键帧动画，而不是一开始使用第一帧进行停留，具体可以结合 **`both`** 的例子进行尝试。

第一个相关关键帧会取决于 `"animation-direction"` 方向属性:

| `animation-direction` | `first relevant keyframe` |
| --- | --- |
| `normal` 或 `alternate` | `0%` 或 `from` |
| `reverse` 或 `alternate-reverse` | `100%` 或 `to` |

`both`

动画将遵循开始和结束后的帧动画进行停留，也就是说会从第一帧开始停留显示，动画执行之后会停留到动画结束时的状态。

与上面两个值的差别是，如果元素使用 **`forwards`**、**`backwards`** 两个值会在没有添加动画之前的展示状态进行停留，执行动画的时候才会开始执行关键帧，有这么一些细小的差别。

**備註：** 当你在一个 `animation-*` 属性上指定多个逗号分隔的值时，它们将被分配给 `"animationname"` 属性中指定的动画，这取决于有多少动画。有关更多信息，请参见设置多个动画属性值。

Example
-------

You can see the effect of `animation-fill-mode` in the following example. It demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default).

### HTML

```html
<p>Move your mouse over the gray box!</p>
<div class="demo">
  <div class="growsandstays">This grows and stays big.</div>
  <div class="grows">This just grows.</div>
</div>
```

### CSS

```css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
```

查看 CSS animations (en-US) 更多有關的例子

相關鏈接
----

* Using CSS animations
* JavaScript `AnimationEvent` API


:lang() - CSS

:lang()
=======

**`:lang()`** 是一種 CSS 偽類（pseudo-class）。它會根據括號中指定的語系，來選擇使用的元素。

**備註：** 在 HTML 中，語言是通過 `lang` (en-US) 屬性和 `<meta>` (en-US) 元素的組合來決定的, 也可能是通過協議的信息來確定 (例如 HTTP 表頭). 對於其他文檔類型，也可能存在其他用於確定語言的方法。

語法
--

### 語法格式

```css
:lang(<language-code>) {
  /\* ... \*/
}
```

### 參數

`<language-code>`

`<string>` (en-US) 代表你要指定的語言。可接受的值為 HTML 規範中指定的值。

範例
--

在此例中，`:lang()` 偽類 會依據 「引用元素 quote」 (`<q>`) 的父層來選擇 子組合子 ( child combinators ) (en-US)。 請注意，此處演示的方法並不是唯一的，並且最好的方式，是依據文檔類型來確定。還要注意的是， Unicode (en-US) 的值，有明確指定到那些你要使用的字符。

### HTML

```html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>
```

### CSS

```css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}
```

### 結果

技術規格
----

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

瀏覽器兼容性
------

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

其他參考
----

* 語言相關偽類： `:lang`, `:dir` (en-US)
* HTML `lang` (en-US) 屬性
* BCP 47 - Tags for Identifying Languages (BCP 47 - 識別語言的標籤)


CSS Selectors - CSS

CSS Selectors
=============

**選擇器**可以定義某組 CSS 樣式要套用到哪些元素上。

基本選擇器
-----

通用選擇器 (en-US)（Universal selector (en-US)）

 用以選擇所有元素。（可選）可以將其限制為特定的名稱空間或所有名稱空間。
 **語法:** `* ns|* *|*`
**範例:** `*` 套用文檔中所有元素。

標籤選擇器（Type selector）

 用以選擇所有符合指定標籤的元素。
 **語法:** `elementname`
**範例:** `input` 可選出任一 <input> (en-US) 元素。

類別選擇器 (en-US)（Class selector (en-US)）

 用以選擇所有符合指定 `class` 屬性值的元素。
 **語法:** `.classname`
**範例:** `.index` 可選出任一含有 `index` 的 class 屬性值之元素。

ID 選擇器 (en-US)（ID selector (en-US)）

 用以選擇指定 `id` 屬性值的元素。（一個文件中，每個 ID 屬性都是唯一的。）
 **語法:** `#idname`
**範例:** `#toc` 會比對含有 ID 是 toc 的元素(可以定義成 `id="toc"` 或其他類似的定義)。

屬性選擇器 (en-US)（Attribute selector (en-US)）

 用以選擇所有符合指定屬性的元素。
 **語法:** `[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]`
**範例:** `[autoplay]` 將會套用含有 `autoplay` 屬性的元素。(不論這個屬性的值是什麼)。

分組選擇器
-----

選擇器列表（Selector list (en-US)）

`,` 用以將不同的選擇器組合起來的一種方法。
 **語法:** `A, B`
**範例:** `div, span` 將同時選擇 `<div>` 和 `<span>` (en-US) 元素。

組合選擇器
-----

後代選擇器（Descendant combinator）

" " (空格) 用以選擇某個元素後代的元素。 **語法:** `A B`**範例:** `div span` 套用所有 `<div>` 元素內部的所有 `<span>` (en-US) 元素。

子代選擇器 (en-US)（Child combinator (en-US)）

`>` 用以選擇某個元素後代的元素。
 **語法:** `A > B`（B 元素不可在 A 元素的其他元素裡）
 **範例:** `ul > li` 套用所有 `<li>` (en-US) 元素內部的 `<ul>` (en-US) 子元素。

一般兄弟選擇器 (en-US)（General sibling combinator (en-US)）

`~` combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
 **語法:** `A ~ B`
**範例:** `p ~ span` will match all `<span>` (en-US) elements that follow a `<p>` (en-US), immediately or not.

相鄰兄弟選擇器 (en-US)（Adjacent sibling combinator (en-US)）

`+` 選擇緊接在後的元素，並共享父元素。
 **語法:** `A + B`
**範例:** `h2 + p` 套用所有 緊接在 `<h2>` (en-US) 元素後的 <p> (en-US) 元素，並擁有 `<h2>` (en-US) 的父元素。

Column combinator (en-US)
實驗性質

 The `||` combinator selects nodes which belong to a column.
 **語法:** `A || B`
**範例:** `col || td` will match all `<td>` (en-US) elements that belong to the scope of the `<col>` (en-US).

偽選擇器
----

Pseudo classes

 The `:` pseudo allow the selection of elements based on state information that is not contained in the document tree.
 **範例:** `a:visited` will match all `<a>` (en-US) elements that have been visited by the user.

Pseudo elements (en-US)

 The `::` pseudo represent entities that are not included in HTML.
 **範例:** `p::first-line` will match the first line of all `<p>` (en-US) elements.

規範
--

| Specification |
| --- |
| Selectors Level 4  |

See the pseudo-class and pseudo-element (en-US) specification tables for details on those.

參見
--

* CSS Specificity (en-US)