原文章轉自 it技術擎 裏面有更豐富的資料
1、background
背景顏色：background-color
基本語法：background-color : transparent | color 背景圖像：background-image
基本語法：background-image : none | url ( url ) 背景圖像鋪排：background-repeat
基本語法：background-repeat : repeat | no-repeat | repeat-x | repeat-y 背景圖像滾動還是固定：background-attachment
基本語法：background-attachment : scroll | fixed 背景圖像位置：background-position
基本語法：background-position : length || length或 background-position : position || position length : 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱 長度單位
position : top | center | bottom | left | center | right 以上是經常用到的background屬性，大家一般都很熟悉，
其簡寫方式爲：background : background-color || background-image || background-repeat || background-attachment || background-position 可是隨着css的發展CSS3中又引入了其他4個屬性： 背景的裁剪區域：background-clip
基本語法：background-clip ： border-box | padding-box | content-box | no-clip
border-box：從border區域向外裁剪背景。
padding-box：從padding區域向外裁剪背景。
content-box：從content區域向外裁剪背景。
no-clip：從border區域向外裁剪背景。 背景顯示區域：background-origin
基本語法：background-origin ： border | padding | content 設置背景圖片大小：background-size
基本語法：background-size ：[ | | auto ]{1,2} | cover | contain
多重背景background ： [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position] 例如：background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom
no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;
終於完了！這麼多屬性怎麼簡寫呢？ 查了好多資料終於找到了，好東西就該拿出來分享：
其簡寫方式爲：background: background-color||background-image||background-repeat||background-attachment||background-position / background-size||background-origin||background-clip;
注意裏面的反斜槓，font和border-radius裏簡寫方式使用的反斜槓的用法相似。主要是區別background-position和background-size
例如：background: red url(images/1.jpg) no-repeat scroll center center / 50% content-box content-box;
或者：background:red url(images/1.jpg) 0 0/20px 20px no-repeat,url(images/2.jpg) 50% 50%/contain no-repeat content-box green;
2、font
字體樣式：font-style
基本語法：font-style : normal | italic | oblique
設置文本是否爲小型的大寫字母：font-variant
基本語法：font-variant : normal | small-caps
設置字體的粗細： font-weight
基本語法：font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |700 | 800 | 900
設置字體尺寸 ：font-size
基本語法：font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger |smaller | length
設置文本的字體名稱序列： font-family
基本語法：font-family : ncursive | fantasy | monospace | serif | sans-serif
其簡寫方式爲：font-style || font-variant || font-weight || font-size /line-height || font-family
例如：font:italic small-caps bold 12px/1.5em arial,verdana;
3、margin & padding
以margin爲例，padding相同
其簡寫方式爲：margin:margin-top margin-right margin-bottom margin-left;
例如：margin:1px 1px 1px 1px;
4、border
邊框寬度：border-weight
基本語法：border-width :medium | thin | thick |length
邊框樣式：border-style
基本語法：
border-style :none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
邊框顏色： border-color
基本語法：border-width :color
其簡寫方式爲：border : border-width || border-style || border-color
例如：border:1px solid #000;
5、outline
outline類似border，不同的是border會影響盒模型，而outline不會。
其簡寫方式爲：outline : outline-width || outline-style || outline-color
例如：outline:1px solid red;
6、border-radius
右上角半徑：border-top-right-radius ,
右下角半徑：border-bottom-right-radius ,
左下角半徑：border-bottom-left-radius ,
左上角半徑：border-top-left-radius
當各個圓角半徑相同時其簡寫方式爲：
border-radius ：border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius;
例如：border-radius:0 6px 6px 6px;一般簡寫爲 border-radius:0 6px 6px;
當各個圓角半徑不同時其簡寫方式爲：border-radius ： none | {1,4} [ / {1,4} ]?
例如：border-radius:0px 5px 10px 15px/20px 15px 10px 5px;按照上有下左的規律依次寫出每個角的兩條邊的半徑
