CSS 中的条纹背景 | 易学教程

第一种纵向条纹

　　可以通过background的liner-gradient实现

background: linear-gradient(#000 30%, #58a 60%,#dfd 0);

参数的形式就是颜色和占比，最后一个的占比可以设置为0，因为浏览器会自动用最后一个的值补全

再用 background-size调整大小，实现条纹，应为浏览器自动平铺背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.dd {
				position: absolute;
				left: 500px;
				top: 30px;
				width: 400px;
				height: 200px;
				background: linear-gradient(#000 30%, #58a 60%,#dfd 0);
				background-size: 100% 20%;
			}
		</style>
	</head>
	<body>
		<div class="dd"></div>
	</body>
</html>

第二种垂直条纹

　　实现原理就是用liner-gradient的第一个参数可以设置方向或者说角度，比如说如果要实现垂直条纹，可以使用to right 或者 90deg

background: linear-gradient(to right,#000 30%, #58a 60%,#dfd 0);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">

			.dd2 {
				position: absolute;
				left: 500px;
				top: 260px;
				width: 400px;
				height: 200px;
				background: linear-gradient(to right,#000 30%, #58a 60%,#dfd 0);
				background-size: 20% 100%;
			}

		</style>
	</head>
	<body>
		<div class="dd2"></div>
	</body>
</html>

第三种斜向条纹

　　原理和垂直条纹一样，只需要设置为任意角度就可以了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.dd3 {
				position: absolute;
				left: 500px;
				top: 500px;
				width: 400px;
				height: 200px;
				background: linear-gradient(45deg,#000 30%, #58a 60%,#dfd 0);
				background-size: 20% 20%;
			}
		</style>
	</head>
	<body>
		<div class="dd3"></div>
	</body>
</html>

来源：https://www.cnblogs.com/lilei-site/p/11792173.html

标签

css颜色

background

css