linear-gradient参数学习与使用

时间：2024-10-21 08:16:38

定义与方法

inear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

参数

方法：linear-gradient(direction, color-stop1, color-stop2, ...)

direction：第一个参数表示渐变的方向。其可以是一个具体的角度值如45deg，或者是具体的方向值如to top，表示自下而上渐变；to bottom表示自上而下渐变【默认为to bottom】，还有 to right、to left等。

color-stop：渐变色的起止位置，通常是颜色加起始位置百分比。如 red 10%等。

角度参考值：【角度值仅代表宽高相等的正方形所对应的角度值】

direction【方向值】 angle【角度值】
to right 90deg
to bottom right 135deg
to top right 45deg
to left -90deg|270deg
to top left -45deg|315deg
to bottom left -135deg|225deg
to top 0
to bottom 180deg

线性渐变的组成

线性渐变由一个轴、渐变线和两个或多个色停点定义。轴上的每个点都是不同的颜色，为了创建平滑的渐变，linear-gradient()函数绘制了一系列垂直于渐变线的彩色线，每一条线的颜色都和它与渐变线相交的点的颜色相匹配。

渐变线由包含渐变图像的方框的中心和一个角度定义。渐变的颜色由两个或多个点决定:起点、终点和中间的可选色停点。
在这里插入图片描述

角度值

角度值：穿过中心点的垂直线与渐变线之间的夹角，如图中所示的E为30度角。根据角度可以确定渐变线的位置，如图中F’所在的直线为渐变线。

起止点：起点是渐变线上第一个颜色开始的位置。终点是最后一种颜色的终点。这两个点的每一个点都是由梯度线与在同一象限内从方框角出发的垂线的交点定义的。终点可以理解为起点的对称点。
如上图中从C点和A点向渐变线画出垂线，交点即为起止点。
在这里插入图片描述

上图中G为起点，H为终点。color stop为介于起点和终点之间，渐变线上的某些点。以linear-gradient(30deg, red 10% , yellow 30%, blue 70%)为例，在渐变线上就有3个点，从起点开始10%，30%，70%的位置。

渐变中心点：默认渐变中心点为两个色值点的中间值，可通过参数移动中间点。以上面linear-gradient(30deg, red 10% , yellow 30%, blue 70%)为例，在红色向黄色渐变时，默认的渐变中心点在两者正中的位置，也就是20%的位置。linear-gradient(30deg, red 10% , 15%, yellow 30%, blue 70%)，通过在两者之间设定值，可以将中心点移动到15%的位置。

用法示例

通过在渐变线上添加更多的颜色停止点，您可以在多个颜色之间创建高度自定义的过渡。可以使用或显式地定义颜色停止的位置。如果您没有指定颜色的位置，它将被放置在它前面和后面颜色的中间。下面两个梯度是相等的

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

默认情况下，如果没有带有0%停止的颜色，则声明的第一个颜色将在该点。同样，最后一种颜色将继续到100%标记，或者如果在最后一站没有声明长度，则在100%标记处。

允许多位置彩色停机，通过在CSS声明中包含两个位置，可以将一个颜色声明为两个相邻的颜色停止点。下面三个梯度是相等的

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

创建不带渐变的纯色带

background: linear-gradient(red 0% 30%, yellow 30% 60%, blue 30% 100%);

在这里插入图片描述

绘制三角图形

在该例子中，通过将其中一种色彩设置为透明色transparent，可获得上三角或者下三角

.box {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg, yellow 50%, red 50%);
    /* 等价于background-image: linear-gradient(45deg, yellow 0 50%, red 50% 100%);  */
    background-size: 100% 100%;
}

在这里插入图片描述

创建方块背景图

由四个三角形组成两个小方块。

.box {
    height: 90px;
    background-image: linear-gradient(45deg, red 25%,transparent 0),
    linear-gradient(45deg, transparent 75%, red 0),
    linear-gradient(45deg, red 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, red 0);
    background-size: 30px 30px;
    border: 1px solid pink;
    background-position: 0 0,-15px 15px,15px -15px,0 0;
}

在这里插入图片描述

网格线
height: 300px;
    background-image: linear-gradient(to right,pink 1px, transparent 1px), linear-gradient(pink 1px, transparent 1px);
    background-size: 30px 30px;

在这里插入图片描述

注意事项

带前缀的渐变设置角度的差异性

linear-gradient(0deg, red ,blue)不太前缀的渐变默认是从上往下渐变。加上前缀以后，是从做左往右。

	background-image:-webkit-linear-gradient(0deg,skyblue,orange);
	background-image:-moz-linear-gradient(0deg,skyblue,orange);
	background-image:-o-linear-gradient(0deg,skyblue,orange);
	background-image:-ms-linear-gradient(0deg,skyblue,orange);

为了保持两者一致，可采用互补的写法，带前缀的和不带前缀的角度值相加为90deg。

background-image:-webkit-linear-gradient(90deg,skyblue,orange);
//等价
linear-gradient(0deg, red ,blue)

渐变方向关键词

-webkit-linear-gradient(right,skyblue,orange) 等价于 gradient(to left,skyblue,orange)，是一个从右往左的渐变。

相关文章