css实现分割线功能,各种各样的分割线(附效果图)

xvzhengyang

已于 2022-07-08 18:11:43 修改

阅读量1.4w

点赞数 12

于 2022-07-08 18:11:07 首次发布

本文链接：https://blog.csdn.net/xvzhengyang/article/details/125683652

版权

css 同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

HTML与CSS

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>          
	    <head>
		        <title>hr标签</title>
		    </head>
	    <body>
		        <p class="type">实线</p>
		       
		<hr class="hr-solid">

		        <p class="type">点线</p>
		       
		<hr class="hr-dotted">
		       
		<hr class="hr-dotted2">

		        <p class="type">虚线</p>
		       
		<hr class="hr-dashed">
		       
		<hr class="hr-dashed2">

		        <p class="type">疏密可控的虚线</p>
		       
		<hr class="hr-dashed-fixed">

		        <p class="type">双实线</p>
		       
		<hr class="hr-double">

		        <p class="type">两头虚的分隔线</p>
		       
		<hr class="hr-edge-weak">

		        <p class="type">斜纹分隔线</p>
		       
		<hr class="hr-twill">

		        <p class="type">波浪线</p>
		       
		<hr class="hr-wavy">

		        <p class="type">阴影线</p>
		       
		<hr class="hr-shadow">

		        <p class="type">END</p>

		   
	</body>
</html>
<style>
	.type {
		text-align: center;
		margin-top: 40px;
	}

	.hr-solid {
		border: 0;
		border-top: 1px solid #d0d0d5;
	}

	.hr-dotted {
		border: 0;
		border-top: 1px dotted #a2a9b6;
	}

	.hr-dotted2 {
		border: 0;
		border-top: 2px dotted #a2a9b6;
	}

	.hr-dashed {
		border: 0;
		border-top: 1px dashed #a2a9b6;
	}

	.hr-dashed2 {
		border: 0;
		border-top: 2px dashed #a2a9b6;
	}

	.hr-dashed-fixed {
		border: 0;
		padding-top: 1px;
		background: repeating-linear-gradient(to right, #a2a9b6 0px, #a2a9b6 4px, transparent 0px, transparent 12px);
	}

	.hr-double {
		border: 0;
		border-top: 3px double #d0d0d5;
	}

	.hr-edge-weak {
		border: 0;
		padding-top: 1px;
		background: linear-gradient(to right, transparent, #d0d0d5, transparent);
	}

	.hr-twill {
		border: 0;
		padding: 3px;
		background: repeating-linear-gradient(135deg, #a2a9b6 0px, #a2a9b6 1px, transparent 1px, transparent 6px);
	}

	.hr-wavy {
		border: 0;
		color: #d0d0d5;
		height: .5em;
		white-space: nowrap;
		letter-spacing: 100vw;
		padding-top: .5em;
	}

	.hr-wavy::before {
		content: "\2000\2000";
		/* IE浏览器实线代替 */
		text-decoration: overline;
		/* 现代浏览器 */
		text-decoration: overline wavy;
	}

	.hr-shadow {
		border: 0;
		padding-top: 10px;
		color: #d0d0d5;
		border-top: 1px solid rgba(0, 0, 0, .1);
		box-shadow: inset 0 10px 10px -10px;
	}
</style>