用::before/::after生成三角形气泡尖角的核心是设置宽高为0的伪元素，仅保留单边实色边框、其余三边透明，配合content:""和position:absolute实现；右向气泡用::after设border-left，左向用::before设border-right，并通过margin或left/right微调对齐。
怎么用 ::before 和 ::after 生成三角形气泡尖角
气泡框最核心的视觉特征就是那个小三角，它不是图片，而是靠伪元素 + 边框技巧画出来的。原理是：把一个无宽高的元素（比如 width: 0; height: 0）的三边设为透明边框，剩下一侧设为实色边框，就能“挤”出一个三角形。
常见错误是直接给 ::after 设 border 却忘了清空其他三边，结果三角方向错、位置偏、或者根本没显示。
- 右向气泡（对话在左边）：给
::after设border-left: 8px solid #fff，其余三边为transparent，再用margin-left: -8px微调对齐 - 左向气泡（对话在右边）：用
::before，设border-right: 8px solid #f0f0f0，其余透明 - 务必加
content: ""，否则伪元素不渲染；position: absolute是定位前提 - 三角颜色要和气泡主体背景一致，否则边缘会露白或露底色
如何让气泡框自动适应文字长度而不换行溢出
默认 div 或 span 做气泡容器时，长文本会撑破宽度、折行错位，甚至把三角顶歪。关键不是固定 width，而是用 max-width + inline-block 或 fit-content 控制伸缩边界。
- 容器设
display: inline-block或display: fit-content（注意 Safari 旧版不支持后者） - 加
max-width: 280px（根据设计定），同时设word-break: break-word防止超长英文/URL 不换行 - 避免用
white-space: nowrap，否则中文也会被截断 - 如果用 Flex 布局包裹气泡，记得给气泡项加
align-self: flex-start，否则会被拉高对齐
左右对话气泡怎么区分样式又保持复用性
不用写两套完全独立的 class，用一个基础类 + 修饰类更可控。比如 chat-bubble 定义共用样式（圆角、内边距、字体），再用 chat-bubble--mine 和 chat-bubble--theirs 区分方向与颜色。
立即学习“前端免费学习笔记（深入）”；
-
chat-bubble--mine：背景蓝、文字白、三角在右、text-align: right -
chat-bubble--theirs：背景灰、文字黑、三角在左、text-align: left - 三角伪元素的
left/right值要配合方向调整，比如 mine 的::after用right: -12px，theirs 的::before用left: -12px - 别在伪元素里重复写颜色，用
inherit或currentColor继承父级背景色，减少维护成本
移动端适配时三角位置错乱或消失怎么办
主要原因是绝对定位依赖父容器 position: relative，而某些响应式框架（如 Bootstrap 的 .col）可能重置了定位上下文，或者 viewport 缩放导致像素计算偏差。
- 确保气泡容器有
position: relative，且没有祖先元素意外设置了transform（会创建新层叠上下文，干扰absolute定位） - 三角尺寸用
px比em更稳，8px 三角在 Retina 屏下也清晰；若需高清适配，可用@media (-webkit-min-device-pixel-ratio: 2)单独微调 - iOS Safari 对
::after的z-index处理有时异常，可给气泡容器加backface-visibility: hidden强制硬件加速，稳定图层顺序 - 真机测试时重点看气泡在不同输入法弹出键盘后的重排表现——很多“三角消失”其实是被键盘顶出视口，而非样式问题
气泡框看着简单，但三角对齐、文字截断、响应式定位这三处最容易反复调试；别省略 content: "" 和 position: relative 这两个看似琐碎的点，漏一个就全盘失效。
