---
title: 特性簡寫
slug: Web/CSS/Shorthand_properties
translation_of: Web/CSS/Shorthand_properties
---
<h2 id="Definition" name="Definition">定義</h2>

<p><dfn>特性簡寫，是一種可以同時設定許多其他 CSS 屬性值的 CSS 屬性。</dfn> 使用特性簡寫，網頁開發者可以寫出更簡潔、且通常更具可讀性的樣式表，省時又省力。</p>

<p>CSS 規範中定義，特性簡寫用來組合作用於相同主題的常見性質。舉例來說，CSS {{cssxref("background")}} 這個性質是個特性簡寫，可同時定義 {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, 和 {{cssxref("background-position")}} 等屬性。同樣的，最常用的字體相關屬性，可以使用 {{cssxref("font")}} 來定義；圍繞在方塊周圍的邊界，則可簡單地以 {{cssxref("margin")}} 簡寫來定義。</p>

<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">需謹慎之處</h2>

<p>即便特性簡寫非常易於使用，仍有幾個需要銘記在心的情況：</p>

<ol>
 <li>未指明的值會被設為預設值。這聽起來真的很怪，但他的確會<strong>覆寫</strong>先前的設定值。比如：

  <pre class="brush: css">background-color: red;
background: url(images/bg.gif) no-repeat top right;</pre>
  不會將背景設為紅色，而是使用 {{cssxref("background-color")}} 的預設值 <code>transparent</code>，由於較後面的規則為優先。</li>
 <li>只有獨立的屬性可以被繼承。就如同遺失的值會被預設值取代一樣，不可能讓缺漏的值再去繼承個別屬性。關鍵字 <code>inherit</code> 可以用於屬性，但只能整體繼承，而不能用於個別值上。意思是，如果要繼承某個特定的值，就必須使用完整的語句，搭配 <code>inherit </code>關鍵字<code>。</code></li>
 <li>簡寫屬性試著不強迫使用特定順序，在那些屬性有許多不同類型的值的狀況下的確很方便。但是在許多屬性具有類似值時就沒這麼簡單了，此時會以以下規則處理：
  <ol>
   <li>關於區塊的簡寫性質，諸如 {{cssxref("border-style")}}, {{cssxref("margin")}} 或 {{cssxref("padding")}}，就會使用連貫的１～４個值來定義下列這些邊：
    <table>
     <tbody>
      <tr>
       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
       <td><em>單值語法：</em><code>border-width: 1em</code> — 這個唯一的值定義所有四邊</td>
      </tr>
      <tr>
       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
       <td><em>雙值語法：</em><code>border-width: 1em 2em</code> — 第一個值代表垂直部分，也就是上和下邊；第二個值則是指水平部分，也就是左右邊。</td>
      </tr>
      <tr>
       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
       <td><em>三值語法：</em><code>border-width: 1em 2em 3em</code> — 第一個值代表上邊，第二個值代表兩旁的邊，而第三個值代表下邊。</td>
      </tr>
      <tr>
       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
       <td>
        <p><em>四值語法：</em><code>border-width: 1em 2em 3em 4em</code> — 這四個值分別代表上、右、下、左邊，順時針的方向由上開始排列（可以以 trouble 來記憶，即英文首文字的縮寫 TRBL）</p>
       </td>
      </tr>
     </tbody>
    </table>
   </li>
   <li>與之相似地，關於區塊角落的屬性，像是 {{cssxref("border-radius")}}，也會使用連貫的１～４個值來代表四個角落：
    <table>
     <tbody>
      <tr>
       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
       <td><em>單值語法：</em><code>border-radius: 1em</code> — 這唯一的值代表了所有角落。</td>
      </tr>
      <tr>
       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
       <td><em>雙值語法：</em><code>border-radius: 1em 2em</code> — 第一個值代表左上和右下，第二個值則是右上及左下角。</td>
      </tr>
      <tr>
       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
       <td><em>三值語法：</em><code>border-radius: 1em 2em 3em</code> — 第一個值代表左上，第二個值代表右上及左下，第三個值則是右下的角落。</td>
      </tr>
      <tr>
       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
       <td>
        <p><em>四值語法：</em><code>border-radius: 1em 2em 3em 4em</code> — 這四個值分別代表左上、右上、右下、左下，由左上開始的順時針排序。</p>
       </td>
      </tr>
     </tbody>
    </table>
   </li>
  </ol>
 </li>
</ol>

<h2 id="Background_Properties" name="Background_Properties">背景屬性</h2>

<p>背景會有下列這些屬性:</p>

<pre class="brush:css">background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;</pre>

<p>可以簡寫為一句宣告：</p>

<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre>

<p>（寫成簡化屬性的效果，完全等同於上方未簡化的屬性，外加 <code>background-attachment: scroll</code> 及其他 CSS3 中額外增加的屬性。)</p>

<h2 id="Font_Properties" name="Font_Properties">字體屬性</h2>

<p>下列的宣告:</p>

<pre class="brush:css">font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;</pre>

<p>可以簡寫成這樣：</p>

<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre>

<p>簡化定義的效果完全等同於未簡化前的屬性效果，加上 <code>font-variant: normal</code>、<code>font-size-adjust: none</code> (CSS2.0 / CSS3) 及 <code>font-stretch: normal</code> (CSS3) 等屬性。</p>

<h2 id="Border_Properties" name="Border_Properties">邊框屬性</h2>

<p>邊框的寬度、顏色、樣式可以簡寫成一句宣告。舉例來說：</p>

<pre class="brush:css">border-width: 1px;
border-style: solid;
border-color: #000;</pre>

<p>可以寫成：</p>

<pre class="brush:css">border: 1px solid #000;</pre>

<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">邊界與內距屬性</h2>

<p>margin 和 padding 的簡化版本大致相同。下列的 CSS 宣告:</p>

<pre class="brush:css">margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;</pre>

<p>等同於下面的宣告（注意值的排序是順時鐘的順序：上，右，下，左 (TRBL，可以「trouble」這個單字的諧音來記憶）</p>

<pre class="brush:css">margin: 10px 5px 10px 5px;</pre>

<h2 id="See_also" name="See_also">相關連結</h2>

<ul>
 <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
 <li>Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}.</li>
</ul>