CSS linear-gradient() 函数

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

1.默认从上到下渐变

	<style>
	#grad1 {
		width:300px;
	    height: 200px;
	    background-image: linear-gradient(red , yellow);
	}
	</style>
	<div id="grad1"></div>

2.从左侧开始的线性渐变，从红色开始，转为黄色

<style>
	#grad1 {
	    height: 200px;
	    background-image: linear-gradient(to right, red , yellow);
	}
</style>

<div id="grad1"></div>

3.从左上角到右下角的线性渐变（ 对角渐变）

<style>
	#grad1 {
	    height: 200px;
	    background-image: linear-gradient(to bottom right, red , yellow);
	}
</style>
<div id="grad1"></div>

4.演示多个终止色:

<style>
	#grad1 {
	    height: 200px;
	    background-image: linear-gradient(to right, red,orange,yellow,grey,pink,skyblue,deeppink);
	}
</style>
<div id="grad1"></div>

5.演示使用了透明度

<style>
	#grad1 {
		width:300px;
	    height: 200px;
	    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
	}
	</style>
<div id="grad1"></div>

6.演示线性渐变指定一个角度

<style>
#grad1 {
	width:300px;
    height: 200px;
    background-image: linear-gradient(270deg,pink, skyblue);
}
</style>
<div id="grad1"></div>