Markdown 分隔線

1. 前言

關(guān)于 Markdown 的分割線，官方給出了一下定義：

我們可以通過輸入三個或更多的「減號 -」、「星號 *」、「下劃線 -」的方式創(chuàng)建一條相當于 HTML 語法中 <hr/> 一樣的分隔線。這三個符號之間可以包含空格，每種類型的分隔線，可以表現(xiàn)為如下形式： * * *, ***, *****, - - -, ---------。

原文出處： daringfireball.net

分隔線是用一條明顯的橫線，來劃分文章的上下兩個部分，從而使排版變得美觀，保持頁面的平衡，引導(dǎo)讀者的注意力。

環(huán)境說明：
考慮到 Markdown 工具之間的不兼容，有的內(nèi)容直接從頁面復(fù)制粘貼到本地不會正常顯示，大家學(xué)習(xí)時自己動手寫是肯定沒問題的。本節(jié)所有實例代碼及演示效果均使用 Typora 工具完成。

本節(jié)所有截圖均為 Typora 導(dǎo)出為 HTML 后的渲染效果。

2. 語法詳解

2.1 分隔線的聲明

在 Markdown 文件中，連續(xù)的三個「星號 *」，或者連續(xù)的三個「減號 -」，或者連續(xù)的三個「下劃線 _」會被渲染成分割線。

實例 1：

### 下面是三類分割線


使用「星號」作為分割線

***

使用「減號」作為分割線

---

使用「下劃線」作為分割線
___

渲染結(jié)果如下：

2.2 分割線的樣式

Markdown 的目標是整個文檔的風(fēng)格統(tǒng)一，但是既然依托于 html 語法，那我們就依然能通過修改 CSS 的方式定制分割線的樣式。

實例 2：

修改分割線的粗細

### 分割線的尺寸

#### 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>

渲染結(jié)果如下：

實例 3：

修改分割線的顏色：

### 分割線的顏色

#### 紅色分割線
___

#### 藍色分割線
___

#### 半透明的黑色分割線
___

#### 漸變色分割線
___

<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>

渲染結(jié)果如下：

實例 4：

修改分割線的類型：

### 分割線的類型

#### 實線分隔線
___

#### 虛線分割線
___

#### 點狀分割線
___

#### 雙線分割線
___

#### 凹槽分割線
___

#### 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>

渲染結(jié)果如下：

3. 場景及應(yīng)用實例

對一篇文章來說，分割線多見于

1. 標題與正文間的分隔。防止內(nèi)容過于緊湊，反而無法突出重點；

2. 不同內(nèi)容間的分隔。當我們文章包含多個關(guān)聯(lián)性較小的主題時，可以用分割線來區(qū)分，這種情況在各大問答平臺上很常見，比如：

~~~~~~~~~~華麗的分割線~~~~~~~~~~

實例 5：

如何用分割線區(qū)分不同內(nèi)容主體，來源：人民日報 (節(jié)選)

# 科普也要創(chuàng)新

林群  
2019年12月19日08:13  來源：人民網(wǎng)－人民日報
___


　　什么叫科普？一次我開會乘坐出租車，司機問我：“您這么大年紀了，不在家?guī)O輩，還到處跑，是做什么工作的？”我說：“做數(shù)學(xué)的。”想不到他立即蹦出一句：“哦，0.618?！?
　　...

　　所以，做科普也可以創(chuàng)新，和做科研一樣。

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

___

相關(guān)新聞:

- [全國科學(xué)傳播發(fā)展指數(shù)報告出爐](http://scitech.people.com.cn/n1/2019/0603/c1007-31116146.html)
- [科學(xué)家為啥不愛做科普](http://scitech.people.com.cn/n1/2017/0307/c1007-29129143.html)

渲染結(jié)果如下：

4. 小結(jié)

1. 分割線使用的關(guān)鍵字 *、-、_，都包含多種語義，當我們希望增加分割線的時候，請注意確保該字符連續(xù)出現(xiàn)，并且保證至少三個，同時，該行前后不允許有別的內(nèi)容；
2. 使用減號 -，用于分隔線的時候需要注意，因為減號還有二級標題的作用，即在一行文字的下面插入三個減號時，該文字變成二級標題，所以使用減號需要確保前面有一空行；
3. 建議在文章中都是用下劃線 _，作為換行的輸入，這樣避免語義錯誤，同時與 Word 的方式更加接近。

在一篇文章中分割線不宜出現(xiàn)次數(shù)過多，不然會顯得文章整體過于瑣碎凌亂，缺少主題。分割線雖然不是使用頻繁的布局工具，但在展示個性、引起讀者注意等方面有非常好的效果，用好分割線對文章整體格調(diào)的提升有非常大的幫助。