登录 注册

[css] 分享好看的块，欢迎提意见

使用方法：

选择两个块成为一个超级块

以 question 为例：超级块-右键-属性-自定义-zdy-question

然后第一个块 右键段落图标-属性-自定义-【zdy-question-title】

第二个块： 右键段落图标-属性-自定义-【zdy-question-content】

PixPin20251001161228.png

PixPin20251001161255.png

PixPin20251001160620.png

/* ==================================================== Case ========================================== */
:root { 
  --case-xpad: 16px; 
}

[custom-zdy="case"] {
  --stripe: 42px;                        
  font-family: "Microsoft YaHei", sans-serif;
  border: 2px solid #FFB347;               /* 案例块边框：橙色系 */
  border-radius: 12px;                   
  background: #0F1D2A;                   
  box-shadow: inset 0 var(--stripe) 0 0 #462902;  
  overflow: hidden;                      
  color: #ffffff;                        
}

[custom-zdy="case-title"] {
  color: #FFB347;                          /* 标题文字颜色同边框 */
  font-size: 18px;
  font-weight: bold;
  padding: 8px var(--case-xpad) 4px;   
}

[custom-zdy="case"] [custom-zdy="case-content"] {
  padding: 0 var(--case-xpad) !important;   
  color: #FCD59A !important;   
}

[custom-zdy="case"] [custom-zdy="case-content"] ~ 
:is(
  [data-node-id].p,
  [data-node-id].list,
  [data-node-id].h1,
  [data-node-id].h2,
  [data-node-id].h3,
  [data-node-id].h4,
  [data-node-id].h5,
  [data-node-id].h6,
  [data-node-id][data-type="NodeBlockquote"],
  [data-node-id][data-type="NodeCodeBlock"],
 [data-node-id][data-type="NodeTable"]
){
  padding: 0 var(--case-xpad) !important;
  color: #FCD59A !important;                /* 正文字体颜色统一为 #FCD59A */
}

[custom-zdy="case"] [custom-zdy="case-content"] ~ 
[data-node-id][data-type="NodeTable"] {
  margin-left:  var(--case-xpad) !important;
  margin-right: var(--case-xpad) !important;
}


/* ==================================================== Abstract ========================================== */
/* -----------------------------------------------
   全局变量定义：统一左右留白间距，便于后期修改
----------------------------------------------- */
:root { 
  --abstract-xpad: 16px; 
}

/* -----------------------------------------------
   abstract 容器的样式
   1. 设置顶部 42px 色条（用 inset 阴影实现，不随容器高度变化）
   2. 微软雅黑字体，白色文字
   3. 边框 #3AC2FE，圆角 12px
   4. 底色 #0F1D2A
----------------------------------------------- */
[custom-zdy="abstract"] {
  --stripe: 42px;                          /* 顶部固定高度 */
  font-family: "Microsoft YaHei", sans-serif;
  border: 2px solid #3AC2FE;               /* 蓝色边框 */
  border-radius: 12px;                     /* 圆角 */
  background: #0F1D2A;                     /* 容器底色 */
  box-shadow: inset 0 var(--stripe) 0 0 #1A2E32;  /* 顶部色条 */
  overflow: hidden;                        /* 保证色条与圆角贴合 */
  color: #ffffff;                          /* 默认文字颜色 */
}

/* -----------------------------------------------
   abstract-title 样式
   - 白色文字
   - 字号 18px
   - 加粗
   - 左右对齐与内容一致
----------------------------------------------- */
[custom-zdy="abstract-title"] {
  color: #59FFFD;
  font-size: 18px;
  font-weight: bold;
  padding: 8px var(--abstract-xpad) 4px;   /* 上下留点空隙，左右与内容对齐 */
}

/* -----------------------------------------------
   abstract-content 第一段：单独加左右 padding
----------------------------------------------- */
[custom-zdy="abstract"] [custom-zdy="abstract-content"] {
  padding: 0 var(--abstract-xpad) !important;
  color: #3DFFFE;
}

/* -----------------------------------------------
   第一段之后的兄弟块：段落、列表、标题、引用、代码块
   统一左右 padding
   - 用 ~ 选择器确保 abstract-content 后的兄弟也生效
   - :is() 用于聚合多类节点，减少重复代码
----------------------------------------------- */
[custom-zdy="abstract"] [custom-zdy="abstract-content"] ~ 
:is(
  [data-node-id].p,                          /* 普通段落 */
  [data-node-id].list,                       /* 列表 */
  [data-node-id].h1,                         /* 标题 h1 */
  [data-node-id].h2,                         /* 标题 h2 */
  [data-node-id].h3,                         /* 标题 h3 */
  [data-node-id].h4,                         /* 标题 h4 */
  [data-node-id].h5,                         /* 标题 h5 */
  [data-node-id].h6,                         /* 标题 h6 */
  [data-node-id][data-type="NodeBlockquote"],/* 引用块 */
  [data-node-id][data-type="NodeCodeBlock"],  /* 代码块 */
  [data-node-id][data-type="NodeTable"]
){
  padding: 0 var(--abstract-xpad) !important;
  color: #3DFFFE;
}

/* -----------------------------------------------
   表格块：padding 不生效时，改用 margin
   - 确保表格整体左右缩进与其他块保持一致
----------------------------------------------- */
[custom-zdy="abstract"] [custom-zdy="abstract-content"] ~ 
[data-node-id][data-type="NodeTable"] {
  margin-left:  var(--abstract-xpad) !important;
  margin-right: var(--abstract-xpad) !important;
}


/* ==================================================== Question ========================================== */
:root { 
  --question-xpad: 16px; 
}

[custom-zdy="question"] {
  --stripe: 42px;                        
  font-family: "Microsoft YaHei", sans-serif;
  border: 2px solid #6EFF13;             
  border-radius: 12px;                   
  background: #0F1D2A;                   
  box-shadow: inset 0 var(--stripe) 0 0 #173122;  
  overflow: hidden;                      
  color: #ffffff;                        
}

[custom-zdy="question-title"] {
  color: #BFFF50;
  font-size: 18px;
  font-weight: bold;
  padding: 8px var(--question-xpad) 4px;   
}

[custom-zdy="question"] [custom-zdy="question-content"] {
  padding: 0 var(--question-xpad) !important;   
  color: #B7DFB9;      
}

[custom-zdy="question"] [custom-zdy="question-content"] ~ 
:is(
  [data-node-id].p,
  [data-node-id].list,
  [data-node-id].h1,
  [data-node-id].h2,
  [data-node-id].h3,
  [data-node-id].h4,
  [data-node-id].h5,
  [data-node-id].h6,
  [data-node-id][data-type="NodeBlockquote"],
  [data-node-id][data-type="NodeCodeBlock"],
  [data-node-id][data-type="NodeTable"]
){
  padding: 0 var(--question-xpad) !important;
  color: #B7DFB9;
}

[custom-zdy="question"] [custom-zdy="question-content"] ~ 
[data-node-id][data-type="NodeTable"] {
  margin-left:  var(--question-xpad) !important;
  margin-right: var(--question-xpad) !important;
}

/* ==================================================== Tip ========================================== */
:root {
  --tip-xpad: 16px;
}

[custom-zdy="tip"] {
  --stripe: 42px;
  font-family: "Microsoft YaHei", sans-serif;
  border: 2px solid #F7A6A4;
  border-radius: 12px;
  background: #0F1D2A;
  box-shadow: inset 0 var(--stripe) 0 0 #362727;
  overflow: hidden;
  color: #ffffff;
}

[custom-zdy="tip-title"] {
  color: #F7A6A4;
  font-size: 18px;
  font-weight: bold;
  padding: 8px var(--tip-xpad) 4px;
}

[custom-zdy="tip"] [custom-zdy="tip-content"] {
  padding: 0 var(--tip-xpad) !important;
  color: #F9A6A2;
}

[custom-zdy="tip"] [custom-zdy="tip-content"] ~ 
:is(
  [data-node-id].p,
  [data-node-id].list,
  [data-node-id].h1,
  [data-node-id].h2,
  [data-node-id].h3,
  [data-node-id].h4,
  [data-node-id].h5,
  [data-node-id].h6,
  [data-node-id][data-type="NodeBlockquote"],
  [data-node-id][data-type="NodeCodeBlock"],
  [data-node-id][data-type="NodeTable"]
){
  padding: 0 var(--tip-xpad) !important;
  color: #F9A6A2;
}

[custom-zdy="tip"] [custom-zdy="tip-content"] ~ 
[data-node-id][data-type="NodeTable"]{
  margin-left:  var(--tip-xpad) !important;
  margin-right: var(--tip-xpad) !important;
}
  • 思源笔记

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

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

    28446 引用 • 119770 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    285 引用 • 1985 回帖
1 操作
JeffreyChen 在 2025-10-01 16:16:42 更新了该帖
聊城 位置
1 关注
5 收藏
1 赞同
1 操作
276 167 2 1 106

相关帖子

回帖
[css] 分享好看的块，欢迎提意见

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
shiyuankill
聊城
回帖
195
 帖子
111
 积分
3204

近期热议

推荐标签 标签

  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 342 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 18 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    182 引用 • 400 回帖
  • Visio
    1 引用 • 2 回帖
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 152 关注
  • 创业

    你比 99% 的人都优秀么？

    81 引用 • 1396 回帖 • 1 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 186 关注
  • GitLab

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

    46 引用 • 72 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    960 引用 • 946 回帖
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖 • 2 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    348 引用 • 765 回帖 • 1 关注
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    46 引用 • 114 回帖 • 139 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    502 引用 • 1397 回帖 • 240 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 633 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 691 关注
  • Rust

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

    60 引用 • 22 回帖 • 2 关注
  • 强迫症

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

    15 引用 • 161 回帖 • 1 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    61 引用 • 29 回帖 • 14 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    95 引用 • 122 回帖 • 634 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • AWS
    11 引用 • 28 回帖 • 2 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 14 关注
  • 电影

    这是一个不能说的秘密。

    125 引用 • 610 回帖
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    200 引用 • 545 回帖
  • NetBeans

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

    78 引用 • 102 回帖 • 724 关注

最新标签