✨️靓标库🧚‍♂️名人堂⚔️攻守道🎲骰子🥊猜拳🏧黑市🏧银行💹抽奖💝捐助
✨活动💥客户端🎫卡密📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注
  • 首页
  • 社区
  • 资源
  • 拍卖
  • 排行Ranklist
  • 家园Space
  • 圈子
  • 任务
  • 商城
  • 文库
  • 需求
    • 立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题-文章标题H1-H6标签样式美化（共十个样式风格） ...
    返回列表 发布新帖
    查看: 163|回复: 0

    [代码技巧] 子比主题-文章标题H1-H6标签样式美化（共十个样式风格）

    [复制链接]
    社区贡献

    6

    主题

    2

    回帖

    706

    积分

    等级头衔
    Icon组别 : 菜鸟
    Icon等级 :

    积分成就
       钻石 : -8 颗
       贡献 : 470 点
       金币 : 8 枚
    Icon在线时间 : 100 小时
    Icon注册时间 : 2025-7-12
    Icon最后登录 : 2025-10-28

    荣誉勋章

    炎龙LV.9

    风云·优秀版主
    飞粉_hVoqn9Sp名人堂成员
    UID:11003
    暂无靓号,点击前往开通
    实名认证 手机认证 发表于 2025-9-7 22:18:42 来自手机端 | 查看全部 |阅读模式 北京

    资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    很久没逛子比主题了，今天无意间看到一个很不错的标题风格样式，优雅又点明重点，提高了阅读体验，后再深挖原来是腾飞老哥的原创。
    在此声明该代码来自腾飞博客，也是个美化老玩家了，向他致敬
    喜欢哪个样式自己将该哪一款丢到：子比主题–>>自定义CSS样式即可。
    第一款风格
    第一款就是腾飞自己做的浮动圆点样式，不过也是借鉴别人的站，还是不错的，这款写了H1-H3标题样式，样式自己看图片吧！
    1000223091.webp
    1. /* 腾飞博客第二款标题样式美化 */
    2. .article-content > .wp-posts-content > h2,
    3. .article-content .wp-posts-content > h1,
    4. .article-content .wp-posts-content > h3 {
    5.     z-index: 1;
    6. }

    8. .article-content > .wp-posts-content > h2:hover::before,
    9. .article-content > .wp-posts-content > h2:hover::after,
    10. .article-content > .wp-posts-content > h1:hover::before,
    11. .article-content > .wp-posts-content > h1:hover::after,
    12. .article-content > .wp-posts-content > h3:hover::before,
    13. .article-content > .wp-posts-content > h3:hover::after {
    14.     transform: scale(1.2) !important;
    15.     transform-origin: center !important;
    16.     transition: 0.4s;
    17. }

    19. .article-content .wp-posts-content h2::before,
    20. .article-content .wp-posts-content h1::before,
    21. .article-content .wp-posts-content h3::before {
    22.     box-shadow: none !important;
    23.     opacity: 0.6 !important;
    24.     border-radius: 50% !important;
    25.     top: -5px !important;
    26.     left: -10px !important;
    27.     z-index: 1;
    28. }

    30. .article-content .wp-posts-content h1::before,
    31. .article-content .wp-posts-content h1::after {
    32.     background: linear-gradient(#409eff, transparent) !important;
    33. }

    35. .article-content .wp-posts-content h2::before,
    36. .article-content .wp-posts-content h2::after {
    37.     background: linear-gradient(#00ff62, transparent) !important;
    38. }

    40. .article-content .wp-posts-content h3::before,
    41. .article-content .wp-posts-content h3::after {
    42.     background: linear-gradient(#ff9800, transparent) !important;
    43. }

    45. .article-content .wp-posts-content h1::before {
    46.     height: 35px !important;
    47.     width: 35px !important;
    48. }

    50. .article-content .wp-posts-content h2::before {
    51.     height: 30px !important;
    52.     width: 30px !important;
    53. }

    55. .article-content .wp-posts-content h3::before {
    56.     height: 25px !important;
    57.     width: 25px !important;
    58. }

    60. .article-content .wp-posts-content h2::after,
    61. .article-content .wp-posts-content h1::after,
    62. .article-content .wp-posts-content h3::after {
    63.     content: "";
    64.     opacity: 0.6;
    65.     position: absolute;
    66.     transition: 0.4s;
    67.     border-radius: 50%;
    68. }

    70. .article-content .wp-posts-content h2::after {
    71.     top: -15px;
    72.     left: 15px;
    73.     width: 10px;
    74.     height: 10px;
    75. }

    77. .article-content .wp-posts-content h1::after {
    78.     top: -13px;
    79.     left: 25px;
    80.     width: 13px;
    81.     height: 13px;
    82. }

    84. .article-content .wp-posts-content h3::after {
    85.     top: -17px;
    86.     left: 12px;
    87.     width: 8px;
    88.     height: 8px;
    89. }
    复制代码

    第二款风格
    [h1]第二款[/h1]
    1000222812.webp
    这款猫爪风格好像是初一的原创，H1-H4都是一样的，不过这个扩展性很高，比如遇到自己喜欢的，自己可以替换里面的图片就可以了。
    1. /* 第一款标题样式美化 */
    2. .title-theme {
    3.     padding: 0px 0px 0px 45px!important;
    4.     background: url(https://www.tfbkw.com/wp-content/uploads/2025/03/20250306195527974-biaoti.svg) 10px center no-repeat;
    5.     background-size: 30px 20px;
    6.     color: #566889;
    7. }
    8. .title-theme:before {
    9. display:none;
    10. }
    11. .wp-posts-content>h1.wp-block-heading{
    12.     padding: 0px 0px 0px 45px!important;
    13.     background: url(https://www.tfbkw.com/wp-content/uploads/2025/03/20250306195527974-biaoti.svg) 10px center no-repeat;
    14.     background-size: 30px 20px;
    15. }
    16. .wp-posts-content>h2.wp-block-heading{
    17.     padding: 0px 0px 0px 45px!important;
    18.     background: url(https://www.tfbkw.com/wp-content/uploads/2025/03/20250306195527974-biaoti.svg) 10px center no-repeat;
    19.     background-size: 30px 20px;
    20. }
    21. .wp-posts-content>h3.wp-block-heading{
    22.     padding: 0px 0px 0px 45px!important;
    23.     background: url(https://www.tfbkw.com/wp-content/uploads/2025/03/20250306195527974-biaoti.svg) 10px center no-repeat;
    24.     background-size: 30px 20px;
    25. }
    26. .wp-posts-content>h4.wp-block-heading{
    27.     padding: 0px 0px 0px 45px!important;
    28.     background: url(https://www.qqij.cn/wp-content/uploads/2024/04/17142097132024042709215353.svg) 10px center no-repeat;
    29.     background-size: 30px 20px;
    30. }
    31. .wp-posts-content>h1.wp-block-heading:before{
    32.     display:none;
    33. }
    34. .wp-posts-content>h2.wp-block-heading:before{
    35.     display:none;
    36. }
    37. .wp-posts-content>h3.wp-block-heading:before{
    38.     display:none;
    39. }
    40. .wp-posts-content>h4.wp-block-heading:before{
    41.     display:none;
    42. }
    复制代码


    第三款
    tengfei_down.webp
    第三款标题样式腾飞是借鉴的一个游戏站的标题样式，通过图片截取来做的H1-H2的样式，还是不错的，目前用的站还是挺多的！

    1. /* 腾飞博客第三款标题样式美化 */
    2. .wp-posts-content>h1.wp-block-heading{
    3.     position: relative;
    4.     padding: 10px 12px;
    5.     display: block;
    6.     font-size: 20px;
    7.     color: #6297FF;
    8.     font-weight: bold;
    9.     line-height: 26px;
    10.     margin-bottom: 20px;
    11.     background: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01Ga7VH11QbIjzNumln_!!2210123621994.png) no-repeat;
    12.         background-size: 1000px 1000px;
    13.     background-position: -5px -902px;
    14.    
    15. }
    16. .wp-posts-content>h2.wp-block-heading{
    17.     padding: 0px 0px 0px 19px !important;
    18.     position: relative;
    19.     padding: 10px 12px;
    20.     display: block;
    21.     font-size: 20px;
    22.     color: #6297FF;
    23.     font-weight: bold;
    24.     line-height: 32px;
    25.     margin-bottom: 20px;
    26.     background: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01Ga7VH11QbIjzNumln_!!2210123621994.png) no-repeat;
    27.     background-size: 1000px 999px;
    28.     background-position: -3px -837px;
    29. }
    30. .wp-posts-content>h3.wp-block-heading{
    31.     padding: 0px 0px 0px 45px!important;
    32.     background: url(https://tfbk.jzpix.cn/wp-content/themes/ZibTF/pic/h3.svg) 10px center no-repeat;
    33.     background-size: 30px 20px;
    34. }
    35. .wp-posts-content>h1.wp-block-heading:before{
    36.     display:none;
    37. }
    38. .wp-posts-content>h2.wp-block-heading:before{
    39.     display:none;
    40. }
    41. .wp-posts-content>h3.wp-block-heading:before{
    42.     display:none;
    43. }
    复制代码


    第四款
    第四款的话我建议部署一下，因为这个是单独美化了H5-H6，适合做笔记站，而且H6还有动态的效果，还是不错的一款标题样式！
    tengfei_down.gif
    1. /* 腾飞博客第四款标题样式美化 */
    2. .article-content h5 {
    3.     padding: 5px 25px;
    4.     margin: 12px 0px;
    5.     position: relative;
    6.     font-size: 18px;
    7.     letter-spacing: 2px;
    8.     color: #f73434;
    9. }
    10. .article-content h5::before {
    11.     content: '';
    12.     position: absolute;
    13.     top: 4px;
    14.     left: 0;
    15.     width: 20px;
    16.     height: 20px;
    17.     background-image: url(https://www.tfbkw.com/wp-content/themes/ZibTF/img/hh5.svg);
    18.     background-size: 100% 100%;
    19. }
    20. .article-content h6:before {
    21.     border-bottom: 2px solid #4dd0e1;
    22.     width: 100%;
    23.     content: "";
    24.     display: block;
    25.     height: 27px;
    26.     position: absolute;
    27.     left: 0;
    28.     top: 0;
    29.     bottom: -2px;
    30.     margin: auto;
    31.     background-size: 28px 28px;
    32.     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII=);
    33.     background-repeat: no-repeat;
    34.     animation: h6AnimationBefore 2s infinite alternate
    35. }
    36. .article-content h6 {
    37.     margin: 25px 0;
    38.     font-size: 16px;
    39.     position: relative;
    40.     padding: 4px 25px;
    41.     width: max-content;
    42.     color: #4dd0e1
    43. }
    44. .article-content h6:after {
    45.     content: "";
    46.     display: block;
    47.     width: 28px;
    48.     height: 28px;
    49.     position: absolute;
    50.     border: 2px solid #4dd0e1;
    51.     border-radius: 50%;
    52.     right: -15px;
    53.     top: 0;
    54.     bottom: 0;
    55.     margin: auto;
    56.     background-size: 28px 28px;
    57.     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII=);
    58.     animation: h6AnimationAfter 2s infinite alternate
    59. }
    60. h6 {
    61.     display: block;
    62.     font-size: 1.17em;
    63.     margin-block-start:1em;
    64.     margin-block-end:1em;
    65.     margin-inline-start:0px;
    66.     margin-inline-end:0px;
    67.     font-weight: bold
    68. }
    69. @keyframes h6AnimationBefore {
    70.     0% {
    71.         width: 28px
    72.     }
    73.     25% {
    74.         width: 100%
    75.     }
    76.     50% {
    77.         width: 100%
    78.     }
    79.     to {
    80.         width: 100%
    81.     }
    82. }
    83. @keyframes h6AnimationAfter {
    84.     0% {
    85.         transform: rotate(0)
    86.     }
    87.     10% {
    88.         transform: rotate(0)
    89.     }
    90.     50% {
    91.         transform: rotate(-1turn)
    92.     }
    93.     to {
    94.         transform: rotate(-1turn)
    95.     }
    96. }
    复制代码

    第五款
    这个第五款腾飞是借鉴了vue3的样式来写的，只写了H1-H3，这款很简约，也是不错的样式，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这就不多说！

    第五款

    第五款
    1. /* 腾飞博客第五款标题样式美化 */
    2. .article-content h1::before,
    3. .article-content h2::before,
    4. .article-content h3::before {
    5.     content: none !important;
    6.     display: none !important;
    7. }

    9. .article-content h1 {
    10.     margin: 20px 0;
    11.     padding: 8px 15px;
    12.     font-weight: bold;
    13.     font-size: 24px;
    14.     color: #222;
    15.     border-left: 4px solid #2196f3;
    16.     background: #e3f2fd;
    17.     border-radius: 4px;
    18.     width: fit-content;
    19. }

    21. .article-content h2 {
    22.     margin: 20px 0;
    23.     padding: 8px 15px;
    24.     font-weight: bold;
    25.     font-size: 22px;
    26.     color: #222;
    27.     border-left: 4px solid #f44336;
    28.     background: #fdecea;
    29.     border-radius: 4px;
    30.     width: fit-content;
    31. }

    33. .article-content h3 {
    34.     margin: 20px 0;
    35.     padding: 8px 15px;
    36.     font-weight: bold;
    37.     font-size: 20px;
    38.     color: #222;
    39.     border-left: 4px solid #4caf50;
    40.     background: #e8f5e9;
    41.     border-radius: 4px;
    42.     width: fit-content;
    43. }
    复制代码

    第六款
    第六款是借鉴一个做笔记博客的网站，只写了H1-H3的，我觉得还是一个不错的样式，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这就不多说！

    第六款

    第六款
    1. /* 腾飞博客第六款标题样式美化 */
    2. .article-content h1::before,
    3. .article-content h2::before,
    4. .article-content h3::before {
    5.     content: none !important;
    6.     display: none !important;
    7. }
    8. .article-content h1,
    9. .article-content h2,
    10. .article-content h3 {
    11.     margin: 20px 0;
    12.     padding: 6px 12px;
    13.     font-weight: bold;
    14.     position: relative;
    15.     display: block;   
    16. }

    18. .article-content h1 {
    19.     font-size: 24px;
    20.     color: #2e7d32;
    21.     background: linear-gradient(to right, #c8e6c9 40%, transparent 100%);
    22. }
    23. .article-content h1::after {
    24.     content: "";
    25.     display: block;
    26.     height: 2px;
    27.     background: linear-gradient(to right, #4caf50, transparent);
    28.     margin-top: 4px;
    29. }
    30. .article-content h2 {
    31.     font-size: 22px;
    32.     color: #1565c0;
    33.     background: linear-gradient(to right, #bbdefb 40%, transparent 100%);
    34. }
    35. .article-content h2::after {
    36.     content: "";
    37.     display: block;
    38.     height: 2px;
    39.     background: linear-gradient(to right, #2196f3, transparent);
    40.     margin-top: 4px;
    41. }
    42. .article-content h3 {
    43.     font-size: 20px;
    44.     color: #c62828;
    45.     background: linear-gradient(to right, #ffcdd2 40%, transparent 100%);
    46. }
    47. .article-content h3::after {
    48.     content: "";
    49.     display: block;
    50.     height: 2px;
    51.     background: linear-gradient(to right, #f44336, transparent);
    52.     margin-top: 4px;
    53. }
    复制代码

    第七款
    这一款是腾飞博客自己随便写的一款，还是不错的，很简约，写了H1-H3标题，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这就不多说！

    第七款

    第七款

    1. /* 腾飞博客第七款标题样式美化 */
    2. .article-content h1::before,
    3. .article-content h2::before,
    4. .article-content h3::before {
    5.     content: none !important;
    6.     display: none !important;
    7. }
    8. .article-content h1,
    9. .article-content h2,
    10. .article-content h3 {
    11.     margin: 20px 0;
    12.     padding: 6px 12px;
    13.     font-weight: bold;
    14.     font-size: 20px;
    15.     position: relative;
    16.     display: block;
    17.     border: 2px solid transparent;
    18.     border-left-width: 3px;
    19.     border-radius: 3px 0 0 3px;
    20. }

    22. .article-content h1 {
    23.     border-image: linear-gradient(to right, #f44336, transparent) 1;
    24. }

    26. .article-content h2 {
    27.     border-image: linear-gradient(to right, #00bcd4, transparent) 1;
    28. }

    30. .article-content h3 {
    31.     border-image: linear-gradient(to right, #4caf50, transparent) 1;
    32. }
    复制代码

    第八款
    这一款也是借鉴一个博客网站的样式来写，这款是写H1-H5的样式，我觉得非常简约，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这款写了两个样式，自己看一下吧！
    第一款样式（不带背景）

    第一款样式（不带背景）

    第一款样式（不带背景）
    1. /* 腾飞博客第八款第二样式标题样式美化 */
    2. .article-content h1::before,
    3. .article-content h2::before,
    4. .article-content h3::before,
    5. .article-content h4::before,
    6. .article-content h5::before {
    7.     content: none !important;
    8.     display: none !important;
    9. }

    11. .article-content h1 {
    12.   padding: 5px 20px;
    13.   border-left: 10px solid #ed5151;
    14.   background-color: rgba(237, 81, 81, 0.05);
    15.   font-size: 19px;
    16.   line-height: 36px;
    17.   color: #333;
    18.   font-weight: bold;
    19.   margin: 15px 0 10px;
    20.   display: block;
    21.   border-radius: 0 4px 4px 0;
    22.   transition: all 0.3s ease;
    23. }

    25. .article-content h1:hover {
    26.   background-color: rgba(237, 81, 81, 0.08);
    27. }

    29. .article-content h2 {
    30.   padding: 5px 20px;
    31.   border-left: 10px solid #BF51ED;
    32.   background-color: rgba(191, 81, 237, 0.05);
    33.   font-size: 18px;
    34.   line-height: 34px;
    35.   color: #333;
    36.   font-weight: bold;
    37.   margin: 12px 0 8px;
    38.   display: block;
    39.   border-radius: 0 4px 4px 0;
    40.   transition: all 0.3s ease;
    41. }

    43. .article-content h2:hover {
    44.   background-color: rgba(191, 81, 237, 0.08);
    45. }

    47. .article-content h3 {
    48.   padding: 5px 20px;
    49.   border-left: 10px solid #6495ed;
    50.   background-color: rgba(100, 149, 237, 0.05);
    51.   font-size: 17px;
    52.   line-height: 32px;
    53.   color: #333;
    54.   font-weight: bold;
    55.   margin: 10px 0 6px;
    56.   display: block;
    57.   border-radius: 0 4px 4px 0;
    58.   transition: all 0.3s ease;
    59. }

    61. .article-content h3:hover {
    62.   background-color: rgba(100, 149, 237, 0.08);
    63. }

    65. .article-content h4 {
    66.   padding: 3px 20px;
    67.   border-left: 10px solid #e2aa2b;
    68.   background-color: rgba(226, 170, 43, 0.05);
    69.   font-size: 16px;
    70.   line-height: 30px;
    71.   color: #333;
    72.   font-weight: bold;
    73.   margin: 8px 0 5px;
    74.   display: block;
    75.   border-radius: 0 4px 4px 0;
    76.   transition: all 0.3s ease;
    77. }

    79. .article-content h4:hover {
    80.   background-color: rgba(226, 170, 43, 0.08);
    81. }

    83. .article-content h5 {
    84.   padding: 3px 20px;
    85.   border-left: 10px solid #64c1c1;
    86.   background-color: rgba(100, 193, 193, 0.05);
    87.   font-size: 15px;
    88.   line-height: 28px;
    89.   color: #333;
    90.   font-weight: bold;
    91.   margin: 6px 0 4px;
    92.   display: block;
    93.   border-radius: 0 4px 4px 0;
    94.   transition: all 0.3s ease;
    95. }

    97. .article-content h5:hover {
    98.   background-color: rgba(100, 193, 193, 0.08);
    99. }
    复制代码
    第二款样式（带背景）

    第二款样式（带背景）

    第二款样式（带背景）
    1. /* 腾飞博客第八款第二样式标题样式美化 */
    2. .article-content h1::before,
    3. .article-content h2::before,
    4. .article-content h3::before,
    5. .article-content h4::before,
    6. .article-content h5::before {
    7.     content: none !important;
    8.     display: none !important;
    9. }

    11. .article-content h1 {
    12.   padding: 5px 20px;
    13.   border-left: 10px solid #ed5151;
    14.   background-color: rgba(237, 81, 81, 0.05);
    15.   font-size: 19px;
    16.   line-height: 36px;
    17.   color: #333;
    18.   font-weight: bold;
    19.   margin: 15px 0 10px;
    20.   display: block;
    21.   border-radius: 0 4px 4px 0;
    22.   transition: all 0.3s ease;
    23. }

    25. .article-content h1:hover {
    26.   background-color: rgba(237, 81, 81, 0.08);
    27. }

    29. .article-content h2 {
    30.   padding: 5px 20px;
    31.   border-left: 10px solid #BF51ED;
    32.   background-color: rgba(191, 81, 237, 0.05);
    33.   font-size: 18px;
    34.   line-height: 34px;
    35.   color: #333;
    36.   font-weight: bold;
    37.   margin: 12px 0 8px;
    38.   display: block;
    39.   border-radius: 0 4px 4px 0;
    40.   transition: all 0.3s ease;
    41. }

    43. .article-content h2:hover {
    44.   background-color: rgba(191, 81, 237, 0.08);
    45. }

    47. .article-content h3 {
    48.   padding: 5px 20px;
    49.   border-left: 10px solid #6495ed;
    50.   background-color: rgba(100, 149, 237, 0.05);
    51.   font-size: 17px;
    52.   line-height: 32px;
    53.   color: #333;
    54.   font-weight: bold;
    55.   margin: 10px 0 6px;
    56.   display: block;
    57.   border-radius: 0 4px 4px 0;
    58.   transition: all 0.3s ease;
    59. }

    61. .article-content h3:hover {
    62.   background-color: rgba(100, 149, 237, 0.08);
    63. }

    65. .article-content h4 {
    66.   padding: 3px 20px;
    67.   border-left: 10px solid #e2aa2b;
    68.   background-color: rgba(226, 170, 43, 0.05);
    69.   font-size: 16px;
    70.   line-height: 30px;
    71.   color: #333;
    72.   font-weight: bold;
    73.   margin: 8px 0 5px;
    74.   display: block;
    75.   border-radius: 0 4px 4px 0;
    76.   transition: all 0.3s ease;
    77. }

    79. .article-content h4:hover {
    80.   background-color: rgba(226, 170, 43, 0.08);
    81. }

    83. .article-content h5 {
    84.   padding: 3px 20px;
    85.   border-left: 10px solid #64c1c1;
    86.   background-color: rgba(100, 193, 193, 0.05);
    87.   font-size: 15px;
    88.   line-height: 28px;
    89.   color: #333;
    90.   font-weight: bold;
    91.   margin: 6px 0 4px;
    92.   display: block;
    93.   border-radius: 0 4px 4px 0;
    94.   transition: all 0.3s ease;
    95. }

    97. .article-content h5:hover {
    98.   background-color: rgba(100, 193, 193, 0.08);
    99. }
    复制代码

    第九款
    第十款纯背景没有多说的，喜欢什么颜色自己改颜色，写到了H1-H5标题样式

    第九款

    第九款
    1. /* 腾飞博客第十款标题样式美化 */
    2. .article-content h1::before,
    3. .article-content h2::before,
    4. .article-content h3::before,
    5. .article-content h4::before,
    6. .article-content h5::before {
    7.     content: none !important;
    8.     display: none !important;
    9. }

    11. .article-content h1 {
    12.   padding: 8px 20px;
    13.   border-left: none;
    14.   background-color: #ed5151;
    15.   font-size: 19px;
    16.   line-height: 30px;
    17.   color: white;
    18.   font-weight: bold;
    19.   margin: 15px 0;
    20.   display: block;
    21.   border-radius: 4px;
    22.   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    23.   width: fit-content;
    24. }

    26. .article-content h2 {
    27.   padding: 8px 20px;
    28.   border-left: none;
    29.   background-color: #BF51ED;
    30.   font-size: 18px;
    31.   line-height: 30px;
    32.   color: white;
    33.   font-weight: bold;
    34.   margin: 12px 0;
    35.   display: block;
    36.   border-radius: 4px;
    37.   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    38.   width: fit-content;
    39. }

    41. .article-content h3 {
    42.   padding: 8px 20px;
    43.   border-left: none;
    44.   background-color: #6495ed;
    45.   font-size: 17px;
    46.   line-height: 27px;
    47.   color: white;
    48.   font-weight: bold;
    49.   margin: 10px 0;
    50.   display: block;
    51.   border-radius: 4px;
    52.   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    53.   width: fit-content;
    54. }

    56. .article-content h4 {
    57.   padding: 8px 20px;
    58.   border-left: none;
    59.   background-color: #e2aa2b;
    60.   font-size: 16px;
    61.   line-height: 24px;
    62.   color: white;
    63.   font-weight: bold;
    64.   margin: 8px 0;
    65.   display: block;
    66.   border-radius: 4px;
    67.   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    68.   width: fit-content;
    69. }

    71. .article-content h5 {
    72.   padding: 8px 20px;
    73.   border-left: none;
    74.   background-color: #64c1c1;
    75.   font-size: 15px;
    76.   line-height: 21px;
    77.   color: white;
    78.   font-weight: bold;
    79.   margin: 6px 0;
    80.   display: block;
    81.   border-radius: 4px;
    82.   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    83.   width: fit-content;
    84. }
    复制代码

    第十款
    这个写了H1-H3，右边加了动态的效果，我觉得还是不错的，喜欢的自行部署！

    第十款

    第十款
    1. /* 腾飞博客第十一款标题样式美化 */
    2. .article-content h1::before,
    3. .article-content h2::before,
    4. .article-content h3::before {
    5.     content: none !important;
    6.     display: none !important;
    7. }
    8. .article-content h1,
    9. .article-content h2,
    10. .article-content h3 {
    11.     display: block;         
    12.     width: fit-content;      
    13.     margin: 20px 0;
    14.     padding: 12px 24px 12px 28px;
    15.     font-weight: 800;
    16.     font-size: 1.8em;
    17.     color: #fff;
    18.     border-radius: 12px;
    19.     position: relative;
    20.     text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    21.     overflow: hidden;
    22.     cursor: default;
    23.     transition: transform 0.3s, box-shadow 0.3s;
    24. }

    26. .article-content h1:hover,
    27. .article-content h2:hover,
    28. .article-content h3:hover {
    29.     transform: translateY(-2px);
    30.     box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    31. }

    33. .article-content h1 {
    34.     background: linear-gradient(90deg, #ff6b6b, #f44336);
    35. }
    36. .article-content h2 {
    37.     background: linear-gradient(90deg, #4dd0e1, #00bcd4);
    38. }
    39. .article-content h3 {
    40.     background: linear-gradient(90deg, #81c784, #4caf50);
    41. }

    43. .article-content h1::before,
    44. .article-content h2::before,
    45. .article-content h3::before {
    46.     content: '';
    47.     position: absolute;
    48.     top: 0;
    49.     left: 0;
    50.     width: 6px;
    51.     height: 100%;
    52.     border-radius: 12px 0 0 12px;
    53. }

    55. .article-content h1::before { background: #f44336; }
    56. .article-content h2::before { background: #00bcd4; }
    57. .article-content h3::before { background: #4caf50; }

    59. .article-content h1::after,
    60. .article-content h2::after,
    61. .article-content h3::after {
    62.     content: '✨';
    63.     position: absolute;
    64.     top: -5px;
    65.     right: -10px;
    66.     font-size: 1em;
    67.     animation: twinkle 2s infinite alternate;
    68.     opacity: 0.6;
    69. }

    71. @keyframes twinkle {
    72.     0% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    73.     50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
    74.     100% { opacity: 0.3; transform: scale(0.8) rotate(-15deg); }
    75. }
    复制代码


    本帖被以下淘专辑推荐:

    诚信连接交易，资源创造价值。
    回复

    使用道具 举报

    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		10-30 17:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		10-09 09:07
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-24 09:00
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-11 11:40
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-02 09:17
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-27 08:56
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-20 15:12
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-03 10:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		06-30 08:57
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		06-18 09:14
    系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-11 09:40
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-10 09:31
    系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 13:44
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 09:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 08:52
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-08 09:24
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-07 09:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		02-27 09:35
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-26 09:06
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-25 08:49
    站内通告

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：123129钉推群：BAYR2383 站长QQ：3220000000

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    投诉/建议/商务合作联系

    fl@fllt.cn

    严禁私下交易，被骗与本站无关。
    违反交易细则，取证立查严惩。
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    👮曝光Ta|🧿小黑屋|📴手机页|飞流网 ( 渝ICP备2025054677号-1|电信增值许可 渝B2-20250789 )|网站地图

    GMT+8, 2025-11-8 11:05 , Processed in 0.110353 second(s), 57 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表