Obsidian常見問題010：如何在標題下方添加漸層線條？

1. 需求

想要在標題下方添加漸層線條或彩虹線條以增加美觀與提高章節辨識度。

2. 解決方法

以CSS片段加入下列樣式：

/* 二級標題底部出現彩虹線條 */
.HyperMD-header .cm-header-2 {
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722) 5;
  /*border-image: linear-gradient(to right, rgb(var(--ctp-rosewater)) 7%, rgb(var(--ctp-flamingo)) 7%, rgb(var(--ctp-flamingo)) 14%, rgb(var(--ctp-mauve)) 14%, rgb(var(--ctp-mauve)) 21%, rgb(var(--ctp-pink)) 21%, rgb(var(--ctp-pink)) 28%, rgb(var(--ctp-red)) 28%, rgb(var(--ctp-red)) 35%, rgb(var(--ctp-maroon)) 35%, rgb(var(--ctp-maroon)) 42%, rgb(var(--ctp-peach)) 42%, rgb(var(--ctp-peach)) 49%, rgb(var(--ctp-yellow)) 49%, rgb(var(--ctp-yellow)) 56%, rgb(var(--ctp-green)) 56%, rgb(var(--ctp-green)) 63%, rgb(var(--ctp-teal)) 63%, rgb(var(--ctp-teal)) 70%, rgb(var(--ctp-sky)) 70%, rgb(var(--ctp-sky)) 77%, rgb(var(--ctp-sapphire)) 77%, rgb(var(--ctp-sapphire)) 85%, rgb(var(--ctp-blue)) 85%, rgb(var(--ctp-blue)) 92%, rgb(var(--ctp-lavender))) 5;*/
  /*border-image: linear-gradient(to right, pink, Fuchsia, red, darkred) 1;*/
}

原樣式來自AnuPpuccin主題的設定。

CSS片段2

/* 二級標題底部出現彩虹線條 */
.HyperMD-header .cm-header-2 {
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722) 5;
}

＃＃

您可能也會有興趣的類似文章

• [Obs＃86] 分享與編輯器相關的21個Obsidian外掛 (0則留言, 2022/05/08)
• [Obs＃52] 變更段落顏色與重點高亮度的CSS片段 (0則留言, 2021/09/20)
• Obs129｜Obsidian除了CSS片段以外的CSS進階用法與兩個CSS外掛 (0則留言, 2023/05/14)
• [Obs＃96] Obsidian分頁調整： CSS樣式與外掛，讓分頁操作更簡便 (0則留言, 2022/09/10)
• [Obs＃25] 美化筆記的兩個外掛：Emoji Toolbar與Icons與自訂CSS樣式 (0則留言, 2021/01/30)
• 為Obsidian頁籤增添光彩 (0則留言, 2022/08/31)
• Obs128｜Obsidian Dataview進度條與YAML欄位快速輸入的方法 (0則留言, 2023/05/11)
• [Obs＃115]用Obsidian建立萬用的收藏資料庫(Collections)；善用Minimal Theme與Dataview (0則留言, 2023/02/26)
• Obs123-掌握Obsidian的神秘技巧：解密鮮為人知的操作方法 (0則留言, 2023/04/15)
• Obsidian(黑曜石) 高亮度顯示或變更文字顏色的3種方法 (4則留言, 2020/07/01)
• Obsidian Soundscapes Plugin停止標題捲動的方法 (2則留言, 2024/02/20)
• Obs144｜Obsidian v1.5新功能－表格編輯器終於現身了！ (3則留言, 2023/11/25)
• [Obs＃107] Obsidian全方位搜尋：OmniSearch外掛 (0則留言, 2022/11/20)
• Obs＃118 | Obsidian超棒的圖形處理 Awesome Image (4則留言, 2023/03/22)
• [Obs＃105] Obsidian外掛 Local REST API 提供外部整合服務 (0則留言, 2022/11/06)