7：漸變(背景-屬性)
漸變是css3當中比較豐富多彩的乙個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少的使用數量，並且具有很強的適應性和可擴充套件性。
linear-gradient線性漸變指沿著某條直線朝乙個方向產生漸變效果，如下圖是從黃色漸變到綠色。
1、必要的元素：
a、方向
b、起始色
c、終止色
2、關於方向
設定漸變方向，可以用關鍵字如to top、to right，也可以用角度（正負值均可）如45deg、-90deg等，當以角度做為引數時，可參照下圖來使用，0deg從下往上，90deg從左向右，進而可以推算出180deg從上向下。
/* 預設是從上到下的漸變*/
#grad {
height: 100px;
background: linear-gradient(red,blue);
/* 從左到右的漸變*/
#right-grad {
margin-top: 50px;
height: 100px;
background:linear-gradient(to right, red, blue);
/* 從左上角到右下角*/
#angles-grad {
margin-top: 50px;
height: 100px;
background:linear-gradient(to bottom right, red, green);
/* 多種顏色的漸變*/
#colorful-grad {
margin-top: 50px;
height: 100px;
background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
/* 帶透明度漸變*/
#transparency-grad {
margin-top: 50px;
height: 100px;
background:linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 0, 1));
/* 重複顏色的漸變*/
#repeat-grad {
margin-top: 50px;
height: 100px;
/*表示百分之10的地方是紅色，百分之30的地方是綠色*/
background: linear-gradient(toright, red 10%, green 30%);
****相關**
普通線性漸變,從上到下，預設是從上倒下
從左到右漸變
從左上角到右下角
多種顏色的漸變
帶透明度的漸變
重複顏色的漸變
相關效果
線性漸變和徑向漸變
linear gradient direction，color 寫法 background webkit linear gradient direction，color 1.direction 方向，預設方向是自上而下 寫法有 1.background webkit linear gradient ...
線性漸變和徑向漸變
格式 background image linear gradient 方向，起始顏色 終止顏色 方向 to left to right to top to bottom 角度 360 180 45 從左下到右上 90 相當於 to right 從左到右 135 從左上到右下 180 從上到下 di...
線性漸變和重複漸變
有三種型別的重複漸變，其中兩種當前在官方規範中支援，另一種在當前的工作草案中。每個符號的語法與其相關的漸變型別相同。例如，repeating linear gradient 遵循與之相同的語法 linear gradient 漸變重複 由最終的色彩停止決定 如果這是在 20px中，梯度的大小 其隨後...