效果预览

这是一级标题 (H1) - 深蓝色渐变

这里是段落文本，展示标题与其他内容的关系。标题具有醒目的背景色，但其他内容保持不变。

这是二级标题 (H2) - 绿色渐变

每个标题级别都有独特的配色方案，便于区分不同层级的标题。

这是三级标题 (H3) - 橙色渐变

标题背景采用现代渐变设计，左侧有彩色边框作为点缀。

这是四级标题 (H4) - 紫色渐变

所有标题都保留了原有的字体大小、边距等属性，仅添加了背景效果。

这是五级标题 (H5) - 红色渐变

这个方案专注于标题美化，不会改变其他内容的样式。

这是六级标题 (H6) - 灰色渐变

通过不同颜色的背景，文章结构更加清晰可见。

使用说明

在博客园中应用此样式

登录您的博客园账号
进入「设置」→「博客设置」
找到「页面定制CSS代码」区域
将以下CSS代码复制粘贴到输入框中
点击「保存」按钮应用更改
刷新您的博客页面查看效果

/* 博客园标题美化样式 */
#cnblogs_post_body h1 {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    padding: 18px 30px;
    border-radius: 12px;
    font-size: 2.2rem;
    margin: 40px 0 25px;
    box-shadow: 0 8px 15px rgba(52, 152, 219, 0.3);
    border-left: 8px solid #e74c3c;
}

#cnblogs_post_body h2 {
    background: linear-gradient(to right, #2ecc71, #1abc9c);
    color: #2c3e50;
    padding: 16px 25px;
    border-radius: 10px;
    font-size: 1.9rem;
    margin: 35px 0 20px;
    border-left: 6px solid #f39c12;
}

#cnblogs_post_body h3 {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 14px 22px;
    border-radius: 8px;
    font-size: 1.7rem;
    margin: 30px 0 18px;
    border-left: 5px solid #3498db;
}

#cnblogs_post_body h4 {
    background: linear-gradient(to right, #9b59b6, #8e44ad);
    color: #ecf0f1;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1.5rem;
    margin: 25px 0 15px;
    border-left: 4px solid #2ecc71;
}

#cnblogs_post_body h5 {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #f9f9f9;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 1.3rem;
    margin: 20px 0 12px;
    border-left: 3px solid #f1c40f;
}

#cnblogs_post_body h6 {
    background: linear-gradient(to right, #95a5a6, #7f8c8d);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 1.1rem;
    margin: 18px 0 10px;
    border-left: 2px solid #34495e;
}
                

配色方案

H1 深蓝渐变

H2 绿色渐变

H3 橙色渐变

H4 紫色渐变

H5 红色渐变

H6 灰色渐变