用 ::after 更稳妥——它默认在 ::before 之后渲染、不易被遮挡，且单独控制更干净；箭头元素必须 width: 0; height: 0，仅留一个方向 border-color 为实色；微调位置优先用 transform: translate() 配合 top/left。
弹窗箭头用 ::before 还是 ::after？
两个伪元素本质没区别，但用 ::after 更稳妥——它默认在 ::before 之后渲染，叠在上面不容易被遮住。如果弹窗本身有背景、阴影或圆角，::before 做箭头容易被自身 border-radius 切掉尖角，而 ::after 单独控制更干净。
常见错误：把箭头和弹窗写成父子关系，却忘了给父容器设 position: relative，导致 absolute 定位失效，箭头飘到页面左上角。
- 弹窗容器必须加
position: relative - 箭头伪元素设
position: absolute，再用top/left微调位置 - 避免给弹窗设
overflow: hidden，否则箭头可能被裁掉
border 画三角形时宽高为什么都得是 0？
靠 border 画箭头，本质是利用边框交汇处的斜角。只有当元素宽高为 0 时，四条边框才真正“挤”在一个点上，斜角才能形成清晰锐利的三角形。一旦设了宽高，边框就变成梯形或不规则四边形，箭头变胖、歪斜甚至消失。
典型翻车现场：width: 10px; height: 10px; + border: 8px solid transparent → 得到的是个带底边的钝角，不是箭头。
- 箭头元素必须
width: 0; height: 0 - 只留一个方向的
border-color为实色，其余为transparent - 比如向下箭头：设
border-top: 8px solid #333，其余三边border-xxx: 8px solid transparent
箭头位置偏移总对不准？关键看 transform 和定位值怎么配
用 top/left 硬调箭头位置，容易随弹窗尺寸、字体缩放或视口变化跑偏。更稳的方式是先用 top/left 把箭头“摆到大致区域”，再用 transform: translate() 做像素级微调——它不触发重排，且不受父容器 padding 或 border 干扰。
例如弹窗右上角带向左箭头，想让箭头尖对准目标元素中心：先设 right: -8px; top: 50%，再补 transform: translateY(-50%)，比死算 top: 24px 可靠得多。
- 水平居中箭头：用
left: 50%; transform: translateX(-50%) - 垂直居中箭头：用
top: 50%; transform: translateY(-50%) - 避免同时用
left和right挤同一个伪元素，浏览器计算可能出偏差
IE 下箭头模糊或错位怎么办？
IE（尤其 IE11）对 transform + absolute 的组合渲染不稳定，尤其是小尺寸箭头（border-width ≤ 6px）容易发虚或偏移 1px。这不是 bug，是亚像素渲染机制差异。
不用 hack 或 JS 适配，最简方案是：把箭头 border-width 统一设为偶数（如 6px、8px），并确保 transform 的偏移值也是整数（translateX(-6px) 而非 -6.5px）。
- 避开
border-width: 5px、7px这类奇数 - 禁用
transform: scale(0.99)类似抖动技巧，IE 会更糊 - 如果必须支持旧版 IE 且箭头极小，改用 SVG 内嵌更稳
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
