我們來了解一下 linear-gradient() 是什么呢？
1.linear-gradient 是一個 CSS3 版本的新特性，所以存在兼容性，使用前可以看一下 can i use網，附上地址https://www.caniuse.com/#search=linear-gradient
2.是一個線性漸變函數，生成一個線性漸變圖片，來作為賦值給背景，如下圖。
效果：
代碼：
解析圖片：從上方的代碼圖片，我們可以看出來，他是寫在background-image的一個函數，通過傳參數，來生成一個漸變背景賦值給background-iamge,
默認生成的漸變方向是從上到下，如圖第一個參數red紅色，第二個參數藍色，紅色從上漸變到下面的藍色，中間為過度點。
兼容：為了向后兼容不支持的瀏覽器，你可以加一個實色背景在線性漸變前如上圖使用了 background-color: red;
改變默認漸變方向：
1.使用 deg 角度來指定如下圖
1-1 默認是 180 deg
1-2 0deg 零度
1-3 background: linear-gradient(45deg, red, blue);
1-4 background: linear-gradient(90deg, red, blue);
1-5 background: linear-gradient(180deg, red, blue);
1-6 background: linear-gradient(245deg, red, blue);
1-7 background: linear-gradient(365deg, red, blue);
提示： 實際開發時自已調試一下看看效果就行了
2.使用 關鍵字 改變默認漸變方向
1-1 background: linear-gradient(red, blue); 默認效果 上為漸變開始點 下為結束漸變點
1-2 background: linear-gradient(to right, red, blue);左邊為開始點 去 右邊為結束漸變點 to right 翻譯： 去右邊
1-3 background: linear-gradient(to left, red, blue); 右邊為開始點 去 左邊為結束漸變點 to left 翻譯： 去左邊
一共有四個 to right, to left, to bottom, to top 效果和名字意思一致，去 + 方向為要到的結束漸變點。
另外還有關鍵字如： to top left去頂部左邊、to top right去頂部右邊、to bottom left去底部左邊、to bottom right去底部右邊
舉個示例：
1-1 to top right 去頂部右邊
to top right 效果圖：
1-2 to top left 去頂部左邊
to top left 效果圖：
來看一張來自 MDN 的線性漸變函數生成漸變背景效果的圖片解析：
在顏色名稱后面可以可以跟上一個長度單位，來指定該顏色所占的比例
1.一共比例為100%，如果各占50%，則漸變過渡沒有空間了，就會像下圖一樣，沒有漸變效果
提示，我們可以利用這個搭配 background-size 來變成條紋一樣的效果，因為漸變函數其實生成是一個漸變圖片，所以可以使用background-size來調整大小，如下圖
默認背景是平鋪的，所以會出現這種效果，如果你設置為不平鋪，效果如下
另外如果你顏色占的比例小於前面的，就會被前面的最大比例值所覆蓋，如下圖， 藍色 0比例，被覆蓋成了50%
最終效果一樣
來自MDN
通過改變方向為 to right還可以變成水平的條紋，注意寬高設置
這編文章是作者自已學習時總結，部分資料參考自mdn： https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient