recursal/MDN huggingface dataset:
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
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
==========

**`@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)
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
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)。
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 **虛擬類別**（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
===================

**`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()
=======

**`: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 樣式要套用到哪些元素上。

基本選擇器
-----

通用選擇器 (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)