气泡箭头错位或消失因 border 三角形依赖宽高为0、四边框不等且颜色分明，受 overflow: hidden、文档流、transform 等影响；ie11 下需最小8px边框、禁用 subpixel、加 font-size: 0；响应式缩放宜用 vw/vh 或 transform 反向缩放；多方向复用应统一 ::after 绘制箭头，方向类仅控定位与边框色，且箭头色须与气泡背景严格一致。
气泡箭头用 border 实现时，为什么总错位或消失？
因为 border 箭头本质是利用三角形 trick，依赖元素宽高为 0、四边 border 宽度不等且颜色分明。只要父容器有 overflow: hidden、箭头元素没脱离文档流、或用了 transform 但没配 will-change，就容易裁切或模糊。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 箭头容器必须设
width: 0; height: 0;，只靠border构成形状 - 用透明边框 + 单色边框组合，比如
border: 10px solid transparent; border-top-color: #333;生成向下指的黑三角 - 避免在箭头元素上直接设
padding或margin，改用top/left配合position: absolute微调位置 - 若气泡本身有圆角，箭头尖端要对齐
border-radius起始点，通常需把箭头top值设为100%或-10px（取决于方向）
IE11 下 border 箭头边缘发虚或锯齿怎么办？
IE11 渲染 border 三角时抗锯齿策略不同，尤其当箭头尺寸小（≤6px）或用了 subpixel 定位时，容易出现半像素模糊。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 箭头最小用
8px边框，避开 IE 对7px及以下的异常渲染 - 禁用
transform: scale(0.99)类微调，IE 下会加剧模糊；改用整数top/left偏移 - 给箭头容器加
font-size: 0;，防止某些 IE 版本因行高干扰border几何中心 - 如必须兼容，可对 IE11 单独用 SVG 箭头回退，通过
@supports not (border: 1px solid) {}或 UA 检测切换
响应式气泡里，border 箭头怎么随尺寸等比缩放？
border 本身不支持百分比单位，硬写 border: 5% solid transparent 无效，所以不能靠 CSS 自动缩放，得换思路。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
vw/vh单位替代 px，例如border: 0.5vw solid transparent;，但注意最小值限制（可用clamp()） - 更稳的方式：气泡整体用
transform: scale()，同时给箭头加反向缩放，比如气泡scale(1.2)，箭头scale(0.833) - 如果用 CSS 自定义属性控制尺寸，记得箭头的
border-width必须和气泡font-size或width联动，例如--arrow-size: 8px;，然后border: var(--arrow-size) solid transparent; - 别忘了
transform-origin设为箭头尖端所在侧，否则缩放后偏移失控
多个方向气泡共存时，border 箭头的 class 命名和复用陷阱
写 .tooltip--top::after、.tooltip--right::after 看似清晰，但每个方向要重复写四组 border 和定位，维护成本高，且容易漏掉某方向的 z-index 层级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用一个
::before画气泡主体，::after专画箭头，通过content: ""+position: absolute分离关注点 - 方向类名只控制
top/left/bottom/right和border颜色/透明组合，比如.tooltip--top .tooltip__arrow设border-bottom-color，其余三边透明 - 避免用
display: none隐藏不用的箭头，改用opacity: 0; pointer-events: none;，防止布局重排 - 箭头必须设
z-index: 1（高于气泡背景但低于文字），否则在复杂层叠场景下会被盖住
最易被忽略的是：箭头的 border-color 必须和气泡背景色严格一致，哪怕差一个 alpha 值，在高缩放或 Retina 屏下都会露出细缝。别信“肉眼看不出”，放大 300% 就露馅。
