纯css气泡三角失效主因是定位上下文缺失或伪元素未渲染：气泡容器须设position: relative，伪元素必须有content: ""、position: absolute，且用border透明边框技法实现方向/大小/颜色控制。
纯 CSS 气泡框的三角形尖角，99% 的失效不是因为写法错，而是定位上下文缺失或伪元素未渲染——position: relative 必须加在气泡容器上，content: "" 一行不能少。
为什么 ::before 或 ::after 画的三角形总“飞走”
伪元素默认脱离文档流，但它的 top/left 是相对于**最近的已定位祖先**（即 position: relative/absolute/fixed）计算的。如果气泡容器没设 position: relative，它就可能往上找到 body 甚至 html，导致三角飘到页面左上角。
- 必须给气泡容器加
position: relative，不是父级、不是 body -
::before或::after必须有content: ""（引号不能省，也不能写成空格） - 伪元素需设
position: absolute，否则仍参与行内流，无法精确定位 - 若容器用了
display: flex或grid，老版 IE（如 IE9）可能错乱定位基准，建议降级为block
用 border 画三角形：方向、大小、颜色怎么配
三角形不是靠 width/height + background，而是靠四边透明边框“挤”出来的视觉交点。关键就三点：宽高为 0、单边有色、其余三边 transparent。
- 方向由哪条边有颜色决定：
border-top-color→ 向下箭头；border-bottom-color→ 向上；border-left-color→ 向右；border-right-color→ 向左 - 大小由
border-width控制：比如border-width: 6px，生成的三角底边约 12px 宽、高约 6px - 必须同时设
border-style: solid，dashed或dotted不生效 - 颜色要和气泡背景一致，建议用 CSS 自定义属性传值，比如
border-top-color: var(--bubble-bg)
三角尖端对不齐气泡边缘？微调这三处
常见“差 1–2px”的问题，往往不是坐标写错，而是忽略了盒模型细节和渲染基准。
- 三角伪元素的
top/left是以自身左上角为原点，不是尖端；想让尖端贴气泡底边，向下箭头得设top: 100%再加margin-top: -6px（假设border-width: 6px） - 如果气泡有
padding，三角应从内容区边缘出发，而不是 border 外缘；例如气泡padding: 12px，向下箭头的top应是100%，不是100% + 12px - 水平居中别只写
left: 50%，要用left: 50%; transform: translateX(-50%)，否则三角宽度变化时会偏移；但注意：IE11 及以下不支持transform在伪元素上，得改用left: calc(50% - 6px)
移动端和暗色模式下的隐藏坑
纯 CSS 气泡在手机上点一下就消失、在深色背景下变透明——这些都不是 bug，是设计限制。
-
:hover在 iOS Safari 上仅在首次点击后短暂触发，纯 CSS 气泡在移动端基本不可用；必须用 JS 切换类名（如.tooltip--active）配合pointer-events: auto - 高 DPR 屏幕下，
1px边框可能模糊，三角至少用2px起；奇数border-width（如5px）易半像素失焦，推荐偶数（6px、8px） - 暗色模式下，三角颜色不能写死；用
color-scheme: light dark配合@media (prefers-color-scheme: dark)覆盖，或直接绑定自定义属性 - 别给三角伪元素加
box-shadow——斜边会漏光；要用filter: drop-shadow()
最易被忽略的其实是三角和气泡圆角的配合：如果气泡 border-radius: 12px，而三角从顶部正中伸出，它的根部很可能悬在圆角切线之外，视觉上像“断开”。这时需要手动把 top 往下压 1–2px，让它真正“长进”圆角区域里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
