簡寫屬性

簡寫屬性（Shorthand properties）是 CSS 的一種屬性，其允許你同時為多個其他 CSS 屬性設定值。使用簡寫屬性，你可以寫出更簡潔（通常也更具可讀性）的樣式表，從而節省時間和精力。

CSS 規範定義了簡寫屬性，用於將作用於同一主題的通用屬性的定義組合在一起。例如，CSS 的 background 屬性就是一個簡寫屬性，它可以定義 background-color、background-image、background-repeat 和 background-position 的值。同樣，最常見的字型相關屬性可以使用簡寫屬性 font 來定義，而盒子周圍的不同外邊距則可以使用 margin 簡寫屬性來定義。

棘手的邊界情況

使用簡寫屬性時，有幾個邊界情況需要注意。

省略屬性

未指定的值會被設為其初始值。這意味著它會覆蓋先前設定的值。例如：

css

p {
  background-color: red;
  background: url("images/bg.gif") no-repeat left top;
}

這不會將背景顏色設定為 red，而是會將其設定為 background-color 的預設值，即 transparent。

只有單個屬性的值可以被繼承。由於缺失的值會被其初始值替換，因此無法透過省略它們來繼承單個屬性。關鍵字 inherit 可以應用於一個屬性，但只能作為一個整體，而不能作為某個特定值的關鍵字。這意味著要讓某個特定的值被繼承，唯一的方法是使用帶有 inherit 關鍵字的完整屬性。

屬性值的順序

簡寫屬性儘量不強制規定其所替代的屬性值的特定順序。當這些屬性使用不同型別的值時，這樣做效果很好，因為順序無關緊要。但是，當多個屬性可以有相同的值時，這就沒那麼容易了。

這裡有兩個重要的情況：

與盒子的邊相關的屬性，如 border-style、margin 或 padding
與盒子的角相關的屬性，如 border-radius

盒子的邊

處理與盒子邊緣相關的簡寫屬性，如 border-style、margin 或 padding，總是使用一種一致的一到四個值的語法來表示這些邊：

單個值語法： border-width: 1em — 單個值表示所有邊：
兩個值語法： border-width: 1em 2em — 第一個值表示垂直方向的邊，即上邊和下邊；第二個值表示水平方向的邊，即左邊和右邊：
三個值語法： border-width: 1em 2em 3em — 第一個值表示上邊，第二個值表示水平方向的邊，即左邊和右邊，第三個值表示下邊：
四個值語法： border-width: 1em 2em 3em 4em — 四個值分別表示上、右、下、左四個邊，始終按此順序，即從頂部開始順時針旋轉：上-右-下-左（Top-Right-Bottom-Left）的首字母縮寫為 TRBL。你也可以將其記為時鐘指標旋轉的順序：1em 從 12 點鐘位置開始，然後 2em 在 3 點鐘位置，3em 在 6 點鐘位置，4em 在 9 點鐘位置。

盒子的角

同樣地，處理與盒子角相關的簡寫屬性，如 border-radius，也總是使用一致的一到四個值的語法來表示這些角：

單個值語法： border-radius: 1em — 單個值表示所有角：
兩個值語法： border-radius: 1em 2em — 第一個值表示左上角和右下角，第二個值表示右上角和左下角：
三個值語法： border-radius: 1em 2em 3em — 第一個值表示左上角，第二個值表示右上角和左下角，第三個值表示右下角：
四個值語法： border-radius: 1em 2em 3em 4em — 四個值分別表示左上角、右上角、右下角和左下角，始終按此順序，即從左上角開始順時針旋轉：

背景屬性

考慮一個具有以下屬性的背景：

css

background-color: black;
background-image: url("images/bg.gif");
background-repeat: no-repeat;
background-position: left top;

這四個宣告可以縮短為只有一個：

css

background: black url("images/bg.gif") no-repeat left top;

（該簡寫形式實際上等同於上述的完整屬性加上 background-attachment: scroll，並且在 CSS3 中還包含一些額外的屬性。）

有關更詳細的資訊，包括 CSS3 屬性，請參閱 background。

字型屬性

考慮以下宣告：

css

font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: "Arial", sans-serif;

這 5 個語句可以縮短為以下形式：

css

font:
  italic bold 0.8em/1.2 "Arial",
  sans-serif;

這個簡寫宣告實際上等同於上述的完整宣告，再加上 font-variant: normal、font-size-adjust: none 和 font-stretch: normal。

邊框屬性

對於邊框，寬度、顏色和樣式可以簡化為一個宣告。例如，考慮以下 CSS：

css

border-width: 1px;
border-style: solid;
border-color: black;

它可以簡化為：

css

border: 1px solid black;

外邊距和內邊距屬性

外邊距和內邊距值的簡寫版本工作方式類似；margin 屬性允許使用一、二、三或四個值來指定簡寫值。考慮以下 CSS 宣告：

css

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

它們與使用四個值的簡寫宣告是相同的。注意，這些值是按順時針順序排列的，從頂部開始：上、右、下、左（TRBL，即“trouble”中的子音字母）。

css

margin: 10px 5px 10px 5px;

關於單值、雙值、三值和四值宣告的外邊距簡寫規則如下：

當指定一個值時，它會將相同的外邊距應用於所有四個邊。
當指定兩個值時，第一個外邊距應用於上和下，第二個應用於左和右。
當指定三個值時，第一個外邊距應用於上，第二個應用於左和右，第三個應用於下。
當指定四個值時，外邊距按順序（順時針）應用於上、右、下和左。

定位屬性

對於定位，top、right、bottom 和 left 的簡寫版本可以簡化為一個宣告。例如，考慮以下 CSS：

css

top: 0;
right: 20px;
bottom: 0;
left: 20px;

它可以簡化為：

css

inset: 0 20px 0 20px;

與外邊距和內邊距一樣，inset 的值也是按順時針順序排列的——上、右、下、左（TRBL）。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025 年 10 月 13 日⁩，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題

簡寫屬性

棘手的邊界情況

省略屬性

屬性值的順序

盒子的邊

盒子的角

背景屬性

字型屬性

邊框屬性

外邊距和內邊距屬性

定位屬性

通用簡寫屬性

簡寫屬性

另見

幫助改進 MDN