recursal/MDN huggingface dataset:
border-right-color
==================

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

嘗試一下
----

語法
--


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

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


`border-right-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-right-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-right-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-right` (en-US)、`border-color`。
* 與顏色相關的其他框線屬性：`border-left-color`、`border-bottom-color`、`border-top-color`。
* 與同側框線相關的其他屬性：`border-right-style` (en-US)、`border-right-width` (en-US)。
ruby-position
=============

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

CSS 的 **`ruby-position`** 屬性定義了 ruby 元素與該基礎元素（base element）相關聯的位置。它能在元素上方（`over`）、下方（`under`）、兩個字符之間、抑或右方（`inter-character`）。


```css
/\* 關鍵字值 \*/
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;

/\* 全域值 \*/
ruby-position: inherit;
ruby-position: initial;
ruby-position: unset;
```


|  |  |
| --- | --- |
| 預設值 (en-US) | `alternate` |
| Applies to | ruby annotations containers |
| 繼承與否 | yes |
| Computed value (en-US) | as specified |
| Animation type | discrete |

語法
--

### 屬性值

`over`

![Over example](/zh-TW/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.20.png)如果文件以橫式排列，該關鍵字會指引旁註標記（ruby）出現在主文的上方。如果文件以直式排列，則會出現在主文的右方。


`under`

![Under example](/zh-TW/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.07.png)如果文件以橫式排列，該關鍵字會指引旁註標記出現在在主文的下方。如果文件以直式排列，則會出現在主文的左方。


`inter-character`

該關鍵字會指引旁註標記出現在在主文的兩個字符的中間。

### 正式語法
```

ruby-position =   
  [ (en-US) alternate || (en-US) [ (en-US) over | (en-US) under ] (en-US) ] (en-US)  | (en-US)  
  inter-character                      
  
```

示例
--

HTML 會因為 `ruby-position` 的值不同，而作出不同的渲染：


```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```

### 旁註標記定位到主文上方


```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```



```css
ruby {
  ruby-position: over;
}
```


它會給出如下結果：

### 旁註標記定位到主文下方


```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```



```css
ruby {
  ruby-position: under;
}
```


它會給出如下結果：

規範
--

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # rubypos |

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

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

參見
--

* HTML 的旁註標記元素：`<ruby>`、`<rt>` (en-US)、`<rp>` (en-US)、`<rtc>` (en-US)。
* CSS 的旁註標記屬性：`ruby-align` (en-US)、`ruby-merge`。
height
======

概要
--

**`高度(height)`** 的 CSS 屬性指定了元素內容區域的高度。content area (en-US) 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。

`min-height` (en-US) 與 `max-height` (en-US) 的特性比 `height` 更重要。

|  |  |
| --- | --- |
| 預設值 (en-US) | `auto` |
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| 繼承與否 | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| Computed value (en-US) | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

語法
--


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

/\* <length> values \*/
height: 120px;
height: 10em;

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

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

### 值

`<length>`

查看 `<length>` (en-US) 可用的單位。

`<percentage>`

`<percentage>` (en-US) 相對於元素的塊狀高度。如果沒有指定塊狀元素的高度，預設值為 `auto。`用在 root 元素 (e.g. `<html>`) 上是相對於初始塊狀元素（即顯示器的尺寸）。

`border-box`
實驗性質

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

`content-box` 
實驗性質

`<length>` (en-US) 或 `<percentage>` (en-US) 是應用於元素的 content box.

`auto`

瀏覽器將計算並選擇指定元素的高度。

fill 
實驗性質

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

`max-content` 
實驗性質

The intrinsic preferred height.

`min-content` 
實驗性質

The intrinsic minimum height.

`available` 
實驗性質

The containing block height minus vertical margin, border and padding.

`fit-content` 
實驗性質

The larger of:

* the intrinsic minimum height
* the smaller of the intrinsic preferred height and the available height

### 正式語法
```

height =   
  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)    
  
```

範例
--

### HTML


```html
<div id="red">
  <span>I'm 50 pixels tall.</span>
</div>
<div id="green">
  <span>I'm 25 pixels tall.</span>
</div>
<div id="parent">
  <div id="child">
    <span>I'm half the height of my parent.</span>
  </div>
</div>
```

### CSS


```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

規格
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* box model (en-US), `width`, `box-sizing`, `min-height` (en-US), `max-height` (en-US)
border-top-color
================

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

嘗試一下
----

語法
--


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

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


`border-top-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-top-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-top-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-top` (en-US)、`border-color`。
* 與顏色相關的其他框線屬性：`border-right-color`、`border-bottom-color`、`border-left-color`。
* 與同側框線相關的其他屬性：`border-top-style` (en-US)、`border-top-width` (en-US)。
繼承
==

摘要
--

每個 CSS property definition (en-US) 都寫道是否這個屬性預設有繼承: ("Inherited: Yes") 或是 預設沒有繼承: ("Inherited: no"). 這個設定將會在沒有位屬性標註值時發生.

繼承屬性
----

When no value for an **inherited property** has been specified on an element, the element gets the computed value (en-US) of that property on its parent element. Only the root element of the document gets the initial value (en-US) given in the property's summary.

A typical example of an inherited property is the `color` (en-US) property. Given the style rules:


```css
p {
  color: green;
}
```


HTML:


```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```


the words "emphasized text" will appear green, since the `em` element has inherited the value of the `color` (en-US) property from the `p` element. It does *not* get the initial value of the property (which is the color that is used for the root element when the page specifies no color).

非繼承屬性
-----

When no value for an **non-inherited property** (sometimes called a **reset property** in Mozilla code) has been specified on an element, the element gets the initial value (en-US) of that property (as specified in the property's summary).

A typical example of a non-inherited property is the `border` (en-US) property. Given the style rules:


```css
p {
  border: medium solid;
}
```


HTML:


```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```


the words "emphasized text" will not have a border (since the initial value of `border-style` (en-US) is `none`).

註
-

`inherit` (en-US) 關鍵字允許作者準確地去標註. 這個在繼承和非繼承屬性都是有效的.

參見
--

* CSS Reference (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)
    + 特性簡寫
    + 可置換元素
* `inherit` (en-US)
CSS 彈性盒子排版
==========

**CSS 彈性盒子排版**（CSS Flexible Box Layout）是 CSS 的模組。它為了最佳化 CSS 盒子模型的使用者介面設計而來、並把項目都配置在一個維度之內。在彈性盒子排版中，彈性容器的子項目們可以伸展到任何方向、並讓他們的尺寸更加「彈性」、或者持續增大，以填補未使用的空間，抑或縮小，以避免父元素溢出。子項目橫向或縱向對齊都很容易操作。

基本範例
----

下例的容器已經設為 `display: flex`、意味著三個子元素變成了彈性項目（flex item）。`justify-content` 值也設成了 `space-between` 以便將項目均勻地分佈在主軸上。每個物品之間放置相等數量的空間，左右項目與彈性容器（flex container）的邊緣齊平。你可能也發現到各項目在切軸（cross axis）上伸展。那是因為 `align-items` 的值是 `stretch`。項目伸展為彈性容器的高度、令它們看起来都如同最高的項目一般高。

參考
--

### CSS 屬性

* `flex` (en-US)
* `flex-basis` (en-US)
* `flex-direction` (en-US)
* `flex-flow` (en-US)
* `flex-grow` (en-US)
* `flex-shrink` (en-US)
* `flex-wrap` (en-US)
* `order` (en-US)
### 對齊屬性

The properties `align-content`, `align-self`, `align-items` and `justify-content` initially appeared in the Flexbox specification, but are now defined in Box Alignment and the Flexbox spec refers to the Box Alignment Specification for up to date definitions. Additional alignment properties are also defined in Box Alignment.

* `justify-content` (en-US)
* `align-content` (en-US)
* `align-items` (en-US)
* `align-self` (en-US)
* `place-content` (en-US)
* `place-items` (en-US)
* `row-gap` (en-US)
* `column-gap` (en-US)
* `gap` (en-US)
### 短詞

* Flexbox (en-US)
* Flex Container (en-US)
* Flex Item (en-US)
* Main Axis (en-US)
* Cross Axis (en-US)
* Flex (en-US)
教學
--

彈性盒子的基本概念

彈性盒子的概述

彈性盒子與其他排版的關係 (en-US)

彈性盒子如何與其他排版和 CSS 規範相關連

在彈性容器內對齊 (en-US)

彈性盒子的 Box Alignment 屬性如何做動。

給彈性項目排序 (en-US)

解釋改變彈性項目順序和方向的不同方法，並講到潛在的問題。

控制彈性項目與主軸的比例 (en-US)

將解釋 flex-grow、flex-shrink、flex-basis 屬性。

掌握彈性項目 wrapping (en-US)

如何使用多行建立彈性容器，並控制這些行中項目的顯示。

彈性盒子的典型用例 (en-US)

彈性盒子常見的設計範式。

彈性盒子的向下相容 (en-US)

彈性盒子的瀏覽器相容性、互操作性問題、支持舊版瀏覽器和規範的版本

規範
--

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

參見
--

Flexbugs

a community-curated list of flexbox browser bugs and workarounds

Cross-browser Flexbox mixins (en-US)

This article provides a set of mixins for those who want to create cross-browser flexbox experiences that even work in older browser that don't support the modern flexbox syntax
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
==========

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

**`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 的控制範圍之內。這類外部物件所呈現的內容均獨立於 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 格線佈局**長於把頁面的主要區域分離、或是在 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  |