版权声明：若想转载，请在显眼的地方附上文章来源。 https://blog.csdn.net/Abudula__/article/details/82502979
有些特殊的效果只能通过设置颜色停止的位置来实现,这里简单的总结一下.
首先linear-gradient的详细教程如下:w3schools.
简单概括的话，其实语法就如下:
如果只写颜色，没有给停止的位置，效果以及代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
}.multicolor-linear {
background: linear-gradient(to right,blue,red);
}
</style>
</head>
<body>
<div class="multicolor-linear"></div>
</body>
</html>
就是有渐变的效果，但我们不能够控制颜色停止的位置，如果我们不想要其渐变，可以设置一个固定的停止的位置，这个可以是百分比，或者px等。
这里有个demo可以让你快速理解。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 201px;
height: 100px;
}.multicolor-linear {
background: linear-gradient(to right,blue 100px,red 150px ,blue);
}
</style>
</head>
<body>
<div class="multicolor-linear"></div>
</body>
</html>
首先前100px的位置是blue，后来100px到150px的位置中是从blue到红色的渐变，后来从150px到最终是从红色到蓝色渐变的过程。
有时候我们会遇到要实现一个如下的效果:
那个蓝色行颜色渐变的效果就是通过linear-gradient来实现的。
代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
h2{
line-height: 2;
font-size: 24px;
margin: 20px 0 20px 0;
background: linear-gradient(to right,#188eee 100px,#ccc 101px) left bottom no-repeat;
background-size: 100% 1px;
}
</style>
</head>
<body>
<h2>行程安排</h2>
<p>faklh ahkfa fhafafaflafafkfha lhakaak fkafhnafahfafaf vava v</p>
<h2>旅行感受</h2>
<p>放弃了你发哈看发开发阿飞阿海珐vv啊v吃吧开服那会帆帆发放</p>
</body>
</html>
这里注意的是超过101px以后就没有颜色了，但因为linear-gradient这个属性超过101px的部分是最后的颜色#ccc给补齐了。