使用标签可创建内容分隔线，结合CSS能自定义样式如宽、高、颜色及边框，实现居中、渐变、阴影等视觉效果，并可通过page-break-after等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-before 和 page-break-inside，适用于报表或文档类页面。
基本上就这些。用 加上适当的CSS，既能实现视觉分隔，也能满足打印分页需求，简单又实用。
以上就是怎么用HTML插入分页符或分隔线_HTML hr标签与CSS样式设置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589704.html
微信扫一扫 
支付宝扫一扫 
