⚙️ 自定义参数

箭头方向

背景颜色

文字颜色

边框颜色

圆角 (px) 12px

内边距 (px) 16px

边框宽度 (px) 1px

箭头大小 (px) 12px

阴影

气泡文本

👁️ 预览

你好！这是一个CSS气泡对话框 👋

/* CSS代码将显示在这里 */

✓ 已复制

CSS气泡对话框（Speech Bubble）是一种带有三角箭头的消息框，常用于聊天界面、评论框、工具提示和引用说明。完全使用CSS实现，无需图片。

本生成器使用纯CSS实现，兼容所有现代浏览器（Chrome、Firefox、Safari、Edge）。IE11及以下版本不支持部分CSS特性。

复制生成的CSS代码到你的样式文件中，然后在HTML中使用对应的class。本工具使用 ::before 伪元素实现箭头。