CSS3 背景圖像區(qū)域
background-clip（指定背景繪制區(qū)域）
ackground-clip: border-box / padding-box / content-box; /*沒有padding的時(shí)候，content-box和padding-box效果一樣*/兼容性：IE9+、FireFox、Chrome、Safari、Opera
CSS3 背景圖像定位
background-position （背景定位）
background-position: px / % ...;
background-origin（設(shè)置元素背景圖片的原始起始位置）
background-origin: padding-box|border-box|content-box;兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera
CSS3 背景圖像大小
background-size（指定背景圖片大?。?/h6>
background-size: px / % / cover / contain; /*cover：把背景圖片擴(kuò)展至足夠大，以使背景圖片完全覆蓋區(qū)域（即完全不留白） contain：把圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域（至少滿足一邊不留白）*/兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera
CSS3 多重背景圖像
background-image: url(img1.jpg), url(img2.png); /*img1放前面，img2放后面*/
CSS3 漸變
線性漸變 - 從上到下（默認(rèn)）
background: linear-gradient(direction, color-stop1, color-stop2, ...);兼容性：IE10+、FireFox16+（3.6 –moz-內(nèi)核）、Chrome26+（10.0 –webkit-）、Safari6.1+（5.1 –>webkit-）、Opera12.1+（11.6 –o-）
線性漸變 - 從左到右
background:-webkit-linear-gradient( begin-direction, color-stop1, color-stop2, ...); background: -moz-linear-gradient( end-direction, color-stop1, color-stop2, ...); background: -o-linear-gradient( end-direction, color-stop1, color-stop2, ...); background: linear-gradient(to end-direction, color-stop1, color-stop2, ...); /*注意webkit是起始方向*/
線性漸變 – 對(duì)角
background:-webkit-linear-gradient( begin-level begin-vertical, color-stop1, color-stop2, ...); background: -moz-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...); background: -o-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...); background: linear-gradient( to end-level end-vertical,color-stop1, color-stop2, ...); /*注意webkit是起始方向*/
線性漸變 – 自定義角度
background:-webkit-linear-gradient(angle, color-stop1, color-stop2, ...); //默認(rèn)從左往右 background: -moz-linear-gradient(angle, color-stop1, color-stop2, ...); //默認(rèn)從下往上 background: -o-linear-gradient(angle, color-stop1, color-stop2, ...); //默認(rèn)從下往上 background: linear-gradient(angle, color-stop1, color-stop2, ...); //默認(rèn)從下往上（優(yōu)先級(jí)高） /*angle單位deg*/
線性漸變 – 顏色結(jié)點(diǎn)自定義分布
語法：同上，并在顏色值后加上 “空格+百分比”
（透明色：transparent）
線性漸變 – 重復(fù)漸變
語法：同上，并在linear前加repeating-
徑向漸變
background: radial-gradient(center, shape size, start-color, ..., last-color); /*center默認(rèn)居中，可不寫 center值改為：px / %等可定位圓心位置*/
徑向漸變 - 顏色結(jié)點(diǎn)均勻分布（默認(rèn)）
background:-webkit-radial-gradient(color-stop1, color-stop2, ...); background: -moz-radial-gradient(color-stop1, color-stop2, ...); background: -o-radial-gradient(color-stop1, color-stop2, ...); background: radial-gradient(color-stop1, color-stop2, ...);
徑向漸變 - 顏色結(jié)點(diǎn)自定義分布
語法：與線性同理
徑向漸變 – 設(shè)置形狀
background:-webkit-radial-gradient(shape, color-stop1, color-stop2, ...); background: -moz-radial-gradient(shape, color-stop1, color-stop2, ...); background: -o-radial-gradient(shape, color-stop1, color-stop2, ...); background: radial-gradient(shape, color-stop1, color-stop2, ...); /*shape的值： circle —— 圓形 ellipse —— 橢圓（默認(rèn)）*/
徑向漸變 – 尺寸大?。P(guān)鍵字的使用）
background:-webkit-radial-gradient(size, color-stop1, color-stop2, ...); background: -moz-radial-gradient(size, color-stop1, color-stop2, ...); background: -o-radial-gradient(size, color-stop1, color-stop2, ...); background: radial-gradient(size, color-stop1, color-stop2, ...); /*關(guān)鍵字size說明（相對(duì)圓心） closest-side：最近邊 farthest-side：最遠(yuǎn)邊 closest-corner：最近角 farthest-corner：最遠(yuǎn)角*/
徑向漸變 – 重復(fù)漸變
語法：與線性同理
IE低版本瀏覽器的漸變
filter:progid:DXImageTransform.Microsoft.gradient( >StartColorstr='color1',EndColorstr='color2',GradientType=0);
綜合案例：
效果圖.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>綜合</title>
<style type="text/css">
div {
width: 800px;
height: 500px;
background: #abcdef;
background-size: 50px 50px;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image:
-moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image:
-o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image:
linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
