代码

.wonderpen-page {
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  padding: 30px 20px;
}

.wonderpen-content {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.05);
  padding: 40px 30px 60px 30px;
}

效果

image.png

注意在导出界面选择对应的 CSS，如下图所示：

image.png

其中所用的字体是：霞鹜新致宋。

更多效果

示例 1

代码：

.wonderpen-page {
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  padding: 32px 24px;
}

.wonderpen-content {
  background: rgba(255, 255, 255, 1);
  border-radius: 6px;
  box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px,
    rgba(17, 17, 26, 0.05) 0 8px 32px;
  padding: 40px 30px 60px 30px;
}

效果：

image.png

示例 2

代码：

.wonderpen-page {
  background: rgb(78, 64, 36);
  background: radial-gradient(
    circle,
    rgba(78, 64, 36, 1) 0%,
    rgba(74, 74, 74, 1) 100%
  );
  padding: 32px 24px;
}

.wonderpen-content {
  background: #111;
  border-radius: 6px;
  box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px,
    rgba(17, 17, 26, 0.05) 0 8px 32px;
  padding: 40px 30px 60px 30px;
}

.markdown-body {
  background: linear-gradient(45deg, #ffd700, #ffa500, #ffc700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

效果：

image.png

示例 3

代码：

.wonderpen-page {
  padding: 40px 30px;
  background-color: #1a1a2e;
  background-image: 
    /* 发光点阵 */
    radial-gradient(
      circle at 50% 50%,
      rgba(101, 255, 236, 0.12) 0%,
      transparent 8px
    ),
    /* 交叉网格 */
    linear-gradient(
      45deg,
      rgba(101, 255, 236, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      -45deg,
      rgba(101, 255, 236, 0.05) 1px,
      transparent 1px
    );
  background-size: 32px 32px, 24px 24px, 24px 24px;
}

.wonderpen-content {
  position: relative;
  padding: 48px 36px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  box-shadow: 
    0 0 60px rgba(101, 255, 236, 0.15),
    0 0 120px rgba(101, 255, 236, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(101, 255, 236, 0.15);
}

.wonderpen-content::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    120deg,
    rgba(101, 255, 236, 0.5),
    rgba(162, 101, 255, 0.5)
  );
  border-radius: 18px;
  z-index: -1;
  opacity: 0.6;
  filter: blur(8px);
}

.markdown-body h1 {
  background: linear-gradient(
    120deg,
    #00e5cd,
    #8b4fff
  );
  -webkit-background-clip: text;
  color: transparent;
  padding: 8px 0;
  font-weight: 600;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

效果：

image.png