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

mac2024-03-17 30

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

效果图：更多编程知识可以关注php中文网。