悟了悟了，妈妈再也不用担心我不会background-image之线性渐变篇

最近我在掘金上查阅资料（摸鱼）的时候，发现了一篇神文，瞬间就裂开了，啥？？？？ background-image 竟然可以玩出花来！真·花，原文在这，瞅瞅大神是如何把css的背景图玩出花的。于是乎，我也有许多奇思妙想想去试验，甚至想直接在背景图里直接撸出一个清明上河图~ 咳咳，能不能撸个清明上河图出来留个悬念，接下来我们一起来探究以下背景图到底是何方神圣：

啥是 background-image ?

• 你：老师！这个我知道，不就是给 html 元素设置背景图吗？
• 老师：能举个例子吗？
• 你：background-image: url('美女.jpg')
• 老师：还有吗？
• 你：没了~

相信很多小伙伴平时用到最多的也只是这一种用法。查了一下文档，background-image 还有其他 n 种用法:

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• conic-gradient()

线性渐变 linear-gradient()

• direction（可选）:
  • 关键字型（8种，8个方向）
    • to bottom 从上到下（默认）
    • to top 从下到上
    • to right 从左到右
    • to left 从右到左
    • to right bottom 从左上到右下（这里关键字不分先后，也可写成 to bottom right ，以下同理）
    • to left bottom 从右上到左下
    • to right top 从左下到右上
    • to left top 从右下到左上
  • 数值型（角度）任意角度
    • xdeg x∈(-∞,+∞)
    • 0deg相当于to top
    • 90deg相当于to right
    • 180deg相当于to bottom
    • 270deg相当于to left
• color1 颜色1（必填）
  • red、blue ...
  • #123456、#abcdef ...
  • rgb(0, 1, 2)、rgba(9, 8, 7, .6)...
  • 其他合法颜色值
• stop1 颜色1到哪里停止（选填）
  • 仅支持百分比 （数值大小不一定要从小到大！！！）
• color2 颜色2（必填）同上
• stop2 颜色2到哪里停止（选填）同上
• ... 至少2种颜色

下面写一个线性渐变效果：（海上日出）

div {
    width: 300px;
    height: 200px;
    background-image: linear-gradient(180deg, red 20%, orange, yellow 50%, green, cyan, blue 40%, purple);
}

后续更新其他几种渐变，欢迎讨论，记得点赞哦~

完结！撒花~