H1标题颜色

更新时间: 8/31/2025, 1:51:17 PM

Vitepress中文搭建教程
本文转载至：VitePress快速上手中文教程

最简单的修改就是，比如改成红色

css

/* .vitepress/theme/style/var.css */
.VPDoc h1 {
  color: red;
}

但是这样并不太好看，我们可以弄一个渐变色

css

/* .vitepress/theme/style/var.css */
.VPDoc h1 {
  background: -webkit-linear-gradient(10deg, #bd34fe 5%, #e43498 15%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

TIP

background: 采用了一个线性渐变

background-clip: 使文本的背景颜色与渐变效果相同

text-fill-color：将文字透明

H1标题颜色 ​

H1标题颜色