1. 极简默认样式 (Default)
点击展开查看详情
- 这是极简白色样式，适合大部分场景。
- 支持 Markdown 语法（粗体、列表、代码等）。
- 可以放图片、表格、代码块。
print("Hello, Marklane!")
2. 蓝色信息提示 (Info)
💡 更多信息
这个样式适合放置补充说明、友情提示、扩展阅读等内容。
注意：这种蓝色风格十分温和，不会过于抢眼。
3. 绿色成功状态 (Success)
✔️ 操作成功
适合展示 完成任务、配置正确、通过测试 等积极信息。
| 状态 | 说明 |
|---|---|
| ✅ | 已通过验证 |
| ✅ | 无报错 |
4. 黄色警告提示 (Warning)
⚠️ 注意 / 提醒
重要提示：
- 这里可以放兼容性说明、注意事项
- 或者提示用户某些功能即将废弃
- 支持
行内代码高亮
5. 红色危险/错误 (Danger)
🚫 错误 / 禁止
警告：这个样式适合展示：
- 严重错误信息
- 不可逆操作
- 安全问题
6. 嵌套折叠框
点击展开多级折叠
这是外层折叠框的内容。
内层折叠框 (Info)
内层内容：支持任意嵌套组合。
内层折叠框 (Success)
你可以在任何位置插入任何样式的折叠框。
实现方法
使用示例上文
在博客后台的“页面定制 CSS 代码”一栏加入以下代码。
/* ========== 折叠框基础样式 ========== */
.details-box {margin: 1.6rem 0;border-radius: 8px;background: #fff;border: 1px solid #e1e4e8;overflow: hidden;box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}/* 隐藏原生三角箭头 */
.details-box > summary {list-style: none;cursor: pointer;padding: 14px 18px;font-weight: 600;font-size: 15px;display: flex;justify-content: space-between;align-items: center;user-select: none;transition: background-color 0.2s, color 0.2s;
}
.details-box > summary::-webkit-details-marker {display: none;
}
.details-box > summary:hover {background-color: #f8f9fa;
}/* 自定义箭头 (用 Unicode 字符) */
.details-box > summary::after {content: "›";font-size: 22px;transition: transform 0.25s ease;color: #888;line-height: 1;
}
.details-box[open] > summary::after {transform: rotate(90deg);
}/* 内容区域 */
.details-box > .details-content {padding: 4px 18px 18px 18px;color: #333;border-top: 1px solid transparent;
}
.details-box[open] > .details-content {border-top-color: #e1e4e8;
}/* 内容里的第一段去掉多余的顶部边距 */
.details-content > p:first-child {margin-top: 8px;
}/* ========== 五种样式主题 ========== */
/* 默认 (极简白) */
.details-box.default > summary {background: #fff;color: #333;
}
.details-box.default[open] > summary {background-color: #f8f9fa;
}/* 信息 (Info) - 淡蓝色 */
.details-box.info {border-color: #b6e5f3;
}
.details-box.info > summary {background-color: #eaf8fd;color: #055160;
}
.details-box.info[open] > summary {background-color: #cff4fc;
}/* 成功 (Success) - 淡绿色 */
.details-box.success {border-color: #badbcc;
}
.details-box.success > summary {background-color: #e9f7ef;color: #0f5132;
}
.details-box.success[open] > summary {background-color: #d1e7dd;
}/* 警告 (Warning) - light yellow*/
.details-box.warning {border-color: #ffecb5;
}
.details-box.warning > summary {background-color: #fff8e5;color: #664d03;
}
.details-box.warning[open] > summary {background-color: #fff3cd;
}/* 危险 (Danger) - 淡红色 */
.details-box.danger {border-color: #f5c2c7;
}
.details-box.danger > summary {background-color: #fce9eb;color: #842029;
}
.details-box.danger[open] > summary {background-color: #f8d7da;
}