全局 CSS 样式

全局 CSS 样式可以让你自定义游戏中消息的视觉效果——修改颜色、字体、背景、间距、圆角等等。在创作台的「全局 CSS 样式」编辑器中直接编写 CSS 即可。

直接写 CSS 规则就行，不需要添加 <style> 标签。样式仅在消息区域内生效，不会影响页面其他部分。

不熟悉 CSS？可以让 AI 帮你写。把你想要的效果描述给它（比如「用户消息气泡改成渐变紫色背景」），它就能生成对应的 CSS 代码，复制粘贴即可。

用户消息气泡

通过 .msg-message-user 类自定义用户发送的消息样式。

渐变背景：

.msg-message-user {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 18px 18px 4px 18px;
    color: #fff;
}

边框描边风格：

.msg-message-user {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

磨砂玻璃风格：

.msg-message-user {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
}

AI 消息气泡

通过 .msg-message-assistant 类自定义 AI 回复的消息样式。

用户消息气泡有系统默认样式（背景 + 圆角 + 模糊），AI 消息气泡默认是透明的。两者都可以通过全局 CSS 自由覆盖。

半透明背景：

.msg-message-assistant {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 18px 18px 18px 4px;
    padding: 12px 16px;
}

左边框装饰：

.msg-message-assistant {
    border-left: 3px solid #667eea;
    padding-left: 12px;
}

暗色卡片风格：

.msg-message-assistant {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
}

覆盖预设标签样式

如果你使用了预设标签但不喜欢默认样式，可以直接用全局 CSS 覆盖，不需要修改正则规则。

/* 旁白改为金色边框风格 */
.msg-narration {
    color: #c9a96e;
    font-style: normal;
    border-left: 2px solid #c9a96e;
    padding-left: 12px;
    background: none;
    -webkit-text-fill-color: initial;
}

/* 场景描述改小字号 */
.msg-scenario {
    color: #888;
    font-size: 0.9em;
}

/* 回忆/总结加背景 */
.msg-recap {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 12px 16px;
}

内置类名参考

以下是所有可覆盖的 CSS 类名：

消息容器

类名	说明
`.msg-message`	所有消息的基础容器，玩家和 AI 消息都包含此类
`.msg-message-user`	玩家发送的消息气泡，与 `.msg-message` 同时存在
`.msg-message-assistant`	AI 回复的消息气泡，与 `.msg-message` 同时存在（默认透明无样式）

三者的关系：.msg-message 是基础类，所有消息都有。在此基础上，玩家消息会追加 .msg-message-user，AI 消息会追加 .msg-message-assistant。所以用 .msg-message 设置通用样式（如字体、行高），用另外两个分别控制各自的外观。

预设标签

类名	对应标签	说明
`.msg-narration`	`<narration>`	旁白文字
`.msg-system`	`<system>`	系统提示
`.msg-bubble`	`<bubble>`	角色对话气泡
`.msg-scenario`	`<scenario>`	场景描述
`.msg-recap`	`<recap>`	回忆/总结
`.msg-quoted`	`"中文引号"`	引号包裹的对话文字

折叠面板

类名	说明
`.msg-details`	折叠面板容器
`.msg-summary`	折叠面板标题
`.msg-details-body`	折叠面板展开后的内容

选项

类名	说明
`.msg-options`	选项容器
`.msg-question`	选项的问题文字
`.msg-option-item`	可点击的单个选项

开场白美化

类名	说明
`.msg-preset`	开场白美化容器
`.msg-preset h1`	开场白标题
`.msg-preset p`	开场白段落
`.msg-preset .highlight`	开场白高亮文字

注意事项

样式隔离在消息区域内（Shadow DOM），不会影响页面其他部分
可以和正则美化搭配使用：正则美化负责 HTML 结构，全局 CSS 负责视觉效果
修改后可以在预览功能中实时查看效果

全局 CSS 样式

On this page