linear-gradient() | Mdn css gradient
CSSlinear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>[1]数据类型,是一种特别的<image>[2]数据类型。
/* 渐变轴为45度,从蓝色渐变到红色 */ linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);
如同其他gradient函数一般,linear-gradient() 函数没有内在尺寸[3];即,它不具备固有的或首选的尺寸,也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。
提示:由于<gradient>数据类型系<image>的子数据类型,<gradient>只能被用于<image>可以使用的地方。因此,linear-gradient() 并不适用于background-color[4]以及类似的使用 <color>[5]数据类型的属性中。线性渐变由一个轴 (梯度线) 定义,其上的每个点具有两种或多种的颜色,且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变,linear-gradient() 函数构建一系列垂直于渐变线的着色线,每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点
渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义,包括起始点,终点,以及两者之间的可选的中间点(中间点可以有多个)。
起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。(垂直线跟渐变线在同一象限内)
同样的,终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的,然而从起始点的对称点来定义终点是更容易理解的一种方式,因为终点是起点关于容器的中心点的反射点...