04渐变 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>渐变</title>
	</head>
	<style>
		*{margin: 0; padding: 0;}
		div{height: 100px;}
		.grad1{
			background: linear-gradient(to right,red,blue);
		}
		.grad2{
			background: linear-gradient(to bottom,red,blue);
		}
		.grad3{
			background: linear-gradient(to bottom right,red,blue);
		}
	</style>
	<body>
		<h1>左右渐变</h1>
		<div class="grad1"></div>
		<h1>上下渐变</h1>
		<div class="grad2"></div>
		<h1>左上角往右下角渐变</h1>
		<div class="grad3"></div>
	</body>
</html>

　　

posted @ 2020-11-27 08:33  卿家尘归尘  阅读(59)  评论(0)    收藏  举报