持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
前言
开发过程中实现页面经常会遇到带有颜色渐变的背景、按钮，平时实现都是把psd传到蓝湖上，通过复制蓝湖上自带的样式实现效果，没有好好学习过相关的知识，今天来学习总结下
基础知识
颜色渐变：表示在两种或多种颜色之间平滑的颜色过渡。
css可以实现三种类型的渐变：线性渐变（linear-gradient）、径向渐变（radial-gradient）、圆锥渐变 (conic-gradient)
平时使用比较多的是线性渐变，因此今天主要学习线性渐变的相关知识
线性渐变（linear-gradient）
沿着某个方向（左右上下以及对角线）进行颜色上的渐变。
语法：
background: linear-gradient(direction, color1, color2...);
direction: 渐变方向(或角度)
a. 渐变方向
- to left：从右到左
- to bottom：从上到下(默认值)
- to right：从左到右
- to top：从下到上
- to left top：从左上角到右下角
- to left bottom：从左下角到右上角
- to right top：从右上角到左下角
- to right bottom：从右下角到左上角
b. 角度
表示颜色从圆心出发，正角度都属于顺时针方向。而负角度意味着逆时针方向。
0deg 代表渐变方向为从下到上，
90deg （-270deg） 代表渐变方向为从左到右，
180deg （-180deg）代表渐变方向为从上到下，
270deg（-90deg） 代表渐变方向为从右到左
color: 表示渐变中的过度颜色，一般第一个表示渐变起始颜色，最后一个表示渐变的结束颜色，中间表示中间过度颜色。color后面可以加上百分值或者像素值，表示某个颜色在该位置处固定
实现基本的线性渐变必须定义至少两种颜色
演示：
background: linear-gradient(to bottom, #FCECBF 0%, #FFFFFF 90%);
重复线性渐变（repeating-linear-gradient）
沿着某个方向上重复渐变以覆盖其整个容器
background-image: repeating-linear-gradient(-45deg,
#000,
#000 25px,
#fff 25px,
#fff 50px);
如上代码黑色从右上角到左下角的方向，从0开始渐变，到达25px时还是黑色，所以形成黑色条纹，在25px后变为白色，直到50px还是白色，所以此时形成白色条纹，然后渲染时会将这个50px的条纹进行重复的渐变，呈现出黑白条纹相间的效果。
