渐变色函数的结果属于
<gradient>数据类型，是一种特别的<image>数据类型，所以渐变色只能被用于<image>可以使用的地方
linear-gradient()线性渐变
语法
linear-gradient(<angle>|<side-or-corner>,<color-stop-list>,?<color-hint>)
<angle>
用角度值指定渐变的方向（或角度）。角度顺时针增加。
<side-or-corner>
描述渐变线的方向，默认方向为自上之下。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。
<color-stop-list>
包括一个颜色值及可选的终点位置（从何时开始渐变）
颜色值
颜色值支持16进制颜色、颜色关键字（red）、rgb()、rgba()、transparent
终点位置
定义当前色值从渐变轴的何处开始渐变，可以是一个百分比值或**<length>**
<color-hint>
颜色沿着渐变轴的方向颜色变化顺序为：颜色1—完全融合—颜色2
定义渐变中点，就是定义两个颜色完全融合的位置。设置在两个颜色值之间（注意与颜色终点不同，需要用逗号分隔）
范例
角度
默认从上到下
background-image:linear-gradient(rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));
方向与角度相通
to right等价于90deg等价于450deg等同于-270deg
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));
开始渐变位置
红色从渐变轴的50%开始渐变可以看到50%的位置有一条明显的线，红色部分从这里开始进行渐变
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 255, 1));
蓝色部分从渐变轴的80%结束渐变（蓝色是结束颜色）
与上图进行对比可以发现渐变效果发生在渐变轴的50%位置与80%位置之间
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 255, 1) 80%);
定义渐变中点（完全融合位置）
默认为两个颜色变化开始到结束的中点
把渐变范围定义到30%到70%之间，此时的渐变中点就是50%（50%是30%到70%的中点），这时候渐变中点的取值范围为(30%,70%)，不能取两端的值，超出范围时实际效果为颜色之间变化，没有渐变效果
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 30%, rgba(0, 0, 255, 1) 70%);
手动定义中点
中点设置为40%，即在渐变轴的40%处实现完全融合
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 30%, 40%, rgba(0, 0, 255, 1) 70%);
多个渐变效果
存在多个渐变函数时会同时生效，后面生成的图形会叠加在前面生成图形之上
附上MDN的例子~~~
background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
注意
设置的百分比值、长度值都是相对于渐变起点进行设置可以设置多个渐变函数，后面的会叠加在上面如果觉得《【CSS】线性渐变属性值及范例详解》对你有帮助，请点赞、收藏，并留下你的观点哦！
