屬性值：
border-box繪製邊框以內的區域
padding-box 繪製內邊距以內的區域
centent-box 僅繪製內容區域
屬性值：
border-box 從border的左上角開始定位
padding-box 從padding的左上角開始定位
content-box 從內容區的左上角開始定位
屬性值：
可以是具體的數值也可以是百分比（如果只有乙個數值，則按比例縮放）
cover 按自身比例填充滿整個div （可能會有部分溢位 當attachment值為scroll時縮放頁面可能會導致頁面部分空白）
contain 顯示整張背景圖 （如果不設定repeat可能會導致部分空白）
background-image：url(』…jpg』),url(』…』)； 可新增多張背景，背景圖之間用逗號隔開 前一張會覆蓋後一張
background：color position size repeat origin clip attachment image
但是考慮到相容性問題 css3屬性還是單獨寫比較好
屬性值：
線性漸變
寫法：background：
-webkit-linear-gradient（開始的方向，漸變顏色1，漸變顏色2，…可多個）webkit的核心
-moz-linear-gradient(結束的方向，漸變顏色1，漸變顏色2，…)新版本的火狐是開始的方向
-o-linear-gradient(結束的方向，同上)
linear-gradient(to-結束方向，同上)標準寫法
使用角度：
第乙個值可以使用角度，且不需要區分相容性
角度說明：0deg是乙個從下到上的漸變 接下來的值為逆時針方向
控制各顏色值範圍
寫法：background：linear-gradient（90deg, red 10%,yellow 20%,blue 20%);
第乙個值不寫引數預設為0% 最後乙個引數不寫預設為100%
透明色的漸變：使用rbga
background：linear-gradient（90deg, rgba(255,0,0,0),rgba(255,0,0,1));
徑向漸變 從中心到外漸變
background：radial-gradient 用法與線向差不多 除起點是中心點
設定漸變的形狀
值有：circle 圓形
ellipse 橢圓 預設 (如果元素寬高一致的情況下，不論設定什麼形狀都顯示為圓形)
寫法：background：（相容寫法省略與標準一致）radial-gradient(circle,red,blue)
改變尺寸大小
屬性值：
closest-side：最近邊 （距元素的）
farthest-side：最遠邊
closest-corner：最近角
farther-corner：最遠角
寫法：background：（相容省略）radial-gradient(start/end,size shape,red,blue)
注：形狀和大小為同乙個引數 不可用逗號分開
CSS3 背景 background 屬性
background color 顏色值 預設的值是 transparent 透明色 background image none url url 引數 作用none 無背景圖 預設的 url使用絕對或相對位址指定背景影象 background repe repeat no repeat repeat...
巧用CSS3之background漸變
常見斑馬loading 上圖是我們常見的loading進度條，以前都是用一張背景平鋪的。其實如果拋去相容性因素，我們可以用零純樣式來實現。一，首先，我們先為容器定義乙個純藍色背景 box這樣就形成了四等分的條紋，但這顯然不是我們想要的結果。三，設定傾斜角度。linear gradient是可以設定傾...
CSS3中background背景的使用
1.background漸變色例子 2.background clip裁剪區域 background clip有三種屬性 border,padding,content.分別指覆蓋border的區域,覆蓋padding區域裁剪border.覆蓋content區域裁剪border和padding.3.b...