[css] 第三版(凑热闹)标题颜色变化 + 标题下加渐变横线

Clip20241003203940.png

/*1-6级标题颜色*/
[data-type="NodeHeading"][class="h1"] {
  /*display: inline-block !important; 右上角引用的数字显示不正常,注释掉这一行正常,下面一样,直接删除掉了*/
  color: #d40045 !important;
}
[data-type="NodeHeading"][class="h2"] {

  color: #ff7f00 !important;
}
[data-type="NodeHeading"][class="h3"] {

  color: #66b82b !important;
}
[data-type="NodeHeading"][class="h4"] {

  color: #e8c258 !important;
}
[data-type="NodeHeading"][class="h5"] {

  color: #996fea !important;
}
[data-type="NodeHeading"][class="h6"] {

  color: #5d94e1 !important;
}
/* 1-6级标题下画渐变色横线,取自主题-卡片边框化 */
div[data-subtype="h1"]:after {
    content: "";
    font-size: 8px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(0, 0, 0));
}
div[data-subtype="h2"]:after {
    content: "";
    font-size: 8px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(0, 0, 0));
}
div[data-subtype="h3"]:after {
    content: "";
    font-size: 8px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(0, 0, 0));
}
div[data-subtype="h4"]:after {
    content: "";
    font-size: 8px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(0, 0, 0));
}
div[data-subtype="h5"]:after {
    content: "";
    font-size: 8px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(0, 0, 0));
}
div[data-subtype="h6"]:after {
    content: "";
    font-size: 8px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(0, 0, 0));
}
  • 思源笔记

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

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

    21360 引用 • 84266 回帖
  • 代码片段

    代码片段是一段 CSS 或 JS 的代码,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享内容时请在帖子标题前添加 [css] [js] 用于区分

    24 引用 • 128 回帖
1 操作
JeffreyChen 在 2024-10-03 21:29:33 更新了该帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 898 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    77 引用 • 390 回帖
  • 程序员

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

    555 引用 • 3531 回帖
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 134 关注
  • 强迫症

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

    15 引用 • 161 回帖
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • PostgreSQL

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

    22 引用 • 22 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 378 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 2 关注
  • 倾城之链
    23 引用 • 66 回帖 • 135 关注
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖
  • abitmean

    有点意思就行了

    27 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 6 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 524 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    105 引用 • 127 回帖 • 415 关注
  • sts
    2 引用 • 2 回帖 • 187 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 34 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 1 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • 创造

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

    175 引用 • 994 回帖 • 3 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3170 引用 • 8209 回帖 • 2 关注