色彩的分支------渐变色定义：按照一定规律做阶段性变化的色彩（抽象！！！）
我们可以将图片分为两块
以中心线为参考，再来看渐变色的定义：按照一定规律做阶段性变化的色彩
既然是按一定的规律做阶段性变化，那么这个规律是我们的核心吗？
当然不是，毕竟这个太太太底层了，涉及到了源码，如有兴趣点赞过20爆肝！
抛开原有的定义，来一个简单到无敌的全新理解：
x（r + g + b）= y 翻译成中文 规律（颜色1 + 颜色2 + 颜色3）= 渐变色
通过这个公式，我们很容易就知道，渐变色的核心在于x元素
（计算机可看不懂颜色，转换，三原色）
是时候揭露 x元素了，他就是CSS3中background的linear-gradient()函数
小试牛刀：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
width: 500px;
height: 500px;
background: linear-gradient(red,green,blue);//核心
}
</style>
</head>
<body>
<div id="grad1"></div>//载体
</body>
</html>建议使用线上体验
啊！怎么是上下结构
莫慌，屌爆了的前辈们提供了一种自定义方向的属性
x to + z (r + g + b) = y 翻译一下 规律【方向（颜色1，颜色2，颜色3）】 = 渐变色
to + z 默认值为由上到下
方向：上到下为默认，我要和开始提供的图片一样，左到右 to left，右到左 to right
ps：上下，左右可以通过调职颜色1和颜色3的位置到达一样的效果
x to + z (r + g + b) = y
规律【方向（颜色1，颜色2，颜色3）】 = 渐变色
渐变色实际上就是一张独特的背景颜色
第一步：设置一个background：
第二步：添加函数linear-gradient(red,green,blue);
第三步：自定义根据公式按自己的需求进行修改
规律【方向（颜色1，颜色2，颜色3）】 = 渐变色
background: linear-gradient(to + z , r , g , b);提问：颜色可以多少个？
答案目前所测试15以下是可行的，15以上不知道
ps:颜色可以用rgb格式等方法实现