box-sizing
在CSS 2中設置元素的width和height僅僅是設置了元素內容區的寬和高，元素實際的尺寸是margin + border + padding + 內容區。
CSS 3（截止到2016年12月6日該屬性還是草案）中新加了box-sizing屬性，用來重新規定設置元素的width和height時，到底包含哪些區域。
box-sizing的可取值有兩個：content-box（默認值）和border-box。
content-box 默認值。該值表示設置元素的width和height時，這兩個尺寸實際指的是內容區的尺寸。即：
width = 內容區的寬度
height = 內容區的高度
border-box 該值表示設置元素的width和height時，這兩個尺寸實際指的是border + padding + 內容區 這三項的總尺寸。即：
width = border-left + padding-left + 內容區寬度 +padding-right + border-right
height = border-top + padding-top + 內容區高度 +padding-bottom + border-bottom
背景
通過background屬性可以設置元素的背景樣式。
實際上background是以下八個屬性的簡寫（后面跟的是默認值）：
background-color transparent
background-image none
background-size auto auto
background-position 0% 0%
background-repeat repeat
background-origin padding-box
background-clip border-box
background-attachment scroll
background-color
background-color 設置元素的背景顏色
可取值：transparent || 某些表示顏色的英文單詞 || 十六進制的顏色名 || rgb顏色名 || rgba
background-image
background-image設置元素的背景圖像。通過url()引入，可以引入多張背景圖片，用逗號隔開。
默認情況下背景圖片從元素的左上角開始（包含border區域）渲染。
background-size
background-size用於重新計算引入背景圖片的尺寸。
可以設置多組值，有多組值時，按照圖片引入的順序一一對應。如果設置的值的組數小於引入圖片的張數，則余下的圖片的尺寸按第一組值計算。每組值可以設置1~2個值，第一個值表示寬度，第二個值表示高度，如果只設置了一個值，第二個值為auto；也可以設置規范中指定的關鍵字，設置為關鍵字時，只有一個值。
background-size的可取值：
cover 關鍵字。表示根據引入圖片的原始比例放大圖片，使其完全填充整個背景區域。放大后的圖片的寬度和高度可能超過背景區域的尺寸，超過部分不顯示。
contain 關鍵字。表示根據引入圖片的原始比例放大圖片，使圖片的寬度或高度中的某一個剛好完全填充背景區域對應的寬度或高度。這種填充方式的結果就是背景區域在水平會垂直方向上會留有空白。
auto 不是關鍵字。當兩個值都是auto時，使用引入圖片本來的尺寸。如果只有一個值為auto，那么為auto的值的計算方法是：
- 如果另一個值是百分數，先根據背景區域的尺寸計算這個百分數的具體值，再用這個計算來的具體值根據引入圖片的固有比例計算為auto的那個值。
- 如果另一個值不是百分數，則直接用這個值根據引入圖片的固有比例計算原為auto的那個值。
<percentage> 根據背景區域的尺寸計算。不能為負。如果background-attachment的值為fixed，則根據瀏覽器視口（viewport）的尺寸計算。
<length> 使用指定的值。不能為負。
注意：有些圖片沒有固有比例，有些圖片沒有固有尺寸，還有的圖片兩者都沒有。原則是：
對於contain或cover，有固有比例的用固有比例放大。沒有的，就使用背景區域的尺寸。- 對於兩個值都是auto的情況，圖像如果有固有寬度和高度，則按這個尺寸。如果沒有固有尺寸與固有比例，則按背景區的大小。如果沒有固有尺寸但是有固有比例， 效果同
contain。如果只有一個固有長度（寬度或高度），但有固有比例，則用這一個固有長度根據固有比例計算另一個值的大小。如果只有一個固有長度（寬度或高度），但沒有固有比例，則使用此一個固有長度，另一個值使用背景區域的相應的長度（寬度或高度）。 - 一個為
auto另一個不是auto，如果圖像有固有比例，則指定的長度使用指定值，未指定的長度由指定值與固有比例計算。如果圖像沒有固有比例，則指定的長度使用指定值，未指定的長度使用圖像相應的固有長度（寬度或高度），若即沒有固有比例也沒有固有長度（寬度或高度），則使用背景區相應的長度（寬度或高度）。
background-position
background-position 用於指定背景圖片在背景區域中的初始位置。
可以設置多組值對應多張背景圖片。每組值可以設置1~2個值。
可取值：
- 關鍵字：top，bottom，center，left，right。如果只指定一個關鍵字，則另一個默認為center。
- <percentage> 相對於背景區域的尺寸計算，可以為負值。如果只指定一個百分數，則另一個默認為50%。第一個為水平位置，另一個為垂直位置。
- 像素值或其他CSS單位的值，可以為負值。第一個為水平位置，另一個為垂直位置。如果只指定一個，則另一個默認為50%（相對於背景區域）。
如果引入背景圖片的張數大於指定的值的組數，則余下的背景圖片的位置根據第一組值計算。
background-repeat
background-repeat指定是否重復或如何重復背景圖片。默認其情況下，圖片在水平方向上和垂直方向上重復以填滿整個背景區域。（根據background-size屬性重新計算背景圖片的尺寸后再重復）
可取值：
repeat 默認值。在不縮放圖片的前提下，在水平方向上和垂直方向上重復圖片以填滿整個背景區域。
space 不縮放圖片。指定為space后，會忽視background-position屬性的值，除非某一方向上的空間不足以容納兩張背景圖片，此時不會忽視該方向上的background-position的值。填充規則是先緊挨着背景區域的四周邊界填充，再向內填充，最后剩余空間會被均分到已填充圖片的周圍（不包括挨着背景區域四周邊界的那一面，可以理解為兩端對齊）。
round 不會忽視background-position屬性的值。重復填充時會對圖片進行縮放（忽視圖片的固有比例），最后的結果是背景區域剛好被引入圖片的整數個重復填滿。
no-repeat 背景圖片不會被重復，位置由background-position屬性的值確定。
該屬性支持單值語法和雙值語法。在雙值語法中，第一個值表示在水平方向上的重復行為，第二個值表示在垂直方向的重復行為。
單值和雙值對照表：
| 單值 | 雙值 |
| repeat-x | repeat no-repeat |
| repeat-y | no-repeat repeat |
| repeat | repeat repeat |
| no-repeat | no-repeat no-repeat |
| space | space space |
| round | round round |
background-origin
background-origin規定了背景圖片出現區域的具體范圍，注意與背景區域區分。
要看到該屬性的效果background-repeat屬性的值必須為no-repeat。
可取值：
border-box：背景圖片延伸到邊框border的外邊界，但背景圖片在下，border的樣式在上。
padding-box：背景圖片從padding區域的外邊界開始渲染，border區域不會出現背景圖片。
content-box：背景圖片只在內容區域渲染。
background-clip
background-clip用於指定背景區域顯示出來的范圍。
可取值:
border-box：表示border外邊界以內的背景區域都顯示出來。
padding-box：表示padding外邊界以內的背景都顯示，不顯示border范圍的背景。
content-box：表示內容區的背景都顯示，不顯示border和padding范圍的背景。
background-attachment
background-attachment 如果引入了背景圖片，用該屬性決定背景圖片的滾動特性。支持多張背景圖片，可以設置多組值。
可取值：
fixed：表示引入的背景圖片相對於瀏覽器視口（viewport）固定。類似於元素的固定定位。
local：表示背景圖片相對於元素的內容固定。如果元素具有滾動機制，則背景圖片隨着元素內容的滾動而滾動。
scroll：表示背景圖片相對於元素本身固定。如果元素具有滾動機制，則背景圖片不隨元素內容的滾動而滾動。
參考文章：
1、深入淺出CSS3：background-clip,background-origin和border-image教程
2、MDN
3、規范