上一篇提到了gradient的放置与多图片的放置方法
今天来更深入了解一下gradient渐层怎麽设定吧!d(`･∀･)b

各式各样的渐层

?linear-gradient()

background: linear-gradient(
             方向, 
             颜色 色彩位置, 
             颜色 色彩位置, 
             颜色 色彩位置,
             ...);

方向：

• to (top/bottom/right/left)
• to (top/bottom/right/left)　(top/bottom/right/left)
• 角度(deg) ->顺时针递增
• turn (1 turn=360deg, 0.25 turn=90deg) ->顺时针递增

颜色：

• RGB
• RGBA
• HSL
• HSLA
• 关键字(red / blue / yellow / transparent...)

色彩位置：

• px
• %

色彩位置的设定：

色彩位置的设定当初我真的是没看懂过XD
都乱调或是乾脆不进行设定
这次研究完之後发现它其实可以设定的非常细致，做出跟用绘图软件一样渐层效果

开始前有个很重要的概念
第一个颜色都是从0%开始，即便直接设定大於0%
第一个颜色的范围都是"0%~设定的值"

最後一个颜色都是100%结束，即便直接设定小於100%
最後一个颜色的范围都是"设定的值~100%"

1. 不设定色彩位置：
   第一个颜色从0%开始
   最後一个颜色到100%结束
   没有设定色彩位置时，会自动"平均分配"渐层比例
   0%(red)-->yellow(50%)-->green(100%)

background: linear-gradient(to right, red, yellow, green);

2. 设定色彩位置：
   0%~10%都是第一个颜色(red)
   10%~30%则从第一个颜色(red)渐层到第二个颜色(yellow)
   30%~100% 从第二个颜色(yellow)渐层到最後一个颜色(green)

background: linear-gradient(to right, red 10%,  yellow 30% , green 100%);

3. 一个色彩设定两次：
   看过上面两种例子之後这个应该很好想像出它的感觉~
   0%~10% 是red
   10%~50% 是red
   50%~80% 是 red 渐层到 green
   80%~100% 即便我不设定green 100%，最後一个色彩都是到100%为止

background: linear-gradient(to right, red 10%, red 50% ,green 80%);

4. 设定位置不设定色彩：
   ㄟㄟㄟ!?可以这样嘛!?这个用法真是让我大开眼界
   这个用法的效果是
   0%~10% red
   10%~100% 从 red 渐层到 green，但会以70%为中继点
   就像是在Illustrator 拉动的那个小菱形一样
   

linear-gradient(to right, red 10%, 70%, green 100%);

感觉还是有点模糊吗?
其他类似设定对比一下，就可以发现它的不同罗!

5. 一个色彩设定两个色彩位置：

   当设定两个渐层位置时就可以很明确的色彩范围框出来
   再把色彩位置进行重叠的话就不会有渐层的效果
   色彩跟色彩的边界就是分明的

   0%~30% Red
   30%~60% yellow
   60%~100% green

background: linear-gradient(to right, red 0% 30%,  yellow 30% 60%, green 60% 100%)

(哇喔~不小心画出立陶宛的国旗了>w<)

很有趣的是，当我写在後面的色彩起点位置值小於前一个色彩的终点值时，还是会以"前一个色彩终点值"为准

background: linear-gradient(to right, red 0% 30%,  green 30% 60%, yellow 40% 100%); 

但是当我没有将前一个色彩的终点值跟下一个色彩起始值重叠
它就会进行渐层罗~(60%~70%从绿色渐层到黄色)

codepen- linear-gradient实作

参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient