用border画三角形最稳，因不依赖伪元素、不触发重排、高dpi下不糊；伪元素在移动端易定位漂移、缩放发虚、ios safari偶发空白。
移动端消息气泡的尾巴，用 border 绘三角形最稳——不依赖伪元素、不触发重排、缩放和高 DPI 下也不糊。
为什么不用 ::after 画尾巴？
伪元素方案在移动端容易出三类问题：定位漂移（position: absolute 在某些安卓 WebView 里计算不准）、缩放后边缘发虚（transform: scale() 放大时像素对不齐）、以及 iOS Safari 中 content: "" 偶发渲染空白。而纯 border 方案只靠两个 div + 四条边框，渲染路径更短，兼容性覆盖到 iOS 10+ 和 Android 6+ 的所有主流 WebView。
- 尾巴必须是独立 DOM 节点（比如
<span class="bubble-tail"></span>），不能塞进气泡内容里 - 气泡容器必须设
position: relative，尾巴节点设position: absolute - 尾巴的
top/left值要减去自身 border 宽度的一半，否则尖端会偏移 1px
border 画三角形的方向控制规则
方向错一个，尾巴就朝反了。关键不是“哪边有颜色”，而是“顶点在哪”——顶点由三条透明边交汇形成，有色边决定朝向。
- 尾巴朝右 → 顶点在左 → 用
border-left-color，其余三边transparent - 尾巴朝左 → 顶点在右 → 用
border-right-color - 尾巴朝下 → 顶点在上 → 用
border-top-color - 尾巴朝上 → 顶点在下 → 用
border-bottom-color
例如朝右的尾巴：.tail-right { width: 0; height: 0; border: 8px solid transparent; border-left-color: #007AFF; }
移动端适配的关键细节
PC 上能跑通的尺寸，在手机上常会变小或错位。核心原因是 viewport 缩放和设备像素比（dpr）影响了 border 渲染精度。
- 别用固定
px值写border-width，改用rem或em（比如border-width: 0.5rem），让尾巴随根字号缩放 - 尾巴的
top/left建议用calc(50% - Xpx)，X 是 border-width 值，避免硬编码偏移 - 加
backface-visibility: hidden到尾巴节点，防止某些安卓机型出现闪烁 - 如果气泡带
box-shadow，尾巴必须和气泡同层（z-index 一致），否则阴影会盖住尾巴
带描边的尾巴怎么实现？
单层 border 无法同时表现填充色和描边色。得叠两层三角形：外层稍大、描边色；内层略小、填充色，并用 top/left 微调露出外层边缘。
例如 1px 描边的朝右尾巴：
.tail-outline {
width: 0;
height: 0;
border: 9px solid transparent;
border-left-color: #B9DAFF; /* 描边色 */
}
.tail-fill {
position: absolute;
top: 1px; /* 往下压 1px，露出上方描边 */
left: 1px; /* 往右压 1px，露出左侧描边 */
width: 0;
height: 0;
border: 8px solid transparent;
border-left-color: #DEF4FF; /* 填充色 */
}
这个手法在微信、钉钉等 App 的 H5 消息页里被大量验证过，iOS 和安卓都无兼容问题。
最容易被忽略的是：尾巴节点的 width 和 height 必须显式设为 0，哪怕父容器用了 display: flex，否则某些低端安卓机的渲染引擎会把它当成 inline 元素撑开高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
