如何使用CSS更改hr标签的厚度?

如何使用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>
</html>

效果图:

776a483e6ac8c1593237c16dd5c186c.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>

效果图:

fb1bb2639d3c22d72e0ee660899b44b.png

以上就是如何使用CSS更改hr标签的厚度?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏