CSS3线性渐变linear-gradient

时间：5年前阅读：6321

　渐变实际上是两种或多种颜色之间的平滑过渡。而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡。渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变，通过确定多个色标可以制作多色渐变效果。

/*背景颜色渐变（从左侧开始，红色渐变到，蓝色）*/

background: -webkit-linear-gradient(left, red , blue);

/*90deg角度来放*/

/*background:linear-gradient(90deg,red,blue);*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
   <style type="text/css">    
#hretj{    
	width: 500px;    
	height: 200px;    
	margin: 0 auto;    
	border: 4px solid blue;    
	/*背景颜色渐变（从左侧开始，红色渐变到，蓝色）*/    
	background: -webkit-linear-gradient(left, red , blue);    
	/*90deg角度来放*/    
	/*background:linear-gradient(90deg,red,blue);*/    
}    
#herh{    
	width: 300px;    
	height: 100px;    
	margin: 100px auto;    
	background: -webkit-linear-gradient(top,#A4D625, #5A7900);    
	/*圆角代码*/    
	border-radius: 15px;    
}    
#herh:hover{    
	width: 300px;    
	height: 100px;    
	margin: 100px auto;    
	background: -webkit-linear-gradient(top, #5A7900,#A4D625);    
	/*圆角代码*/    
	border-radius: 15px;    
}    
</style>
</head>
<body> 
	<div id="hretj">    
</div>    
<div id="herh">    
</div>
</body>
</html>

效果图片：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

CSS3线性渐变linear-gradient

网友评论