大家好，這里是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公眾號：Web前端之巔
- 博客園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這里我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、漸變
漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴展性。可分為線性漸變、徑向漸變。
1、線性漸變
線性漸變：指沿着某條直線朝一個方向產生漸變效果。
語法：
background: linear-gradient(direction, color1, color2 [stop], color3...);
參數說明：
direction：表示線性漸變的方向，to left：設置漸變為從右到左。相當於: 270deg;to right：設置漸變從左到右。相當於: 90deg;to top：設置漸變從下到上。相當於: 0deg;to bottom：設置漸變從上到下。相當於: 180deg。這是默認值。
color1：起點顏色。color2：過渡顏色，指定過渡顏色的位置 stop.color3：結束顏色。你還可以在后面添加更多的過渡顏色和位置，表示多種顏色的漸變。
示例：
background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red);
2、徑向漸變
徑向漸變：指從一個中心點開始沿着四周產生漸變效果。
語法：
background: radial-gradient(shape size at position, start-color, ..., color [stop] ..., last-color);
參數說明：
-
shape：漸變的形狀。ellipse表示橢圓形，circle表示圓形。默認為ellipse，
如果元素寬高相同為正方形，則ellipse和circle顯示一樣；
如果元素寬高不相同，默認效果為 ellipse。
-
size：漸變的大小，即漸變到哪里停止，它有四個值。
closest-side：最近邊；farthest-side：最遠邊；closest-corner：最近角；farthest-corner：最遠角。默認是最遠角。
-
at position：漸變的中心位置。比如：at top left: 中心為元素左上角位置at center center：中心為元素中心位置at 5px 10px: 中心為偏移元素左上角位置右邊5px， 下邊10px位置。
-
start-color：起始顏色 -
color：漸變顏色，可選起始位置 stop。 -
last-color: 結束顏色。
注意：各個參數之間用空格隔開，而不是逗號隔開。
示例：
background: radial-gradient(circle farthest-side at right top, red, yellow 50%, blue);
3、重復漸變
語法：
repeating-linear-gradient /*線性重復漸變*/
repeating-radial-gradient /*徑向重復漸變*/
重復的話，就需要有一個重合的百分百作為分界線。然后自動按照比例重復漸變。
示例：
<style>
div:first-of-type {
width: 200px;
height: 200px;
margin: 100px auto;
/* border: 1px solid blue; */
background: repeating-radial-gradient(circle closest-side at center center,
blue 0%, yellow 10%, blue 20%,
red 20%, yellow 30%, red 40%);
}
div:last-of-type {
width: 800px;
height: 10px;
margin: 100px auto;
/* border: 1px solid blue; */
background: repeating-linear-gradient(45deg,
yellow 0%, blue 5%, red 10%,
red 10%, blue 15%, yellow 20%);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
二、background 屬性
1、復習background屬性
/*添加背景顏色*/
background-color: #fff;
/*添加背景圖片*/
background-image: url("./images/img.jpg");
/*設置背景平鋪*/
background-repeat：repeat(默認) | no-repeat | repeat-x | repeat-y | round | space
/*新增兩個值：
round:會將圖片進行縮放之后再平鋪。保證圖片完整緊湊排列。
space:圖片不會縮放平鋪，只是會在圖片之間產生相同的間距值。
*/
/*背景定位*/
background-position：left | right | center（默認） | top | bottom
/*背景是否滾動*/
background-attachment:scroll（默認） | fixed
/* 說明：
scroll: 背景圖的位置是基於盒子（假如是div）的范圍進行顯示；
fixed：背景圖的位置是基於整個瀏覽器body的范圍進行顯示，如果背景圖定義在div里面，而顯示的位置在瀏覽器范圍內但是不在div的范圍內的話，背景圖無法顯示。
*/
local與scroll的區別：當滾動的是當前盒子（div）里面的內容的時候，
local:背景圖片會跟隨內容一起滾動；
scroll:背景圖片不會跟隨內容一起滾動。
2、新增的background屬性
2.1、background-size
CSS里的 background-size 屬性能夠讓程序員決定如何在指定的元素里展示，它通過各種不同是屬性值改變背景尺寸呈現的大小。往往建議不要將圖放大，如果有需要，盡量讓圖縮小，以保證圖片的精度。
/*設置背景圖片的大小：寬度/高度 寬度/auto(保持比例自動縮放)*/
background-size: 100px 50px;
background-size: 100px;
/*設置百分比，是參照父容器可放置內容區域的百分比*/
background-size: 50% 50%;
/*設置contain:按比例調整圖片大小，使用圖片寬高自適應整個元素的背景區域，使圖片全部包含在容器內
1.圖片大於容器：有可能造成容器的空白區域,將圖片縮小
2.圖片小於容器：有可能造成容器的空白區域，將圖片放大*/
*background-size: contain;
/*cover:與contain剛好相反，背景圖片會按比例縮放自適應填充整個背景區域，如果背景區域不足以包含所有背景圖片，圖片內容會溢出
1.圖片大於容器：等比例縮小，會填滿整個背景區域，有可能造成圖片的某些區域不可見
2.圖片小於容器：等比例放大，填滿整個背景區域，圖片有可能造成某個方向上內容的溢出*/
background-size: cover;
2.2、background-origin
作用：提升用戶的響應區域。
我們在 background-position 定位的時候，都是默認定位原點在元素的左上角來定位的。可不可以調節定位的位置呢？
background-origin：可以調節定位原點的位置。
語法：
background-origin: padding-box|border-box|content-box;
border-box：從border的左上角位置開始填充背景，會與border重疊；padding-box：從padding的左上角位置開始填充背景，會與padding重疊；content-box：從內容左上角的位置開始填充背景。
當設置 background-origin：content-box; 時，可以將要顯示的圖片放在盒子中間，如果這時圖片是個精靈圖的話，旁邊會有其他的圖干擾，怎么辦呢，能不能只顯示我需要的精靈圖？看下面的 background-clip.
2.3、background-clip
background-clip：屬性規定背景的繪制區域.
雖然是設置裁切，但是控制的是顯示。說白了，就是設置最終顯示那些區域。
語法：
background-clip: border-box|padding-box|content-box;
border-box：只顯示border及以內的內容padding-box：只顯示padding及以內的內容content-box：只顯示content及以內的內容
所以，回到 2.2 節最后的問題，這時我們再設置 background-clip:content-box; 就可以屏蔽其他不要的精靈圖了。
那么為什么要這么做呢？干嘛把 a 標簽做的這么大，跟需要的精靈圖一樣大不好嗎？
還記得手機通訊錄右側的A-Z的列表嗎？容易點嗎？是不是很容易點錯？
我這樣做的目的就是提升用戶點擊的范圍，但是顯示的內容還是以前的，這樣可以提高用戶的使用體驗啊。
2.4、案例：精靈圖的使用
需求：為一個塊元素設置精靈圖背景，精靈圖很小，但是需要更大的展示區域，能夠以更大的范圍響應用戶的需要，但是只需要顯示指定的背景圖片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*提升移動端響應區域的大小*/
a {
display: block;
width: 50px;
height: 50px;
background: url("./images/sprites.png") -22px 0;
background-repeat: no-repeat;
padding: 15px;
box-sizing: border-box;
background-origin: content-box;
background-clip: content-box;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
由圖可見，返回箭頭下 a 的范圍變大了，那么用戶點擊的響應區域也就大了。