border画箭头在高缩放下模糊，因斜边是抗锯齿栅格线条，像素对齐失效；svg方案最稳定，clip-path次之，需注意定位、z-index和圆角衔接。
为什么直接用 border 画箭头在高缩放下会模糊
用 border 技巧（比如 border-top: 10px solid #333 配合透明边框）生成三角形箭头时，斜边本质是 CSS 渲染的抗锯齿线条。当页面缩放或高清屏（dpr > 1）下，像素对齐失效，箭头边缘容易发虚、偏移甚至出现半像素色带。这不是 bug，是 rasterized rendering 的固有表现。
- 仅适用于静态尺寸、固定缩放比的场景
- 无法响应
em、rem或容器宽度变化 - 旋转后更难控制对齐，
transform: rotate()会加剧模糊
::before 里用 SVG 路径画箭头最稳
把箭头定义为内联 SVG，嵌入 ::before 的 content，就能完全脱离栅格渲染限制。SVG 是矢量，缩放、缩放、再缩放都锐利，且能用 em 单位自动跟随字体大小缩放。
实操写法：
.bubble::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath d='M0 0 L12 0 L6 6 Z' fill='%23333'/%3E%3C/svg%3E");
position: absolute;
top: 50%;
left: -6px;
width: 1em;
height: 0.5em;
transform: translateY(-50%);
}
-
viewBox定义坐标系，让width/height可用相对单位 - URL 编码必须处理
、<code>>、#、空格等字符（用%3C、%3E、%23） - 填色用
%23333而非#333，否则解析失败 - 若需适配深色模式，改用
fill="currentColor"，再通过父元素color控制
用 clip-path 实现纯 CSS 响应式箭头（不依赖 SVG）
如果必须纯 CSS，且要支持动态位置（比如气泡随内容宽度变，箭头需始终居中），clip-path 比 border 更可控。它裁出的形状是几何路径，不依赖像素边框渲染。
示例：右侧箭头，指向容器中间
.bubble::before {
content: "";
position: absolute;
top: 50%;
right: -12px;
width: 16px;
height: 16px;
background: #333;
transform: translateY(-50%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
-
clip-path: polygon()的坐标是百分比，天然响应容器尺寸 - 箭头大小由
width/height控制，方向靠top/right定位，居中靠transform: translateY(-50%) - 兼容性注意：IE 不支持，但 Chrome/Firefox/Safari 15.4+ 均已稳定支持
- 若需圆角箭头尖端，得叠加
border-radius+overflow: hidden，但会牺牲尖锐度
定位偏移和 z-index 容易被忽略的细节
气泡箭头常被遮挡或错位，问题多出在层叠上下文和定位基准上。
-
::before默认继承父元素的z-index，但若父元素没设position（如static），它会处于默认层叠顺序，可能被兄弟元素盖住——务必给气泡容器加position: relative - 用
top/left定位时，数值别写死成10px；改成calc(50% - 4px)或配合transform，避免因字体大小、行高变化导致偏移 - 若气泡用了
filter: drop-shadow()，::before也会被模糊——把阴影加在伪元素自己身上，或改用box-shadow避开 filter 影响范围
真正麻烦的是箭头与气泡圆角的衔接：当气泡 border-radius: 8px，箭头根部必须精确切进圆角起点，差 1px 就露白边。这时候往往得微调 transform 的偏移值，而不是硬改 top。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
