css线条渐变，线条两边向中间渐变, 中间向两边渐变

最新推荐文章于 2023-06-26 14:05:11 发布

haoqi好奇

最新推荐文章于 2023-06-26 14:05:11 发布

阅读量1.6k

点赞数

分类专栏：前端案例文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_41956789/article/details/128101611

版权

前端同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

案例

26 篇文章 0 订阅

订阅专栏

1. 效果图

2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			/* 两边向中间渐变 */
			.center-to-sides {
				position: relative;
				margin: 75px 0;
				width: 100%;
				height: 1px;
			}

			.center-to-sides:before {
				content: "";
				position: absolute;
				background-image: linear-gradient(to right, #ff0000, transparent);
				left: 10%;
				right: 50%;
				height: 1px;
			}
			.center-to-sides:after {
				content: "";
				position: absolute;
				background-image: linear-gradient(to left, #ff0000, transparent);
				left: 50%;
				right: 10%;
				height: 1px;
			}
			/* 中间向两边渐变 */
			.sides-to-center {
				position: relative;
				margin: 75px 0;
				width: 100%;
				height: 1px;
			}

			.sides-to-center:before {
				content: "";
				position: absolute;
				background-image: linear-gradient(to left, #ff0000, transparent);
				left: 10%;
				right: 50%;
				height: 1px;
			}
			.sides-to-center:after {
				content: "";
				position: absolute;
				background-image: linear-gradient(to right, #ff0000, transparent);
				left: 50%;
				right: 10%;
				height: 1px;
			}
		</style>
	</head>
	<body>
		<div class="center-to-sides"></div>
		
		<div class="sides-to-center"></div>
	</body>
</html>