折叠框美化
upd 2026-10-07：发现嵌套折叠框文字向左对齐的问题，正在修复。
简介
写博客的时候发现原版的折叠框显然过于丑陋，也没有找到比较满意的美化，故设计了一份美化方案。
使用说明
<details class="fold fold">
<summary>提示</summary>
<div class="fold-body">
<!-- Put Your Code Here -->
这是预览效果
</div>
</details>
<details class="fold fold--tip">
<summary>成功</summary>
<div class="fold-body">
<!-- Put Your Code Here -->
这是预览效果
</div>
</details>
提示
这是预览效果
成功
这是预览效果
警告
这是预览效果
危险
这是预览效果
提示
这是预览效果
我美吗
折叠框也是可以嵌套的
上面几种效果对应的 class 值分别为 fold fold，fold fold--tip，fold fold--success，fold fold--warn，fold fold--danger，fold fold--purple。
代码
代码有 AI 生成，经人工修正。
/* ============================================================
博客折叠框美化 CSS v3
配合 HTML 结构：
<details class="fold [fold--tip|fold--warn|fold--danger|fold--purple]" [open]>
<summary>标题文字</summary>
<div class="fold-body">折叠内容</div>
</details>
字体：全部继承父级，与正文一致，不再单独缩小。
============================================================ */
:root {
--fold-accent: #4f8cff;
--fold-accent-rgb: 79, 140, 255;
--fold-bg: #f7f9fc;
--fold-border: #e3e8f0;
--fold-text: #2c3e50;
--fold-muted: #6b7a90;
--fold-radius: 12px;
--fold-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
--fold-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.08);
--fold-ease: cubic-bezier(0.4, 0, 0.2, 1);
--fold-duration: 0.36s;
/* 默认「信息」图标 */
--fold-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
/* 让 height:auto 也能参与过渡（Chrome 129+ / Safari 18+ / Edge） */
@supports (interpolate-size: allow-keywords) {
:root { interpolate-size: allow-keywords; }
}
/* ---------------- 折叠框容器 ---------------- */
details.fold {
display: block;
margin: 1.2em 0;
border: 1px solid var(--fold-border);
border-radius: var(--fold-radius);
background: var(--fold-bg);
box-shadow: var(--fold-shadow);
overflow: hidden;
color: var(--fold-text);
/* ★ 关键：继承父级字号和行高，与正文保持一致 */
font-size: inherit;
line-height: inherit;
transition: border-color var(--fold-duration) var(--fold-ease),
box-shadow var(--fold-duration) var(--fold-ease),
background var(--fold-duration) var(--fold-ease);
}
details.fold:hover {
border-color: rgba(var(--fold-accent-rgb), 0.45);
box-shadow: var(--fold-shadow-hover);
}
/* ---------------- 标题栏 ---------------- */
details.fold > summary {
display: flex;
align-items: center;
gap: 0.6em;
padding: 14px 18px;
/* ★ 继承父级字号，只用加粗区分层级 */
font-size: inherit;
font-weight: 600;
line-height: inherit;
color: var(--fold-text);
cursor: pointer;
list-style: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background var(--fold-duration) var(--fold-ease),
color var(--fold-duration) var(--fold-ease);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::marker { content: ""; }
/* 左侧类型图标（mask 染色，跟随主题色） */
details.fold > summary::before {
content: "";
flex: 0 0 auto;
width: 1.15em;
height: 1.15em;
background-color: var(--fold-accent);
-webkit-mask: var(--fold-icon) center / contain no-repeat;
mask: var(--fold-icon) center / contain no-repeat;
transition: background-color var(--fold-duration) var(--fold-ease),
transform var(--fold-duration) var(--fold-ease);
}
details.fold[open] > summary::before {
transform: scale(1.08);
}
/* 右侧箭头：收起时指右，展开时指下 */
details.fold > summary::after {
content: "";
flex: 0 0 auto;
width: 0.5em;
height: 0.5em;
margin-left: auto;
border-right: 2px solid var(--fold-muted);
border-bottom: 2px solid var(--fold-muted);
transform: rotate(-45deg);
transition: transform var(--fold-duration) var(--fold-ease),
border-color var(--fold-duration) var(--fold-ease);
}
details.fold[open] > summary::after {
transform: rotate(45deg);
border-color: var(--fold-accent);
}
details.fold > summary:hover {
background: rgba(var(--fold-accent-rgb), 0.08);
}
details.fold[open] > summary {
border-bottom: 1px solid var(--fold-border);
background: rgba(var(--fold-accent-rgb), 0.06);
}
/* ---------------- 内容区域 ---------------- */
details.fold .fold-body {
padding: 16px 18px;
/* ★ 同样继承父级字号和行高 */
font-size: inherit;
line-height: inherit;
color: var(--fold-text);
}
details.fold .fold-body > :first-child { margin-top: 0; }
details.fold .fold-body > :last-child { margin-bottom: 0; }
/* 内容里的链接 */
details.fold .fold-body a {
color: var(--fold-accent);
text-decoration: none;
border-bottom: 1px solid rgba(var(--fold-accent-rgb), 0.35);
transition: border-color 0.2s ease;
}
details.fold .fold-body a:hover {
border-bottom-color: var(--fold-accent);
}
/* 行内代码 / 代码块 */
details.fold .fold-body code {
padding: 2px 6px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.06);
font-size: 0.9em;
}
details.fold .fold-body pre {
padding: 12px 14px;
border-radius: 10px;
background: #1f2937;
color: #e5e7eb;
overflow-x: auto;
}
details.fold .fold-body pre code {
background: none;
padding: 0;
}
/* ---------------- 平滑展开动画 ---------------- */
@supports selector(::details-content) {
details.fold::details-content {
block-size: 0;
overflow: hidden;
transition: block-size var(--fold-duration) var(--fold-ease),
content-visibility var(--fold-duration) allow-discrete;
}
details.fold[open]::details-content {
block-size: auto;
}
/* 内容淡入 + 轻微下移，消除生硬感 */
details.fold .fold-body {
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.28s var(--fold-ease) 0s,
transform 0.28s var(--fold-ease) 0s;
}
details.fold[open] .fold-body {
opacity: 1;
transform: translateY(0);
transition-delay: 0.08s;
}
}
/* ---------------- 类型配色 + 图标 ---------------- */
/* 提示 / 成功：绿色 · 对勾 */
details.fold.fold--tip {
--fold-accent: #10b981;
--fold-accent-rgb: 16, 185, 129;
--fold-bg: #f0fdf4;
--fold-border: #bbf7d0;
--fold-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
/* 警告：黄色 · 三角感叹号 */
details.fold.fold--warn {
--fold-accent: #f59e0b;
--fold-accent-rgb: 245, 158, 11;
--fold-bg: #fffbeb;
--fold-border: #fde68a;
--fold-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
/* 危险：红色 · 圆圈叉 */
details.fold.fold--danger {
--fold-accent: #ef4444;
--fold-accent-rgb: 239, 68, 68;
--fold-bg: #fef2f2;
--fold-border: #fecaca;
--fold-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
}
/* 扩展阅读：紫色 · 星形 */
details.fold.fold--purple {
--fold-accent: #8b5cf6;
--fold-accent-rgb: 139, 92, 246;
--fold-bg: #f5f3ff;
--fold-border: #ddd6fe;
--fold-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z'/%3E%3C/svg%3E");
}
/* ---------------- 深色模式 ---------------- */
@media (prefers-color-scheme: dark) {
:root {
--fold-bg: #1e293b;
--fold-border: #334155;
--fold-text: #e2e8f0;
--fold-muted: #94a3b8;
--fold-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
--fold-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.4);
}
details.fold.fold--tip { --fold-bg: #052e16; --fold-border: #166534; }
details.fold.fold--warn { --fold-bg: #451a03; --fold-border: #92400e; }
details.fold.fold--danger { --fold-bg: #450a0a; --fold-border: #991b1b; }
details.fold.fold--purple { --fold-bg: #2e1065; --fold-border: #6d28d9; }
details.fold .fold-body code {
background: rgba(255, 255, 255, 0.12);
}
}
/* ---------------- 移动端微调 ---------------- */
@media (max-width: 600px) {
details.fold > summary { padding: 12px 14px; }
details.fold .fold-body { padding: 14px; }
}
浙公网安备 33010602011771号