标题渐变颜色 2

温和的色彩组合
浅蓝到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
淡紫到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(200, 170, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
浅绿到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(144, 238, 144, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
浅黄到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(255, 255, 224, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
清新的色彩组合
淡蓝到白色
Css
深色版本
background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, #ffffff 100%);
浅粉到白色
Css
深色版本
background: linear-gradient(to bottom, rgba(255, 192, 203, 0.5) 0%, #ffffff 100%);
浅灰到白色
Css
深色版本
background: linear-gradient(to bottom, rgba(220, 220, 220, 0.5) 0%, #ffffff 100%);
自然的色彩组合
薄荷绿到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(173, 255, 47, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
天蓝到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
暖色调的色彩组合
橙色到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(255, 165, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
桃红到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(255, 127, 80, 0.5) 0%, rgba(255, 255, 255, 0) 100%);

/* 设置标题背景透明 */
.protyle-title__input,
.item__readme h1,
.item__readme h2,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
    background-color: transparent;
}

/* 移除标题的box-shadow和左右边框 */
.protyle-wysiwyg .h1,
.protyle-wysiwyg .h2,
.protyle-wysiwyg .h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg .h6,
.item__readme h1,
.item__readme h2,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
    box-shadow: none;
    border-left: 0;
    border-right: 0;
}

/* 设置H1和H2的顶部边框 */
.protyle-wysiwyg .h1,
.protyle-wysiwyg .h2,
.item__readme h1,
.item__readme h2 {
    border-top: 9px solid var(--v-block-heading-top-shadow);
    margin: 1.3em 0 0.5em;
    counter-reset: h2;
}

/* 设置标题的颜色、对齐方式、内边距、行高、背景渐变、字体间距 */
.protyle-wysiwyg .h1,
.protyle-wysiwyg .h2,
.protyle-wysiwyg .h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg .h6,
.item__readme h1,
.item__readme h2,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
    color: var(--v-block-heading-color);
    text-align: left;
    padding: 10px;
    line-height: 1.5;
    border-radius: var(--v-block-heading-border-radius);
    letter-spacing: .15em;
    background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, rgba(255, 255, 255, 0) 100%); /* 从淡紫色到透明的渐变 */
    font-weight: bold; /* 可选:加粗字体 */
}

/* 设置不同级别的标题字体大小 */
.protyle-wysiwyg .h1,
.item__readme h1 {
    font-size: 2em; /* 最大的字体大小 */
}

.protyle-wysiwyg .h2,
.item__readme h2 {
    font-size: 1.5em; /* 次大的字体大小 */
}

.protyle-wysiwyg .h3,
.item__readme h3 {
    font-size: 1.2em; /* 较大的字体大小 */
}

.protyle-wysiwyg .h4,
.item__readme h4 {
    font-size: 1em; /* 一般的字体大小 */
}

.protyle-wysiwyg .h5,
.item__readme h5 {
    font-size: 0.875em; /* 较小的字体大小 */
}

.protyle-wysiwyg .h6,
.item__readme h6 {
    font-size: 0.75em; /* 最小的字体大小 */
}

/* 设置连续标题的背景渐变 */
.protyle-wysiwyg .h1+.h2,
.protyle-wysiwyg .h2+.h3,
.protyle-wysiwyg .h3+.h4,
.protyle-wysiwyg .h4+.h5,
.protyle-wysiwyg .h5+.h6,
.item__readme h1+h2,
.item__readme h2+h3,
.item__readme h3+h4,
.item__readme h4+h5,
.item__readme h5+h6 {
   background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, rgba(255, 255, 255, 0) 100%);/* 从淡紫色到透明的渐变 */
    box-shadow: none;
    border-top: 0;
    margin-top: -9px; /* 微调顶部边距,使H1和H2与其他标题对齐 */
}

/* 设置H3-H6的顶部边框 */
.protyle-wysiwyg .h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg .h6,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
    border-top: 6px solid var(--v-block-heading-top-shadow);
    margin: 1.3em 0 0.5em;
}

/* 设置H3-H6的顶部边框 */
.protyle-wysiwyg .h3+.h4,
.protyle-wysiwyg .h4+.h5,
.protyle-wysiwyg .h5+.h6,
.item__readme h3+h4,
.item__readme h4+h5,
.item__readme h5+h6 {
    border-top: 0;
    margin-top: -6px; /* 微调顶部边距,使H3-H6与其他标题对齐 */
}

/* 页面分割相关属性 */
.protyle-wysiwyg .h1,
.protyle-wysiwyg .h2,
.protyle-wysiwyg .h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg .h6,
.item__readme h1,
.item__readme h2,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
    page-break-after: avoid;
    break-after: avoid-page;
    page-break-inside: avoid;
    orphans: 4;
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22084 引用 • 88171 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 1 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 675 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 5 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 625 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 32 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 3 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    31 引用 • 124 回帖
  • 自由行
    9 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 21 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    565 引用 • 3532 回帖
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 628 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 407 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    178 引用 • 995 回帖
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 633 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    176 引用 • 815 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 14 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 407 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 127 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖 • 1 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 3 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 527 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖