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

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

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

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

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

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

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

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

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

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

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

linear-gradient(red0%,orange10%,orange30%,yellow50%,yellow70%,green90%,green100%);linear-gradient(red,orange10%30%,yellow50%70%,green90%);linear-gradient(red0%,orange10%30%,yellow50%70%,green90%100%);

创建不带渐变的纯色带

background:linear-gradient(red0%30%,yellow30%60%,blue30%100%);

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

.box{width:100px;height:100px;background-image:linear-gradient(45deg,yellow50%,red50%);/*等价于background-image:linear-gradient(45deg,yellow050%,red50%100%);*/background-size:100%100%;}

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

.box{height:90px;background-image:linear-gradient(45deg,red25%,transparent0),linear-gradient(45deg,transparent75%,red0),linear-gradient(45deg,red25%,transparent0),linear-gradient(45deg,transparent75%,red0);background-size:30px30px;border:1pxsolidpink;background-position:00,-15px15px,15px-15px,00;}

height:300px;background-image:linear-gradient(toright,pink1px,transparent1px),linear-gradient(pink1px,transparent1px);background-size:30px30px;

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(toleft,skyblue,orange)，是一个从右往左的渐变。

到此这篇关于CSS中的linear-gradient参数学习与使用的文章就介绍到这了,更多相关csslinear-gradient参数内容请搜索巴适教程以前的文章或继续浏览下面的相关文章，希望大家以后多多支持巴适教程！