css3 渐变-CSDN博客

本文链接：https://blog.csdn.net/weixin_49868928/article/details/109185303

css3 渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		html, body {
			height: 100%;
		}

		body {
			margin: 0;
			padding: 0;
			background-color: #f8fcd4;
			/*制作背景渐变效果*/
		/*	background-image: linear-gradient(
				to bottom,
				#f8fcd4 20%,
				#dbfacb 100%
			);*/
		}
		.nav {
			width: 800px;
			text-align: center;
			padding-top: 50px;
			margin: 0 auto;
		}

		/*设置按钮基本样式*/
		.nav a {
			display: inline-block;
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			font-size: 14px;
			color: #fff;
			text-decoration: none;
			border: 1px solid #e59500;
			background-color: #FFB700;
			background-image: linear-gradient(
				to bottom,
				#FFB700 0%,
				#FF8C00 100%
			);
		}

		/*制作橙色按钮悬停效果*/
		.nav a:hover{
		background-color: #FFCB48;
			background: linear-gradient(
				to bottom,
				#FFCB48 0%,
				green 100%
			);
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#;">refresh</a>
		<a href="#">shuffle</a>
		<a href="#">preview</a>
		<a href="#">tea</a>
		<a href="#">wifi</a>
		<a href="#">locator</a>
	</div>
</body>
</html>

在这里插入图片描述
鼠标悬停上面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 渐变</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}

		.progress {
			width: 400px;
			height: 40px;
			margin: 100px auto;
			border-radius: 5px;
			background-color: green;
			background-image: linear-gradient(
				135deg,
				yellow 25%,
				transparent 25%,
				transparent 50%,
				yellow 50%,
				yellow 75%,
				transparent 75%,
				transparent 100%
			);

			background-size: 40px 40px;
		}
	</style>
</head>
<body>
	<div class="progress"></div>

</body>
</html>