气泡小三角用 border 是因纯 css、零 dom、兼容性好；原理是宽高为 0 时仅设单边有色 border，其余透明；伪元素定位需手动微调尖端坐标，避免 transform 居中；暗色模式需显式重写 border-color。
气泡小三角为什么用 border 而不是 clip-path 或 SVG？
因为 border 构造三角形是纯 CSS、零额外 DOM、无 JS 依赖，且在所有现代浏览器中渲染一致。而 clip-path 在 Safari 旧版本中支持不稳，svg 需要额外标签和坐标计算，响应式缩放时容易错位。
核心原理是：把一个元素的宽高设为 0，只给某一边的 border 设颜色和宽度，其余三边设透明或 transparent，利用 border 交汇处的斜角自然形成三角形。
-
border-top有颜色 + 其余三边transparent→ 向下指的三角 -
border-bottom有颜色 → 向上指 -
border-left有颜色 → 向右指 -
border-right有颜色 → 向左指
怎么让三角精准对齐气泡框边缘？
常见错误是直接把三角元素放在气泡内部，导致位置漂移或遮挡内容。正确做法是三角作为伪元素（::before 或 ::after），用绝对定位脱离文档流，并通过 top/left 手动微调。
关键点在于：三角的尖端坐标必须和气泡边框交点重合。例如气泡右上角带向下三角，三角伪元素应设 top: -8px（负值抵消自身高度）、right: 12px（水平对齐到气泡右侧内边距位置）。
立即学习“前端免费学习笔记（深入）”；
- 三角尺寸由
border-width决定，比如border-width: 6px 6px 0 6px→ 底边宽 12px，高 6px - 若气泡有
border-radius，三角不能圆角，需确保其顶点落在圆角切线之外，否则视觉上会“悬空” - 不要用
transform: translate()居中——它会触发重绘，且在高 DPR 屏幕下可能模糊
::before 和 ::after 选哪个？会不会影响可访问性？
选哪个取决于 DOM 结构意图：::before 更适合“前置装饰”，比如气泡左侧的小图标+三角；::after 更常用于“附加提示”，比如右上角关闭按钮旁的三角。两者对屏幕阅读器都默认不可见，只要不加 aria-hidden="false" 就不会干扰语义。
但要注意：如果三角承担了功能（比如点击展开），就不能只靠伪元素实现，必须用真实元素并加上 role="button" 和键盘事件支持。
- 伪元素无法绑定
click事件，监听必须挂在父容器上 - 用
content: ""是必须的，否则伪元素不渲染 - 若父容器用了
overflow: hidden，三角可能被裁剪——此时要给父容器加padding留出空间，而不是靠z-index强行提层
移动端适配时三角突然变大或偏移？
根本原因是 border-width 是绝对单位（如 px），在高 DPR 设备（如 iPhone）上会被系统放大。解决方案不是换 rem，而是统一用 px 并配合 transform: scale(0.5) 做物理像素级还原，或者更稳妥地改用视口单位：
/* 推荐：用 vw 控制三角大小，保持比例 */
.bubble::after {
border-width: 0.3vw 0.3vw 0 0.3vw;
}另一个坑是 iOS Safari 对 position: absolute 在 transform 容器内的定位解析异常，若气泡父元素用了 transform: translateZ(0)，三角可能错位。此时需将三角伪元素提到更高层级的、未 transform 的祖先上。
真正麻烦的是暗色模式下三角颜色没同步变——border-color 不会自动响应 @media (prefers-color-scheme: dark)，必须显式重写。
