创建您的完美气泡框
使用我们的在线工具轻松生成各种风格的CSS气泡框。调整参数，实时预览效果，一键复制生成的代码到您的项目中。
实时预览
这是一个气泡框示例文本。您可以在设置中修改我的内容和样式。
气泡框设置
小
大
方角
圆角
无阴影
强阴影
无边框
粗边框
小
大
生成的CSS代码
.custom-bubble {
position: relative;
background: #165DFF;
color: #FFFFFF;
padding: 12px;
border-radius: 8px;
max-width: 200px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}
.custom-bubble::after {
content: '';
position: absolute;
bottom: 100%;
left: 20%;
margin-left: -10px;
width: 0;
height: 0;
border-bottom: 10px solid #165DFF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
代码已复制到剪贴板！
如何使用
1. 调整参数
使用左侧的控制面板调整气泡框的各种参数，包括方向、大小、颜色和样式。
2. 预览效果
在右侧预览区域实时查看气泡框的效果，随时调整直到满意为止。
3. 复制使用
点击"复制代码"按钮，将生成的CSS代码复制到您的项目中使用。
使用示例
基本HTML结构
<div class="custom-bubble"> <p>这是一个气泡框文本</p> </div>
完整示例
<!DOCTYPE html>
<html>
<head>
<style>
.custom-bubble {
position: relative;
background: #165DFF;
color: #FFFFFF;
padding: 12px;
border-radius: 8px;
max-width: 200px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}
.custom-bubble::after {
content: '';
position: absolute;
bottom: 100%;
left: 20%;
margin-left: -10px;
width: 0;
height: 0;
border-bottom: 10px solid #165DFF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
</style>
</head>
<body>
<div class="custom-bubble">
<p>你好！这是一个气泡框示例。</p>
</div>
</body>
</html>