【CSS】线性渐变属性值及范例详解

渐变色函数的结果属于 <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%);

注意

1. 设置的百分比值、长度值都是相对于渐变起点进行设置
2. 可以设置多个渐变函数，后面的会叠加在上面