Softonic

CSS 手风琴生成器

步 1 / 4 内容

手风琴内容

请以纯文本填写标题和面板内容。类似 HTML 的文字会在生成代码中转义。

手风琴文字和设置只保留在此浏览器标签页中，不会通过 Livewire 发送、写入网址或上传。关闭标签页后，已保存的步骤状态会被清除。

使用语义化 <details> 和 <summary> 创建三段式手风琴。编辑纯文本标题和面板内容，选择颜色、间距及展开方式，在预览中测试后复制代码或下载独立 HTML 文件。编辑过程全部在当前浏览器标签页中完成。

如何创建 CSS 手风琴

  1. 1

    填写三个部分

    为每部分添加简短标题和纯文本面板。类似 HTML 的输入会被转义，不会执行。

  2. 2

    设置外观

    选择四种六位颜色值、0 至 24 px 的圆角，以及 8 至 32 px 的内边距。

  3. 3

    选择展开方式

    允许同时展开多个面板，或用原生 name 属性一次只展开一个面板。图标可选旋转箭头或加减号。

  4. 4

    测试并导出

    用指针和键盘测试实时预览，然后复制代码或下载 UTF-8 HTML 文件。

生成的代码

每部分都使用浏览器原生展开元素：

<details class="generated-accordion" open>
  <summary>包含哪些内容？</summary>
  <div class="generated-accordion__panel">在此填写详细信息。</div>
</details>

生成的 CSS 会设置边框、标题背景、文字、焦点、间距、圆角和图标。代码使用 margin-inline-start 等逻辑属性，并包含从右到左布局规则。如果访问者设置了减少动态效果，prefers-reduced-motion 媒体查询会取消图标过渡。

同时展开多个或只展开一个

设置 生成的标记 效果
多个面板 无共用 name 每部分独立展开和收起
单个面板 全部使用 name="generated-accordion" 支持的浏览器会在展开新面板时收起旧面板

不支持互斥 details 组的旧版浏览器仍可正常使用，只是可能同时展开多个面板。

安全的纯文本内容

标题和面板按文本处理。<、>、&、引号和撇号会在导出代码中转义，因此粘贴的标签只显示为文字，不会执行。如需链接或列表，请在导出后自行加入经过审核的标记。

发布前检查无障碍体验

  • 用 Tab 移到每个 summary，并测试 Enter 和空格键。
  • 检查焦点颜色与标题背景、页面背景的对比度。
  • 测试缩放、窄屏以及从右到左的页面。
  • 不要把页面的主要说明只放在收起的面板中。

常见问题

不需要。展开和收起由原生 <details> 和 <summary> 完成。下载的组件只包含 HTML 和 CSS。

可以。选择单面板模式后，三个 <details> 会使用相同的 name 属性。旧版浏览器会回退为独立面板。

编辑器有意将输入视为纯文本，并转义 HTML 字符。如有需要，请在导出后加入经过审核的标记。

不会。文字、设置、预览、复制和下载都留在浏览器中。跨页面时，临时状态保存在当前标签页的 sessionStorage，不会写入网址。

相关工具

BBCode 转 HTML 转换器

将 BBCode（论坛标记）转换为干净的 HTML。支持格式标签、列表、引用、代码、图片、链接和表格。

二进制转 ASCII 转换器

粘贴二进制（用空格分隔的字节或一长串比特），即可得到它所表示的 ASCII 文本。支持 7 位和 8 位编码。

二进制转十六进制转换器

将二进制输入转换为纯大写十六进制值。非 0 和 1 字符会被忽略，前导零不会保留。

二进制转八进制转换器

通过每三位分组将二进制转为八进制。适合 Unix 权限、旧系统和紧凑的数字显示。

Base64 转 Hex 转换器

将 Base64 字符串转换为其底层字节的十六进制表示。适合检查令牌、密钥、证书和 JWT。

二进制转十进制

即时将二进制数转换为十进制。显示按位展开，让你看清每一位的贡献。