用 absolute 定位圆点时父容器必须设 position: relative，否则圆点会相对于 body 定位；border-radius: 50% 要求宽高相等才能成圆；微调位置优先用 top/right 等四方向偏移而非 transform；多圆点推荐用 box-shadow 实现光晕或双环效果，便于主题色统一维护。
用 position: absolute 放圆点，父容器必须设 position: relative
不设父级定位上下文，absolute 会一路往上找直到 body，圆点直接飘到视口左上角——这是最常踩的坑。
实操建议：
- 给包裹圆点的容器（比如一个
div.card）加position: relative，不加宽高也行，只要存在即可 - 避免用
position: static（默认值）或position: inherit的父元素作为定位参考 - 如果父容器本身是 flex 或 grid 容器，
relative依然要显式声明，不能依赖布局模式自动创建包含块
border-radius: 50% 要生效，得保证宽高等于
圆不是“画”出来的，是靠等宽高等比例缩放+全圆角“挤”出来的。宽高不等，结果就是椭圆，哪怕写了 50% 也没用。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 只设
width: 10px没设height，浏览器按内容撑开高度，变成扁豆形 - 用
em或rem设宽高但行高干扰，导致实际渲染高度不一致 - 父元素有
font-size: 0或line-height影响内联元素（比如span圆点）的基线对齐
稳妥做法：显式写死宽高，比如 width: 8px; height: 8px;，再加 border-radius: 50%。
用 top/right/bottom/left 微调位置比 transform 更轻量
装饰性圆点通常尺寸小、数量多（比如标签角标、状态指示），用 transform: translate() 会触发重排+重绘，而四方向偏移只走合成层（尤其配合 will-change: transform 时反而更重）。
使用场景对比：
- 固定偏移（如右上角 4px）：直接
top: 4px; right: 4px;，无性能损耗 - 需要动态居中（比如绝对居中一个圆点）：
top: 50%; left: 50%; transform: translate(-50%, -50%);不可少，但这是例外 - 动画位移：若要做平滑移动动画，
transform仍是首选，此时需权衡是否真需要动画
圆点颜色和透明度别靠 background 硬塞，优先用 box-shadow 叠加
单个圆点用 background 没问题，但多个同色圆点要统一换色时，就得批量改 CSS；更麻烦的是，想实现「带模糊边缘的光晕效果」或「多层同心圆」，纯 background 很难维护。
推荐写法：
- 基础圆点：
width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; - 带柔边光晕：
box-shadow: 0 0 4px 2px rgba(59, 130, 246, 0.4); - 双环效果（如在线状态）：
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #10b981;
这样所有视觉变化都集中在一条声明里，换主题色时只改 box-shadow 中的颜色值就行。
真正容易被忽略的是：圆点在高缩放比（如 150% DPI）或暗色模式下是否还清晰。别只盯着代码跑通，记得在真机或系统级缩放下瞄一眼像素是否糊、对比度够不够——装饰性细节，往往败在最后 1px 的渲染上。
