登录
首页 >  文章 >  前端

HTML中hr标签用法及样式设置教程

时间:2025-12-17 23:29:57 462浏览 收藏

推广推荐
免费电影APP ➜
支持 PC / 移动端,安全直达

学习知识要善于思考,思考,再思考!今天golang学习网小编就给大家带来《HTML中使用标签可以插入水平分隔线,配合CSS可自定义样式。以下是详细用法:一、基本用法: 标签这会在页面中插入一条默认的水平线,通常为灰色实线。二、通过CSS自定义分隔线样式你可以通过CSS来修改的外观,比如颜色、高度、边距等。示例代码:

标题

这是分隔线下方的内容。

三、更高级的样式(如虚线、渐变等)虚线分隔线:hr { border: 1px dashed #0000ff; /* 蓝色虚线 */ }渐变分隔线(使用CSS3): hr { background: linear-gradient(to right》,以下内容主要包含等知识点,如果你正在学习或准备学习文章,就都不要错过本文啦~让我们一起来看看吧,能帮助到你就更好了!

使用标签可创建内容分隔线,结合CSS能自定义样式如宽、高、颜色及边框,实现居中、渐变、阴影等视觉效果,并可通过page-break-after等CSS属性控制打印时的分页行为。

怎么用HTML插入分页符或分隔线_HTML hr标签与CSS样式设置

在HTML中插入分页符或分隔线,常用的方法是使用


标签。它表示内容主题的分隔,浏览器默认会将其渲染为一条水平线。通过结合CSS,可以灵活控制其样式、颜色、粗细和位置,满足不同页面布局需求。

使用HTML hr标签创建分隔线


是一个自闭合标签,直接插入到需要分隔的位置即可:

第一部分内容




第二部分内容

浏览器会在这两段文字之间显示一条默认样式的水平线。

用CSS美化hr分隔线样式

默认的 hr 看起来比较单调,通过CSS可以完全自定义其外观。常见的样式调整包括宽度、高度、颜色、边框、阴影等。

示例:设置一条居中、宽60%、高2px、灰色实线:


  • width:控制线条宽度,支持百分比或具体像素
  • height:设置线条厚度(需配合背景色,不能仅靠border)
  • background-color:填充颜色
  • border: none:清除默认边框影响
  • margin:用于居中或调整上下间距

实现更丰富的分隔线效果

利用CSS伪类和渐变,可以做出更具设计感的分隔线。

例如,创建一条带阴影的渐变线条:


或者使用虚线、点线风格:


  • dashed:虚线
  • dotted:点线
  • double:双线

打印时控制分页符行为

如果网页用于打印,有时希望在特定位置强制分页。虽然 hr 不是分页符,但可通过CSS实现打印分页:

这会在打印时在此处插入分页符。类似的还有 page-break-beforepage-break-inside,适用于报表或文档类页面。

基本上就这些。用


加上适当的CSS,既能实现视觉分隔,也能满足打印分页需求,简单又实用。

以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>