这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战
CSS渐变
linear-gradient()线性渐变
简单效果，从上到下，从黑色到红色的渐变效果实现：
linear-gradient(black, red);
linear-gradient默认是自上而下的，不需要指定角度，所以在所有线性渐变语法中，to bottom都是多余的。
// 这里的to bottom就是多余的
linear-gradient(to bottom, black, red)
如果不是自上而下而是其他方向的就需要我们去指定渐变的方向，渐变的方向有两种表达方式，一种是使用关键字to+方位，一种是直接使用角度值。
// 使用to + 方位
linear-gradient(to right, black, red);
// 直接赋值角度值
linear-gradient(66deg, black, red);
我们在项目中会多次使用"to + 方位值"，一方面是让我们更容易理解和记忆，一方面是因为项目中的渐变效果不是对角渐变，就是水平或者垂直渐变，更适合使用"to + 方位值"这种写法，而且这种写法实现的渐变效果不会受到元素尺寸的限制。
我们再看看渐变的起点和重点，当我们理解了CSS渐变的角度值对应的方位，再去理解线性渐变的起点和重点的位置，就会理解线性渐变渲染效果。
.wrapper {
width: 66px;
heigth: 144px;
border: 1px solid #ccc;
background-image: linear-gradient(45deg, black 100px, red 100px 155px, white 155px);
}
上面代码中的100px的起点位置不是从端点开始的，也不是从元素的某一边进行开始的，而是沿着渐变角度所在的直线的垂直线开始的。如果渐变断点中出现了百分比值，这个百分比值就是相对渐变的起点到终点的距离计算出来的。
我们在渐变中还会遇到color-stop-list数据类型，这也就是我们用到的渐变断点，渐变断点至少有2个颜色值，而且断点语法中的颜色值和位置值的前后顺序也是有要求的，颜色值必须在位置值的前面。
// 错误写法
linear-gradient(black);
linear-gradient(black, 33% red);
//正确写法
linear-gradient(black, red 33%);
当没有指定具体断点位置的时候，各个渐变颜色所形成的色块大小是自动等分的。如果起点和终点的颜色与相邻断点的颜色值一样，那么起点色值和终点色值是不用写出来。
我们在同一个渐变中，不同类型的断点位置是可以同时使用的，渐变的断点位置也可以是负数或者大于100%。
但是当存在多个渐变断点的时候，前面的渐变断点位置值有时候会比后面的渐变断点设置的位置值要大，这个时候后面的渐变断点位置值会按照前面的断点位置值进行计算。
linear-gradient(red 10px, pink 1px, green 55px);
渐变断点还支持一次性设置两个位置值，除此之外，我们也可以设置颜色的转换点位置。
linear-gradient(red, 66%, green);
注意：当我们不是高清显示器，在谷歌浏览器中，不同颜色位于同一断点位置的时候，两个颜色的连接处可能会有明显的锯齿。
