🎅挂件馆🌟铭牌馆✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读👛帮助💰️钱包💖关注切换到宽版
  • 首页Portal
  • 社区BBS
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 文章段落渐变背景样式（四款） ...
    返回列表 发布新帖
    查看: 265|回复: 0

    [代码技巧] 子比主题 – 文章段落渐变背景样式（四款）

    [复制链接]
    飞流
    连续签到LV.1
    起源之星
    任务·年会员
    累计签到LV.3
    +2
    00001 FLLTCN
    社区贡献
    344 214 23798
    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 196 颗
       贡献 : 13641 点
       金币 : 4 枚
    Icon在线时间 : 1924 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-7-22
    送礼物：3 个 收礼物：1 个
    00001 FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-10 17:47:23 | 查看全部 |阅读模式 浙江金华

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

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

    ×
    腾飞博客在逛论坛的时候发现一个四款渐变背景样式，于是腾飞博客就给他们单独分开，一开始腾飞用WordPress 区块开发的本地注册（即原生注册）自定义区块来写的wordpress插件，写了一半不想写了，就代码部署wordpress新样板吧，也挺方便的，而且插件多了还卡，话不多说直接开始！

    tengfei_down (6).webp
    我会一步步教怎么部署，也当留个笔记，后面用起来方便！

    代码部署


    腾飞博客更新了原始编辑器，就是禁用古腾堡的那种WP原始编辑器，看好是古腾堡编辑器还是原始编辑器
    古腾堡编辑器
    首先这个教程需要WP古腾堡，古腾堡才有的哦，没有的话就不用部署了！
    定位：WP后台–>>新建文章，我们先把代码直接新建区块这样就很方便了，新建文章如下图！
    tengfei_down - 2025-10-10T174229.084.webp
    代码我放到最后，喜欢的哪个自己放哪个，或者也可以都放，我们把样式放到了自定义HTML之后，我们点右边的三个点，如下图！
    tengfei_down (7).webp
    然后我们如上图有一个：创建新样板，然后我们点开他，然后我们创建比如这个名字是：蓝色渐变，就写这个名字，然后分类可以自己创建，如下图，就看懂了！
    tengfei_down (8).webp
    然后我们添加就添加成功了，然后我们去哪里找这个呢，如下图，我已经添加了四个！
    tengfei_down (9).webp
    然后搜到了之后我们喜欢哪个就点哪个，然后直接部署就行，如果添加自定义HTML，想看到样式，可以点一下预览就变成了可观的样式，当然你如果自己写了样式也可以用这个教程哦
    代码部署
    tengfei_down - 2025-10-10T174500.841.webp
    1. <p class="gradient-paragraph gradient-4">
    2. 这是一个绿色渐变背景示例。清新的颜色让人联想到自然和成长，适合用于环保、健康或积极主题的内容。
    3. </p>
    4. <style>
    5. .gradient-paragraph {
    6.     margin-bottom: 30px;
    7.     padding: 25px;
    8.     border-radius: 12px;
    9.     line-height: 1.8;
    10.     font-size: 1.6rem;
    11.     transition: all 0.3s ease;
    12.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    13. }
    14. .gradient-paragraph:hover {
    15.     transform: translateY(-5px);
    16.     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    17. }
    18. .gradient-4 {
    19.     background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    20.     color: #4a4a4a;
    21.     border-left: 5px solid #00b894;
    22. }
    23. </style>
    复制代码

    [url=]橙色渐变[/url]
    tengfei_down - 2025-10-10T174503.056.webp
    1. <p class="gradient-paragraph gradient-3">
    2. 这是一个橙色渐变背景示例。温暖的颜色能够吸引读者的注意力，适合用于强调重要内容或警告信息。
    3. </p>
    4. <style>
    5. .gradient-paragraph {
    6.     margin-bottom: 30px;
    7.     padding: 25px;
    8.     border-radius: 12px;
    9.     line-height: 1.8;
    10.     font-size: 1.6rem;
    11.     transition: all 0.3s ease;
    12.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    13. }
    14. .gradient-paragraph:hover {
    15.     transform: translateY(-5px);
    16.     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    17. }
    18. .gradient-3 {
    19.     background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    20.     color: #4a4a4a;
    21.     border-left: 5px solid #e17055;
    22. }
    23. </style>
    复制代码
    蓝到粉渐变
    tengfei_down - 2025-10-10T174504.938.webp
    1. <p class="gradient-paragraph gradient-1">
    2. 这是一个蓝色到粉色的渐变背景示例。柔和的色彩过渡创造出平静而优雅的效果，非常适合用于引言或重要提示内容。
    3. </p>
    4. <style>
    5. .gradient-paragraph {
    6.     margin-bottom: 30px;
    7.     padding: 25px;
    8.     border-radius: 12px;
    9.     line-height: 1.8;
    10.     font-size: 1.6rem;
    11.     transition: all 0.3s ease;
    12.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    13. }
    14. .gradient-paragraph:hover {
    15.     transform: translateY(-5px);
    16.     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    17. }
    18. .gradient-1 {
    19.     background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    20.     color: #4a4a4a;
    21.     border-left: 5px solid #6c5ce7;
    22. }
    23. </style>
    复制代码
    灰色渐变
    tengfei_down - 2025-10-10T174506.956.webp
    1. <p class="gradient-paragraph gradient-2">
    2. 这是一个灰色渐变背景示例。中性色调适合各种内容类型，不会分散读者对文本的注意力，同时提供视觉上的区分。
    3. </p>
    4. <style>
    5. .gradient-paragraph {
    6.     margin-bottom: 30px;
    7.     padding: 25px;
    8.     border-radius: 12px;
    9.     line-height: 1.8;
    10.     font-size: 1.6rem;
    11.     transition: all 0.3s ease;
    12.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    13. }
    14. .gradient-paragraph:hover {
    15.     transform: translateY(-5px);
    16.     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    17. }
    18. .gradient-2 {
    19.     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    20.     color: #4a4a4a;
    21.     border-left: 5px solid #4a69bd;
    22. }
    23. </style>
    复制代码


    原始编辑器
    我们将下面的代码放到func文件里面，如果没有这个文件记住自己创建一个，记得加上php头，要不然会报错
    1. /*文本编辑自定义快捷渐变按钮*/
    2. add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
    3. function bolo_after_wp_tiny_mce($mce_settings) {
    4. ?>
    5. <script type="text/javascript">
    6. QTags.addButton( 'tengfei_hs', '灰色渐变', '<div id="tengfei-hs">填入内容</div>', "" );
    7. QTags.addButton( 'tengfei_cs', '橙色渐变', '<div id="tengfei-cs">填入内容</div>', "" );
    8. QTags.addButton( 'tengfei_ls', '蓝色到粉色', '<div id="tengfei-fs">填入内容</div>', "" );
    9. QTags.addButton( 'tengfei_lvs', '绿色渐变', '<div id="tengfei-ls">填入内容</div>', "" );
    10. function bolo_QTnextpage_arg1() {
    11. }
    12. </script>
    13. <?php
    14. }
    复制代码
    然后将下面的代码放到：子比主题–>>自定义CSS样式即可！
    1. /* 渐变段落样式 */
    2.     #tengfei-hs {
    3.     margin-bottom: 30px;
    4.     padding: 25px;
    5.     border-radius: 12px;
    6.     line-height: 1.8;
    7.     font-size: 1.6rem;
    8.     transition: all 0.3s ease;
    9.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    10.     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    11.     color: #4a4a4a;
    12.     border-left: 5px solid #4a69bd;
    13. }
    14.     #tengfei-cs{
    15.     margin-bottom: 30px;
    16.     padding: 25px;
    17.     border-radius: 12px;
    18.     line-height: 1.8;
    19.     font-size: 1.6rem;
    20.     transition: all 0.3s ease;
    21.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    22.     background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    23.     color: #4a4a4a;
    24.     border-left: 5px solid #e17055;
    25. }
    26.     #tengfei-fs{
    27.     margin-bottom: 30px;
    28.     padding: 25px;
    29.     border-radius: 12px;
    30.     line-height: 1.8;
    31.     font-size: 1.6rem;
    32.     transition: all 0.3s ease;
    33.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    34.     background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    35.     color: #4a4a4a;
    36.     border-left: 5px solid #e17055;
    37. }
    38. #tengfei-fs{
    39. margin-bottom: 30px;
    40. padding: 25px;
    41. border-radius: 12px;
    42. line-height: 1.8;
    43. font-size: 1.6rem;
    44. transition: all 0.3s ease;
    45. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    46. background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    47. color: #4a4a4a;
    48. border-left: 5px solid #6c5ce7;
    49. }
    50. #tengfei-ls{
    51. margin-bottom: 30px;
    52. padding: 25px;
    53. border-radius: 12px;
    54. line-height: 1.8;
    55. font-size: 1.6rem;
    56. transition: all 0.3s ease;
    57. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    58. background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    59. color: #4a4a4a;
    60. border-left: 5px solid #00b894;
    61. }
    复制代码
    接下来就是我们到编辑器点右边的代码就可以看到，如下图！
    tengfei_down (10).webp

    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复 送礼

    使用道具 举报

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

    本版积分规则

    飞流广播+ 发布

    飞流：这论坛到底有没有资本给我投资一下啊！
    		07-20 22:07
    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

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

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

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

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

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

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

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

    常用功能

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

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-7-22 22:39 , Processed in 0.085597 second(s), 68 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表