 

当前位置：大神建站  建站教程  正文

快来看！WordPress 里 H 标题的五种常用样式效果！已测！

2025-03-02 分类：建站教程评论(0)

DeepSeek探索全新的WordPress-AI插件（支持定制功能）点击立即了解

内容导航

效果：扫尾到顶

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5 {
    font-weight: bold;
    margin: 12px auto;
    line-height: 1;
    padding: 8px 12px;
    text-align: center;
    width: 100%; /* 让标题元素宽度充满父容器 */
    box-sizing: border-box; /* 让内边距包含在宽度内 */
    /* 根据不同标题级别设置不同颜色的渐变背景 */
}

/* 设置不同标题级别的字号，使其层次分明 */
.article-content h1 {
    font-size: 28px;
    background: linear-gradient(to right, 
        rgba(255, 0, 0, 0) 0%, 
        rgba(255, 0, 0, 0.3) 20%, 
        rgba(255, 0, 0, 0.3) 80%, 
        rgba(255, 0, 0, 0) 100%
    );
}

.article-content h2 {
    font-size: 24px;
    background: linear-gradient(to right, 
        rgba(255, 20, 147, 0) 0%, 
        rgba(255, 20, 147, 0.3) 20%, 
        rgba(255, 20, 147, 0.3) 80%, 
        rgba(255, 20, 147, 0) 100%
    );
}

.article-content h3 {
    font-size: 20px;
    background: linear-gradient(to right, 
        rgba(65, 105, 225, 0) 0%, 
        rgba(65, 105, 225, 0.3) 20%, 
        rgba(65, 105, 225, 0.3) 80%, 
        rgba(65, 105, 225, 0) 100%
    );
}

.article-content h4 {
    font-size: 16px;
    background: linear-gradient(to right, 
        rgba(60, 179, 113, 0) 0%, 
        rgba(60, 179, 113, 0.3) 20%, 
        rgba(60, 179, 113, 0.3) 80%, 
        rgba(60, 179, 113, 0) 100%
    );
}

.article-content h5 {
    font-size: 14px;
    background: linear-gradient(to right, 
        rgba(255, 192, 203, 0) 0%, 
        rgba(255, 192, 203, 0.3) 20%, 
        rgba(255, 192, 203, 0.3) 80%, 
        rgba(255, 192, 203, 0) 100%
    );
}

效果：扫尾居中

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5 {
    font-weight: bold;
    margin: 12px auto;
    line-height: 1;
    padding: 8px 12px;
    text-align: center;
    width: fit-content;
    min-width: 300px;
    /* 根据不同标题级别设置不同颜色的渐变背景 */
}

/* 设置不同标题级别的字号，使其层次分明 */
.article-content h1 {
    font-size: 28px;
    background: linear-gradient(to right, 
        rgba(255, 0, 0, 0) 0%, 
        rgba(255, 0, 0, 0.3) 50%, 
        rgba(255, 0, 0, 0) 100%
    );
}

.article-content h2 {
    font-size: 24px;
    background: linear-gradient(to right, 
        rgba(255, 20, 147, 0) 0%, 
        rgba(255, 20, 147, 0.3) 50%, 
        rgba(255, 20, 147, 0) 100%
    );
}

.article-content h3 {
    font-size: 20px;
    background: linear-gradient(to right, 
        rgba(65, 105, 225, 0) 0%, 
        rgba(65, 105, 225, 0.3) 50%, 
        rgba(65, 105, 225, 0) 100%
    );
}

.article-content h4 {
    font-size: 16px;
    background: linear-gradient(to right, 
        rgba(60, 179, 113, 0) 0%, 
        rgba(60, 179, 113, 0.3) 50%, 
        rgba(60, 179, 113, 0) 100%
    );
}

.article-content h5 {
    font-size: 14px;
    background: linear-gradient(to right, 
        rgba(255, 192, 203, 0) 0%, 
        rgba(255, 192, 203, 0.3) 50%, 
        rgba(255, 192, 203, 0) 100%
    );
}

效果：左边边框

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5 {
    font-weight: bold;
    margin: 12px 0;
    border-left: 5px solid;
    /* 让行高和字体大小一致 */
    line-height: 1; 
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 0; /* 取消圆角效果 */
}

/* 设置不同标题级别的字号，使其层次分明 */
.article-content h1 {
    font-size: 28px;
    border-color: red; /* 纯色边框 */
}

.article-content h2 {
    font-size: 24px;
    border-color: #FF1493; /* 纯色边框 */
}

.article-content h3 {
    font-size: 20px;
    border-color: #4169E1; /* 纯色边框 */
}

.article-content h4 {
    font-size: 16px;
    border-color: #3CB371; /* 纯色边框 */
}

.article-content h5 {
    font-size: 14px;
    border-color: #FFC0CB; /* 纯色边框 */
}

/* 移除之前添加的下划线伪元素样式 */
.article-content h1::after,
.article-content h2::after,
.article-content h3::after,
.article-content h4::after,
.article-content h5::after {
    display: none;
}

效果：如本站

/* 设置文章内容中标题的通用样式 */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5 {
    /* 强制设置字体为粗体 */
    font-weight: bold!important;
    /* 设置上下外边距为 8px，左右外边距为 0 */
    margin: 8px 0!important;
    /* 设置上下内边距为 3px，左右内边距为 10px */
    padding: 3px 10px!important;
    /* 设置字体为 Arial 或无衬线字体 */
    font-family: Arial, sans-serif!important;
    /* 添加轻微的阴影效果，增加立体感 */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1)!important;
    /* 强制设置圆角 */
    border-radius: 5px 0 0 5px!important;
}

/* 设置 h1 标题的样式 */
.article-content h1 {
    /* 设置字体大小为 24px */
    font-size: 24px!important;
    /* 去除底部边框 */
    border-bottom: none!important;
    /* 设置左边框为 5px 宽的渐变边框 */
    border-left: 5px solid!important;
    /* 定义左边框的渐变效果，从红色过渡到透明 */
    border-image: linear-gradient(to bottom, #FF0000, rgba(255, 0, 0, 0)) 1 100%!important;
    /* 设置背景颜色为红色的浅色调，增加层次感 */
    background-color: rgba(255, 0, 0, 0.05)!important;
}

/* 设置 h2 标题的样式 */
.article-content h2 {
    /* 设置字体大小为 20px */
    font-size: 20px!important;
    border-bottom: none!important;
    border-left: 5px solid!important;
    /* 定义左边框的渐变效果，从深粉色过渡到透明 */
    border-image: linear-gradient(to bottom, #FF1493, rgba(255, 20, 147, 0)) 1 100%!important;
    background-color: rgba(255, 20, 147, 0.05)!important;
}

/* 设置 h3 标题的样式 */
.article-content h3 {
    /* 设置字体大小为 18px */
    font-size: 18px!important;
    border-bottom: none!important;
    border-left: 5px solid!important;
    /* 定义左边框的渐变效果，从皇家蓝色过渡到透明 */
    border-image: linear-gradient(to bottom, #4169E1, rgba(65, 105, 225, 0)) 1 100%!important;
    background-color: rgba(65, 105, 225, 0.05)!important;
}

/* 设置 h4 标题的样式 */
.article-content h4 {
    /* 设置字体大小为 16px */
    font-size: 16px!important;
    border-bottom: none!important;
    border-left: 5px solid!important;
    /* 定义左边框的渐变效果，从草绿色过渡到透明 */
    border-image: linear-gradient(to bottom, #3CB371, rgba(60, 179, 113, 0)) 1 100%!important;
    background-color: rgba(60, 179, 113, 0.05)!important;
}

/* 设置 h5 标题的样式 */
.article-content h5 {
    /* 设置字体大小为 14px */
    font-size: 14px!important;
    border-bottom: none!important;
    border-left: 5px solid!important;
    /* 定义左边框的渐变效果，从浅粉色过渡到透明 */
    border-image: linear-gradient(to bottom, #FFC0CB, rgba(255, 192, 203, 0)) 1 100%!important;
    background-color: rgba(255, 192, 203, 0.05)!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 {
    font-size: 20px!important;
    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 {
    font-size: 18px!important;
    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;
}

内容仅供参考：大神建站 » 快来看！WordPress 里 H 标题的五种常用样式效果！已测！

分享到

css怎么设置标题颜色 css标题字体设置 css标题栏

相关推荐

回顶部