Markdown分割线的渲染

Markdown分割线的渲染 👈点击这里也可查看

1. 前言

分割线的渲染需要借助CSS样式，CSDN编辑器不支持，像在线Markdown编辑器,Typora可以使用。
关于 Markdown 的分割线，官方给出了一下定义：

我们可以通过输入三个或更多的「减号 -」、「星号 *」、「下划线 -」的方式创建一条相当于HTML语法中 <hr/>
一样的分隔线。这三个符号之间可以包含空格，每种类型的分隔线，可以表现为如下形式： * * *, ***, *****, - - -, ---------。

分隔线是用一条明显的横线，来划分文章的上下两个部分，从而使排版变得美观，保持页面的平衡，引导读者的注意力。

2. 语法详解

2.1 分割线的声明

在 Markdown 文件中，连续的三个「星号 *」，或者连续的三个「减号 -」，或者连续的三个「下划线 _」会被渲染成分割线。
实例一：
代码：

下面是三类分割线


使用「星号」作为分割线

***

使用「减号」作为分割线
---

使用「下划线」作为分割线
___

渲染：
下面是三类分割线

使用「星号」作为分割线

---

使用「减号」作为分割线

使用「下划线」作为分割线

---

2.2 分割线的样式

Markdown 的目标是整个文档的风格统一，但是既然依托于 html 语法，那我们就依然能通过修改 CSS 的方式定制分割线的样式。
实例二：
修改分割线的粗细
代码：

分割线的尺寸

3px 宽线条
___


5px 宽线条
___


10px 宽线条
___

<style>
hr:nth-of-type(1) {
 border-width: 3px 0 0 0 !important;
}
hr:nth-of-type(2) {
 border-width: 5px 0 0 0 !important;
}
hr:nth-of-type(3) {
 border-width: 10px 0 0 0 !important;
}
</style>

渲染：

实例三：
修改分割线的颜色：
代码：

分割线的颜色

红色分割线
___

蓝色分割线
___
半透明的黑色分割线
___

渐变色分割线
___

<style>
hr:nth-of-type(1) {
 border-color: red !important;
}
hr:nth-of-type(2) {
 border-color: #00F !important;
}
hr:nth-of-type(3) {
 border-color: #0005 !important;
}
hr:nth-of-type(4) {
 border-image: linear-gradient(to right, #F00, #0F0 20%, #00F 80%, #000) 1 !important;
}
</style>

渲染：

实例四：
修改分割线的类型：
代码：

分割线的类型

 实线分隔线
___

虚线分割线
___

点状分割线
___

双线分割线
___
凹槽分割线
___

Inset分割线
___

Outset分割线
___

<style>
hr {
 border-style: none !important;
 border-top-width: 5px !important;
}
hr:nth-of-type(1) {
 border-top-style: solid !important;
}
hr:nth-of-type(2) {
 border-top-style: dashed !important;
}
hr:nth-of-type(3) {
 border-top-style: dotted !important;
}
hr:nth-of-type(4) {
 border-top-style: double !important;
}
hr:nth-of-type(5) {
 border-top-style: groove !important;
}
hr:nth-of-type(6) {
 border-top-style: ridge !important;
}
hr:nth-of-type(7) {
 border-top-style: inset !important;
}
hr:nth-of-type(8) {
 border-top-style: outset !important;
}
</style>

渲染：

3. 使用场景及实例

对一篇文章来说，分割线多见于

1. 标题与正文间的分隔。防止内容过于紧凑，反而无法突出重点；
2. 不同内容间的分隔。当我们文章包含多个关联性较小的主题时，可以用分割线来区分，这种情况在各大问答平台上很常见，比如：
   实例五：
   代码

# 科普也要创新

林群  
2019年12月19日08:13  来源：人民网－人民日报
\_\_\_


　　什么叫科普？一次我开会乘坐出租车，司机问我：“您这么大年纪了，不在家带孙辈，还到处跑，是做什么工作的？”我说：“做数学的。”想不到他立即蹦出一句：“哦，0.618。”

　　...

　　所以，做科普也可以创新，和做科研一样。

　　\_《 人民日报 》（ 2019年12月19日 19 版）\_

\_\_\_

相关新闻:

- [全国科学传播发展指数报告出炉](http://scitech.people.com.cn/n1/2019/0603/c1007-31116146.html)
- [科学家为啥不爱做科普](http://scitech.people.com.cn/n1/2017/0307/c1007-29129143.html)

渲染：

4. 小结

如果对您有帮助，请您点赞、收藏、关注、转发，让更多的人看到。

5. 其他文章

Markdown文章集合
👉Markdown分割线的渲染
👉Markdown 引用的用法
👉Markdown 列表的详细使用
👉Markdown综合实例
👉Markdown 生成目录
👉Markdown 分级标题
👉Markdown 脚注尾注
👉Markdown数学公式
👉Markdown 上标、下标的使用
👉Markdown中图片设置属性[尺寸，对齐，格式]
👉Markdown如何实现页内跳转
👉Markdown 中饼图如何使用
👉Markdown中甘特图的使用
👉Markdown中状态图的用法
👉Markdown时序图的使用方法
👉Markdown中类图的用法
👉Markdown中流程图的用法
👉Markdown表格的使用
👉Markdown如何导出Html文件Markdown文件
👉Markdown是什么？.md文件是什么？
👉Markdown段落的空行缩进用法
👉Markdown表格的使用
👉Markdown语法字体字号讲解
👉Markdown如何填充前景色、背景色
👉Markdown代码块，超链接，图片的插入
👉Markdown如何添加任务列表-复选框的添加
👉Markdown中特殊符号的使用
👉Markdown实现代码高亮，注释代码
👉Markdown注释的用法

快来试试吧☺️