如何使用CSS更改hr标签的厚度？_h5 设置hr厚度无效 px不能设置小数点-CSDN博客

如何使用CSS更改hr标签的厚度？下面本篇文章就来给大家介绍一下使用CSS更改hr标签的厚度的方法，希望对大家有所帮助。

在这里插入图片描述
HTML <hr> 标签在 HTML 页面中创建一条水平线；水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

<hr> 标签的厚度可以使用CSS中的height属性设置；最小高度可以是1px，因为可用的最小单位是1像素。也可以使用CSS属性来设置<hr> 标签的样式以使hr标签在外观上更加美观。

示例1：使用CSS height属性来设置<hr> 标签的厚度

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
		div { 
            width: 300px; 
        } 
          
        h1, h3 { 
            color: green; 
        } 
          
        hr { 
            position: relative; 
            top: 20px; 
            border: none; 
            height: 12px; 
            background: black; 
            margin-bottom: 50px; 
        } 
		</style>
	</head>

	<body>
	     <center> 
	        <div> 
	           <p>测试文字！水平线上端。</p>
		   <hr />
		   <p>测试文字！水平线下端。</p>
	        </div>
             </center> 
	</body>

效果图： ![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS8zMjAvMjM2LzExMC8xNTYxODAwODE4ODM0ODk5LnBuZw?x-oss-process=image/format,png)

示例2：使用CSS属性来设置<hr> 标签的样式

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			div { 
	            width: 200px; 
	        } 
	          
	        body { 
	            background-color: #f0f0f0; 
	            width: 80px; 
	            float: center; 
	        } 
	          
	        hr.class-1 { 
	            border-top: 10px solid #8c8b8b; 
	        } 
	          
	        hr.class-2 { 
	            border-top: 3px double #8c8b8b; 
	        } 
	          
	        hr.class-3 { 
	            border-top: 1px dashed #8c8b8b; 
	        } 
	          
	        hr.class-4 { 
	            border-top: 1px dotted #8c8b8b; 
	        } 
	          
	        hr.class-5 { 
	            background-color: #fff; 
	            border-top: 2px dashed #8c8b8b; 
	        } 
	          
	        hr.class-6 { 
	            background-color: #fff; 
	            border-top: 5px dotted #8c8b8b; 
	        } 
		</style>
	</head>

	<body>
	    <div> 
	        <hr class="class-1" /> 
	        <br /> 
	        <hr class="class-2" /> 
	        <br /> 
	        <hr class="class-3" /> 
	        <br /> 
	        <hr class="class-4" /> 
	        <br /> 
	        <hr class="class-5" /> 
	        <br /> 
	        <hr class="class-6" /> 
	    </div> 
	</body>
</html>