必须给气泡容器加position: relative，否则伪元素三角会因定位上下文缺失而飘至左上角；需配合content: ""、width:0;height:0、单边实色+三边transparent的border及top:50%+transform居中。
伪元素必须设 position: absolute 且父容器加 position: relative
小三角不出现、飘到页面左上角、滚动时错位——90% 是因为忘了给气泡容器加 position: relative。伪元素 ::before 或 ::after 默认相对于最近的已定位祖先定位，不是气泡本身。如果气泡外层是 div.message，那就必须在这层上写 position: relative，不能只在聊天列表容器（比如 .chat-history）上加。
常见错误写法：.chat-history { position: relative; } → 无效，三角会锚定到这个大容器顶部.message { position: relative; } → 正确，每个气泡独立定位上下文
还要注意：
- 必须配 content: ""，否则伪元素不渲染
- width: 0; height: 0; 是三角形基础，缺一不可
- 不要用 margin 微调位置，它受字体大小、缩放影响大；优先用 top/right + transform
border 颜色方向和三角朝向必须严格对应
右侧气泡（用户消息）要三角朝左贴右边缘，就得用 border-right-color；左侧气泡（AI 消息）要三角朝右贴左边缘，就得用 border-left-color。写反了三角就指向错误方向，这是最常翻车的地方。
方向与边框属性对照表：
- 三角朝左（贴右边缘）→ border-right-color: #007aff
- 三角朝右（贴左边缘）→ border-left-color: #f0f0f0
- 三角朝下（贴上边缘）→ border-bottom-color: #333
- 三角朝上（贴下边缘）→ border-top-color: #666
其余三边必须明确设为 transparent，不能省略或写成 none；border-width 决定三角大小，例如 8px 生成的是高约 8px、底边约 16px 的等腰直角三角形。
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
垂直居中必须用 top: 50% + transform: translateY(-50%)
写死 top: 12px 看似简单，但气泡高度随文本行数变化时，三角就会上下偏移。尤其多行消息里，top: 50% 始终以父容器高度中点为基准，再用 transform 把三角自身高度的一半拉回来，才是真稳定。
实操要点：
- 右侧气泡示例：
::after {<br> top: 50%;<br> transform: translateY(-50%);<br> right: -8px;<br> border: 8px solid transparent;<br> border-right-color: #007aff;<br>}
- 左侧气泡则用
::before + left: -8px- 如果气泡有
padding-top: 12px，别把 top 改成 12px，那只是碰巧对齐单行，多行必错响应式下三角错位，往往卡在 overflow: hidden 和圆角对齐
三角被裁掉、尖端悬空一小段、缩放后缝隙变大——大概率是父容器设置了 overflow: hidden 或 border-radius 但没预留空间。伪元素默认会被父容器裁剪，必须显式加 overflow: visible。
另外，圆角起始点和三角顶点不在同一水平线：比如气泡 border-radius: 16px，圆角从距离顶部 16px 处开始弯曲，而三角若按 top: 50% 居中，可能落在圆角区域中间，视觉上就“浮空”。解决办法是微调 top 值，例如改成 top: calc(50% - 4px)，让三角顶点略高于圆角起点。
其他易忽略点：
- 高 DPR 屏幕（如 Retina）下，1px 边框可能渲染模糊，三角建议用偶数 border-width（如 6px、8px）
- 不要用 clip-path 或 rotate 画三角，兼容性和性能都不如 border 方案
- 尾巴颜色别硬编码，用 inherit 或 currentColor 继承气泡背景，避免维护两套色值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
