WordPress 简约高雅标题：探索三种风格样式的独特魅力

风格一

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5 {
    font-weight: bold!important;
    margin: 12px 0!important;
    padding: 10px 20px!important; /* 适当增加内边距，让文字更舒展 */
    text-align: left; /* 左对齐，显得更规整 */
    font-family: "黑体", sans-serif!important;
    color: #333!important;
}

.article-content h1 {
    border-bottom: 1px solid #ccc!important; /* 浅灰色细边框作为简单装饰 */
}

.article-content h2 {
    border-bottom: 1px solid #ccc!important;
}

.article-content h3 {
    border-bottom: 1px dotted #ccc!important; /* 采用虚线边框，稍作区分 */
}

.article-content h4 {
    border-bottom: 1px dotted #ccc!important;
}

.article-content h5 {
    border-bottom: 1px dotted #ccc!important;
}

风格二

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5 {
    font-weight: bold!important;
    margin: 12px 0!important;
    padding: 5px 12px!important;
}

.article-content h1 {
    border-bottom: none!important;
    border-left: 5px solid!important;
    border-image: linear-gradient(to bottom, red, rgba(255, 0, 0, 0)) 1 100%!important;
    border-radius: 5px 0 0 5px!important;
}

.article-content h2 {
    border-bottom: none!important;
    border-left: 5px solid!important;
    border-image: linear-gradient(to bottom, #FF1493, rgba(255, 20, 147, 0)) 1 100%!important;
    border-radius: 5px 0 0 5px!important;
}

.article-content h3 {
    border-bottom: none!important;
    border-left: 5px solid!important;
    border-image: linear-gradient(to bottom, #4169E1, rgba(65, 105, 225, 0)) 1 100%!important;
    border-radius: 5px 0 0 5px!important;
}

.article-content h4 {
    border-bottom: none!important;
    border-left: 5px solid!important;
    border-image: linear-gradient(to bottom, #3CB371, rgba(60, 179, 113, 0)) 1 100%!important;
    border-radius: 5px 0 0 5px!important;
}

.article-content h5 {
    border-bottom: none!important;
    border-left: 5px solid!important;
    border-image: linear-gradient(to bottom, #FFC0CB, rgba(255, 192, 203, 0)) 1 100%!important;
    border-radius: 5px 0 0 5px!important;
}

风格三

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5 {
    font-weight: bold!important;
    margin: 8px 0!important;
    padding: 3px 8px!important;
    text-align: center;
    font-size: 14px!important;
    font-family: "华文楷体", serif!important;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px; /* 增加标题整体圆角效果 */
    transition: all 0.3s ease!important; /* 为标题添加过渡效果，增强交互体验 */
}

.article-content h1 {
    background: linear-gradient(135deg, #FF5733, #FF9800)!important; /* 橙色系渐变背景 */
    color: #fff!important; /* 白色文字，与渐变背景搭配更协调 */
    border: 1px solid #FF5733!important; /* 边框颜色与渐变起始色呼应 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important; /* 增加阴影效果，更立体 */
}

.article-content h1:hover {
    background: linear-gradient(135deg, #FF9800, #FFC107)!important; /* 悬停时的背景渐变变化 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)!important; /* 悬停时阴影加深 */
}

.article-content h2 {
    background: linear-gradient(135deg, #33FF57, #00E676)!important; /* 绿色系渐变背景 */
    color: #fff!important;
    border: 1px solid #33FF57!important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important;
}

.article-content h2:hover {
    background: linear-gradient(135deg, #00E676, #00C853)!important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)!important;
}

.article-content h3 {
    background: linear-gradient(135deg, #5733FF, #9C27B0)!important; /* 紫色系渐变背景 */
    color: #fff!important;
    border: 1px solid #5733FF!important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important;
}

.article-content h3:hover {
    background: linear-gradient(135deg, #9C27B0, #E91E63)!important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)!important;
}

.article-content h4 {
    background: linear-gradient(135deg, #FF33E2, #F48FB1)!important; /* 粉色系渐变背景 */
    color: #fff!important;
    border: 1px solid #FF33E2!important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important;
}

.article-content h4:hover {
    background: linear-gradient(135deg, #F48FB1, #EC407A)!important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)!important;
}

.article-content h5 {
    background: linear-gradient(135deg, #33E2FF, #03A9F4)!important; /* 蓝色系渐变背景 */
    color: #fff!important;
    border: 1px solid #33E2FF!important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important;
}

.article-content h5:hover {
    background: linear-gradient(135deg, #03A9F4, #00BCD4)!important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)!important;
}

小编正在用的是第三种风格，推荐使用！