必须用两个伪元素才能做出「带边框」的箭头，因为单个::after的border三角只能设定一种颜色，无法同时呈现背景色与边框色；强行用多色border会被浏览器忽略或渲染异常，而::before画大边框色三角、::after画小背景色三角并精确偏移1px，才能可靠实现描边效果。
用 ::before 和 ::after 实现带边框的箭头，本质是叠两个三角——外层模拟边框色，内层填背景色，靠 1px 偏移制造描边效果。单层 ::after 只能做实心箭头。
为什么必须用两个伪元素才能做出「带边框」的箭头
单个 ::after 的 border 三角只能有一种颜色，无法同时表达「背景色 + 边框色」。强行用两层 border（比如 border: 1px solid #ccc; border-left-color: #333）在多数浏览器里会被忽略或渲染异常。
真正可靠的做法是：用 ::before 画一个稍大的边框色三角，再用 ::after 画一个略小、居中、同方向的背景色三角，两者 top/left 偏移差 1px。
-
::before的border-width设为 9px，border-top-color（举例：上箭头）设为边框色，其余三边transparent -
::after的border-width设为 8px，border-top-color设为气泡背景色 - 两者都用
position: absolute，且top和left完全一致；但::after需加margin-top: -1px或微调top，确保它精确盖住::before中心区域
::before 和 ::after 的定位必须严格同步，否则出现「双影」或露白边
常见错误是给两个伪元素分别写 top: 50% + transform: translateY(-50%)，结果因浏览器对 transform 的 subpixel 渲染不一致，导致错位 0.5px，在 Retina 屏上特别明显。
立即学习“前端免费学习笔记（深入）”；
正确做法是统一用像素值定位，并显式控制偏移关系：
- 父容器设
position: relative - 两个伪元素都设
top: 24px（举例：箭头尖端距顶部距离），left: 16px（举例：距左边缘） - 若箭头朝右，就用
right替代left，并保持两个伪元素的right值完全相同 - 禁用所有
transform，包括translate和scale，它们会破坏像素对齐
移动端点击热区小、iOS Safari 不响应 ::after 点击怎么办
伪元素默认 pointer-events: none，且 border 三角本身 width/height 是 0，导致触摸目标极小，iOS Safari 尤其敏感。
解决不是靠加 pointer-events: auto（它对 ::after 在部分 WebKit 版本中无效），而是从交互层反推布局：
- 给父容器加
padding-right: 24px（若箭头在右），让可点击区域自然延伸覆盖三角区域 - 把整个对话框容器设为
display: inline-block或display: flex，避免行内元素塌陷导致热区收缩 - 真机测试时，用
outline: 1px solid red临时检查实际点击热区范围
最易被忽略的一点：当气泡内容动态变化（比如文本换行、高度自适应），::before 和 ::after 的 top 值如果写死为固定像素，就会和内容脱钩。此时应改用 bottom 或 top 配合 transform: translateY() ——但仅限现代浏览器，且必须搭配 will-change: transform 防止重绘抖动。
