linear-gradient详解

​#前端#​ ​#css#​

前文

​两个单词

1. linear 线性的，直线的
2. gradient 梯度，坡度

正文

概念

linear-gradient是一个CSS函数。用于生成一个由多种颜色沿着一条直线渐变填充的图片。它返回一种<gradient>数据类型，属于<image>数据类型的一种。 所以linear-gradient函数不能作为background-color等期待值为<color>数据类型的css属性的值。

组成

一个linear gradient由两部分组成：

1. gradient line - 梯度线
2. gradient point - 梯度点

在linear gradient中，梯度线只有一条，规定了颜色梯度变化的方向，梯度点可以有无数个，标注在梯度线方向上的颜色区间。

​​

gradient line

梯度线由盒模型的中心点center和梯度线的角度两个属性一起定义。

如上图所示，梯度线穿过盒模型的中心点O，梯度线的角度有从下往上的和模型垂直线与梯度线的夹角定义。

梯度线上有两个特殊的点，开始点和结束点，这两个点是盒模型方框在趋势线上的投影区间的端点。

gradient point

梯度点分布在梯度线的开始点和结束点之间，linear-gradient方法可以设置多个梯度点。

‍