一、定義
簡寫屬性是可以讓你同時設置其他幾個 CSS 屬性值的 CSS 屬性。使用簡寫屬性，Web 開發人員可以編寫更簡潔、更具可讀性的樣式表，節省時間和精力。
CSS 規範定義簡寫屬性的目的在於將那些關於同一主題的常見屬性的定義集中在一起。比如 CSS 的 background 屬性就是一個簡寫屬性，它可以定義 background-color、background-image、background-repeat 和 background-position 的值。類似地，最常見的字體相關的屬性可以使用 font 的簡寫，盒子（box）各方向的外邊距（margin） 可以使用 margin 這個簡寫。
二、棘手的邊界情況
雖然它們使用起來非常方便，但在使用時，仍需牢記一些邊界情況：
1. 沒有指定的值會被設置爲它的初始值。這聽起來似乎本來就很合理的樣子，但這確實意味着，它將會覆蓋之前設置的值。因此：
background-color: red;
background: url(xxx/xxx.png) no-repeat top right;
以上樣式不會將 background 的 color 值設置爲 red，而是 background-color 的默認值 transparent，因爲第二條規則優先。
2. 簡寫屬性不試圖強制它們替代屬性的值的特定順序。這適用於當這些屬性使用不同類型的值時，因爲這個時候順序並不重要。但當幾個屬性可以設置相同值的時候，就沒那麼簡單了。處理這些情況分以下幾種類型：
（1）處理和盒子（box）邊界（edge）相關的屬性時，比如 border-style、margin 或者 padding， 始終使用一致的1個到4個值的語法表示這些邊界：
| 以border-width爲例 | |
|---|---|
 |
1個值的語法：border-width: 1em — 這一個值表示所有的邊框寬度 |
 |
2個值的語法：border-width: 1em 2em — 第一個值表示垂直方向的，即 top 和 bottom；第二個值表示水平方向的，即 left 和 right |
 |
3個值的語法：border-width: 1em 2em 3em — 第一個值表示 top；第二個值表示水平方向的，即 left 和 right； 第三個值表示 bottom |
 |
4個值的語法：border-width: 1em 2em 3em 4em — 這四個值分別表示 top、right、bottom、left，總是按此順序，即從 top 開始的順時針順序（Top-Right-Bottom-Left 首字母與英文單詞 trouble 的順序一致：TRBL） |
（2）同樣，在處理和盒子的角相關的屬性時，比如 border-radius，也始終使用一致的 1個到4個值的語法表示：
| 以border-radius爲例 | |
|---|---|
 |
1個值的語法：border-radius: 1em — 這一個值表示所有的表框角度的半徑 |
 |
2個值的語法：border-radius: 1em 2em — 第一個值表示 top-left 和 bottom-right 方向的角；第二個值表示 top-right 和 bottom-left 方向的角 |
 |
3個值的語法：border-radius: 1em 2em 3em — 第一個值表示 top-left 方向的角 ，第二個值表示top-right 和 bottom-left 方向的角，第三個值表示 bottom-right 方向的角 |
 |
4個值的語法：border-radius: 1em 2em 3em 4em — 這四個值分別表示top-left、 top-right、 bottom-right 、bottom-left 方向的角。總是按此順序，即從top-left開始的順時針順序 |
三、CSS屬性的簡寫
1. background屬性
（1）屬性的種類
background-color /*背景色*/
background-image /*背景圖片*/
background-repeat /*背景圖平鋪方式*/
background-position/*背景圖的位置*/
background-color: gray;
background-image: url(xxx/xxx.png);
background-repeat: no-repeat;
background-position: top right;
（2）屬性的簡寫
background: gray url(xxx/xxx.png) no-repeat top right;
/* background 屬性簡短寫法 */
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
說明：簡寫的形式實際上等價於以上普通屬性再加上 background-attachment: scroll 以及 CSS3 中的一些附加屬性。
說明：background 的各屬性及其默認值
/* background 的各屬性及其默認值 */ background-attachment: scroll; background-color: transparent; background-position: top left; background-repeat: repeat; background-image: none;
2. font屬性
（1）屬性的種類
font-style: italic; /*自體*/
font-weight: bold; /*加粗*/
font-family: arial,sans-serif; /*字體種類*/
font-size: 20px; /*字號大小*/
line-height: 35px; /*行高*/
（2）屬性的簡寫
font: italic bold arial,sans-serif 20px 35px;
/* 字體各屬性前後順序 */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
說明：font各屬性與默認值
/* font 各屬性與默認值 */ font-variant: normal; line-height: normal; font-family: varies; font-weight: normal; font-style: normal; font-size: medium;
3. Border 屬性
對於 border 來說，寬度、顏色和類型是可以被簡寫到一個聲明裏的。
（1）屬性的種類
border-width /*邊框寬度*/
border-style /*邊框樣式*/
border-color /*邊框顏色*/
border-width: 1px;
border-style: solid;
border-color: #000;
（2）屬性的簡寫
border: 1px solid #000;
/* border 屬性簡短寫法 */
border: [border-width] [border-style] [border-color];
說明：border 各屬性及其默認值
/* border 各屬性及其默認值 */ border-width: none; border-style: none; border-color: none;
4. Margin 和 Padding 屬性
margin 和 padding 值的簡寫版本類似。
（1）屬性的種類
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
（2）屬性的簡寫
margin: 10px 5px 10px 5px;//從 top 順時針開始的：top、right、bottom、接着是 left
5. list屬性
取消默認的圓點和序號可以這樣寫list-style:none;
（1）屬性的種類
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
（2）屬性的簡寫
list-style:square inside url(image.gif);
/* list 屬性簡短寫法 */
list-style: [list-style-type] [list-style-position] [list-style-image];
說明：list屬性與默認值
/*list屬性與默認值*/ list-style-type: disc; list-style-image: none; list-style-position: outside;
6. outline屬性
（1）屬性的種類
outline-width:3px;
outline-style: dotted;
outline-color:red;
（2）屬性的簡寫
outline: 3px dotted red;