CSS 来自 @稻米鼠，博客：https://zji.me/3544f76e-7c66-4216-9ba9-32309f86e566.html
这是一个 Obsidian 的卡片堆视图，利用 CSS 将特定的 Callout 语法渲染成卡片堆样式，适用于一些并列的内容，具体使用场景大家自行挖掘吧。
效果展示#
卡片收起时效果展示：
卡片点击展开后效果展示：
配置#
只需将一个 CSS 代码文件放到代码段文件夹内即可：
- 新建文件
Cards-Show.css，复制文末代码放入文件内保存 - 将文件
Cards-Show.css放到 CSS 代码段文件夹内。具体路径：Obsidian- 设置 - 外观 -CSS 代码片段 - 点击右侧文件夹 icon 打开代码段文件夹 - 回到 CSS 代码片段设置页面，刷新，开启刚才添加的
Cards-Show - 在 Obsidian 文件内输入指定的 Callout 语法，即可显示为卡片堆视图，具体见下文的「使用示例」
使用示例#
使用方式和自带的 Callout 语法一致，不算太污染原文。支持 Markdown 常见的加粗、超链接等标记。 以下是上图的示例：
> [!cards-show]- **【2024-4 日志】这是标题，会显示在第一张卡片上，点击可展开卡片堆**
>
> 1. **摆清自己的位置**，说该说的话，做该做的事，不要瞎操心。太多的老人就是摆不清位置，什么都要管一下，代际冲突由此产生。
>
> 2. **之前借的钱，会成为下一次借钱的筹码**。所以，不要轻易借钱，需要警惕小额借钱的人，因为他有可能在积累你对他的信任，然后借一次大的不再还你。
>
> 3. 如果一时还无法财务自由，那就先精神自由吧。
>
> 4. 一个团队很重要的是，知道**在做什么**，以及要**到哪里去**。
>
> 5. 关于买房和租房，租房最大的顾虑是年老后的不安全感，但为了这四五十年后的不确定性，我们需要投入最好的二三十年人生，这值得吗？
>
> 6. 我发现，一些人很喜欢说他人「磨蹭」，尤其是亲近的人，这就是**典型的 judge 他人**，用自己的标准要求别人，不符合自己要求时就说「磨蹭」。常见例子是，催洗澡。
>
> 7. 保健院有许多孩子在按摩，据说都是因为这因为那的问题，一个思考：既然所谓的问题很普遍，那岂不是就不是问题了。当然，并不知道按摩的孩子占比如何，所以也仅仅是思考而已。
>
> 8. 张爱玲的《秧歌》中，巧妙地把自己的**观察以及预测**，投射到农村的一起群体事件中去，如果把她当做简单的言情小说作者，那就太看低她了。她的洞察力和文笔，不容置疑。
文件 Cards-Show.css 代码如下：
/**
* 卡片视图
* @author: 稻米鼠
* @description: 用于显示卡片的 callout 视图
* @created: 2024-05-04
* @updated: 2024-05-04
* @version: 0.0.1
*/
.callout[data-callout="cards-show"] {
--callout-color: 255, 233, 160; /** 主色調但不影響背景色 */
--callout-icon: panel-top-open; /** 图标，但默认不显示 */
--callout-width: 25% - 1rem; /** 卡片宽度，默认为 25%，-1rem 用作间距 */
--callout-height: 12rem; /** 卡片高度 */
background: rgba(0, 0, 0, 0.03);
container-type: inline-size;
container-name: cards-show;
}
@container cards-show (max-width: 768px) {
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content {
--callout-width: 33% - 1rem;
}
}
@container cards-show (max-width: 600px) {
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content {
--callout-width: 50% - 1rem;
}
}
@container cards-show (max-width: 480px) {
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content {
--callout-width: 100%;
}
}
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content ul > li,
.callout[data-callout="cards-show"] > .callout-content ol > li {
position: relative;
display: block;
box-sizing: border-box;
width: calc(var(--callout-width));
height: var(--callout-height);
padding: 1rem;
margin: 0;
color: var(--text-normal);
background-color: rgb(var(--callout-color));
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.callout[data-callout="cards-show"].is-collapsed {
background: none;
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::before,
.callout[data-callout="cards-show"].is-collapsed > .callout-title::after {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
background-color: rgb(var(--callout-color));
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
content: " ";
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::before {
transform: rotate(3deg);
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::after {
transform: rotate(-3deg);
}
.callout[data-callout="cards-show"] > .callout-title > .callout-icon,
.callout[data-callout="cards-show"] > .callout-title > .callout-fold {
display: none;
}
.callout[data-callout="cards-show"] > .callout-title > .callout-title-inner {
font-weight: normal;
font-size: 1rem;
}
.callout[data-callout="cards-show"] > .callout-content {
padding: 1rem 0;
overflow: auto;
}
.callout[data-callout="cards-show"] > .callout-content ul,
.callout[data-callout="cards-show"] > .callout-content ol {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: start;
margin: 0;
padding: .5rem 0;
}
.callout[data-callout="cards-show"] > .callout-content ul > li,
.callout[data-callout="cards-show"] > .callout-content ol > li {
margin-bottom: 0.5rem;
overflow: scroll;
text-align: justify;
list-style: none;
background-color: rgba(var(--callout-color), 0.5);
}