用border画箭头而非svg或图片，因伪元素::before/::after不占dom节点，可零js、零资源实现单色实心三角，兼容ie8+；但不支持描边、渐变或圆角。
为什么用 border 画箭头而不是 SVG 或图片
因为伪元素（::before / ::after）本身不占 DOM 节点，配合 border 技巧能零 JS、零额外资源实现箭头，兼容性到 IE8 都行。但前提是：三角必须是单色、实心、无边框——一旦要描边、渐变或圆角，border 就撑不住了。
::before 箭头不显示的三个硬性条件
缺一不可，否则箭头会脱离容器乱飘：
- 气泡容器必须设
position: relative（不是父级，也不是body） - 伪元素必须写
content: ""（不能是空格，也不能省略引号） - 伪元素必须设
position: absolute
常见错误：只给内容区加 relative，却忘了包裹整个气泡的外层容器；或漏写 content: ""，导致伪元素根本不渲染。
不同方向箭头的 border 参数怎么配
方向由哪条边框有色决定，其余三边必须等宽且为 transparent。边框宽度统一用 px（比如 8px），避免缩放失真：
- 向下箭头：
border-top: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent;，配合top: 100%; left: 50%; transform: translateX(-50%); - 向上箭头：
border-bottom: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent;，配合bottom: 100%; left: 50%; transform: translateX(-50%); - 向右箭头：
border-left: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent;，配合right: 100%; top: 50%; transform: translateY(-50%); - 向左箭头：
border-right: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent;，配合left: 100%; top: 50%; transform: translateY(-50%);
注意：border: 8px solid transparent 是基础写法，不能拆成四个 border-* 单独写，否则部分浏览器会忽略透明边框的渲染逻辑。
箭头模糊、错位、被裁切的根源和对策
根本原因集中在定位和层级：
- 气泡容器没设
position: relative→ 箭头相对body定位，直接飘走 - 用了
transform: translate(-50%, -50%)居中 → 在某些安卓 WebView 里失效，且在高 DPI 屏上易发虚；应改用left: 50%; margin-left: -8px（假设边框宽 8px）或left: 50%; transform: translateX(-50%)（IE9+ 可用） - 气泡设置了
overflow: hidden→ 直接把伸出的箭头裁掉 - 响应式下箭头消失 → 媒体查询必须单独覆盖伪元素，例如
@media (max-width: 480px) { .bubble::after { right: 8px; } }
移动端点击热区小？给伪元素加 pointer-events: auto，再用 padding-right: 24px 撑开父容器点击区。真正难调的是箭头根部与 border-radius 的视觉冲突——建议手动微调 top 或 bottom 值，让尖端略向内收 1–2px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
