气泡容器必须加position: relative，否则伪元素::before或::after会相对于最近已定位祖先（如body）定位，导致箭头飘移；须配合content: ""、单边有色+三边transparent的border技巧及absolute+top/left精确定位。
气泡容器必须加 position: relative
伪元素（::before 或 ::after）默认相对于最近的已定位祖先定位。如果气泡容器没设 position: relative，尾巴就会往上找——可能锚定到 body 或某个父级 flex 容器，一滚动或内容变化就飘走。
常见错误现象：::after 尾巴固定在页面左上角、随窗口缩放偏移、左右气泡尾巴位置完全不对齐。
- 必须给每条气泡消息的外层容器（如
.message-user）加上position: relative - 别只在聊天容器（flex 父级）上加，那对单条气泡无效
- 即使容器本身是
align-self: flex-end，也得单独加这个声明
尾巴用 border 画三角形，不是旋转或 clip-path
纯 border 方案兼容性好、无渲染模糊、不依赖 JS 计算，仍是生产环境首选。核心是：零宽高 + 单边有色 + 其余三边 transparent。
方向决定哪条边设色：
- 尾巴朝右（用户消息）：
border-left: 8px solid #007aff+border-top/bottom/right: 8px solid transparent - 尾巴朝左（AI 消息）：
border-right: 8px solid #ccc+ 其余三边透明 - 尾巴朝下（顶部提示）：
border-top: 8px solid #333+ 左右底边透明
注意：border-width 直接决定三角高度和底边长度，比如 8px 宽边生成的是一个高 8px、底边 16px 的等腰直角三角形。
伪元素定位要用 absolute + top/left 精调，别依赖 margin
margin-left: -15px 这类写法在字号变化、缩放或高 DPR 屏幕下极易错位。真正可控的方式是用 top 和 left/right 配合气泡内边距计算。
- 朝右气泡尾巴：用
right: 100%+top: 12px（12px≈ 气泡padding-top） - 朝左气泡尾巴：用
left: 100%+top: 12px - 避免写死
left: 20px或top: 50%—— 内容高度变化时会失准
如果气泡用了 border-radius: 16px，尾巴顶点要略高于圆角起始位置，否则视觉上会“悬空”一小段。
左右气泡要成套处理颜色、方向、伪元素选择
微信风格的语义识别靠的是组合逻辑，漏掉任一环，视觉就断裂。
- 右对齐（用户）：背景色
#007aff、文字白、尾巴用::after朝右、border-left-color: #007aff - 左对齐（AI）：背景色
#f0f0f0、文字黑、尾巴用::before朝左、border-right-color: #f0f0f0 - 别左右都用
::after，否则同一条消息里两个伪元素可能冲突 - 尾巴的
z-index不用设，默认就在气泡上层；但若气泡有box-shadow，尾巴需加z-index: 1防被遮盖
最易被忽略的是：尾巴颜色必须和气泡背景色严格一致，哪怕差一个 hex 字符，高亮场景下也会明显脱节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
