用::before或::after加position: absolute画箭头最稳妥，因无需额外DOM节点、语义干净，且能随气泡宽高/边框/圆角自动对齐；关键前提是气泡父容器必须设position: relative，否则箭头会相对于body等祖先定位而飘走。
为什么用 ::before 或 ::after 加 position: absolute 画箭头最稳妥
因为纯 CSS 箭头不需要额外 DOM 节点，语义干净，且能随气泡宽高、边框、圆角自动对齐。关键在于：伪元素必须设 position: absolute，且其父容器（气泡本身）需有 position: relative —— 否则 absolute 会相对于最近的定位祖先（可能是 body），导致箭头飘走。
常见错误现象：::after 箭头出现在页面左上角，或完全不可见——大概率是忘了给气泡加 position: relative。
- 箭头方向由
top/bottom/left/right+transform或 border 技巧控制 - 推荐用 border 法（兼容性好、无锯齿），不用 transform 旋转，避免高 DPI 下模糊
- 若气泡用了
box-shadow，箭头默认在阴影下方；如需盖住阴影，给伪元素加z-index: 1
用 border 法画三角形箭头的具体写法
核心是把一个 0 宽高的块，只设单边 border，其余三边 transparent，就能形成三角形。例如右向箭头：
.bubble::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -6px; /* 高度一半，用于垂直居中 */
width: 0;
height: 0;
border: 6px solid transparent;
border-left-color: #333; /* 指向右侧，只让左边框有色 */
}
要点：
-
margin-top: -6px是为了抵消 border 形成的三角高度（12px 高，半高即 6px），确保箭头尖对齐气泡中线 - 若气泡有
border-radius，箭头位置要避开圆角区域，通常top: 12px或top: 20px更安全（而非死磕 50%） - 箭头颜色必须和气泡背景色一致；若气泡用渐变或图片背景，border 法失效，得换
clip-path或 SVG
箭头贴边对齐时的偏移计算陷阱
当气泡靠右显示（如微信聊天对方消息），箭头需在左侧，此时用 right: 100% + top: 20px 定位，但容易忽略父容器 padding 或滚动容器的 offset。
典型问题：箭头明明写了 top: 20px，却离气泡顶部太远——因为气泡父元素有 padding-top: 10px，而 absolute 坐标是相对于父容器 content box 的，不是 padding box。
- 解决办法：统一用
top: calc(20px - 10px)扣除父级 padding，或把伪元素挂到气泡自身（已设relative），避免跨层计算 - 移动端 Safari 对
calc()在伪元素中的支持较弱，稳妥起见，优先把定位逻辑收束在气泡元素内部 - 如果气泡高度不固定（比如多行文字），别用
top: 50%，改用top: 12px这类绝对值，再配合max-height控制气泡高度范围
IE11 及以下不支持 ::after 在某些 inline 元素上的渲染
比如把气泡写成 <span class="bubble">…</span>，IE11 下 ::after 可能不显示。这不是 bug，是规范行为：inline 元素的伪元素在旧引擎中渲染受限。
应对方式很简单：
- 把气泡改为
display: inline-block或display: block，哪怕它视觉上仍是内联布局 - 若必须保持 inline 行为（如嵌套在段落中），加
vertical-align: top防止基线错位 - 不要试图用 IE 条件注释或 hack，现代项目基本可放弃 IE，但若真要兼容，
inline-block是最低成本解
真正麻烦的不是箭头画不出来，而是开发者花半小时调 z-index 和 transform，最后发现只是父容器少了个 position: relative。定位类效果，80% 的问题出在“谁是定位上下文”这个前提上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
