纯CSS可用radial-gradient实现重复圆点背景，通过设置circle形状、透明度硬切（如50%处）、background-size控制间距，避免图片带来的HTTP请求、缩放失真、DPR模糊及主题同步问题；多色叠加需逗号分隔多个渐变并配对background-size。
纯 CSS 就能实现圆点背景，不需要图片、不用 JS，关键是用 radial-gradient 拼出重复的单个圆点，再用 background-size 控制间距。
为什么不用 background-image 引入 dot.png
引入小图看似简单，但实际会带来几个隐性问题：HTTP 请求增加、缩放失真、DPR（如 Retina 屏）下模糊、主题切换时颜色难同步。而 radial-gradient 是矢量生成，天生适配所有分辨率，颜色和透明度可直接用 CSS 变量控制。
核心思路是让一个极小的径向渐变（比如 4px 宽高内画一个 2px 圆）平铺成网格——这比「画一个大圆再裁剪」更轻量、更可控。
- 每个圆点本质是
radial-gradient(circle, #000 0%, #000 50%, transparent 50%, transparent 100%) -
50%处硬切是为了边缘锐利；若要柔边，把50%改成45%并让透明从45%渐变到55% - 必须设
background-size，例如20px 20px表示每 20px 出现一个新圆点 - 推荐加
background-repeat: repeat（虽是默认值，但显式写出更防意外）
一行代码搞定基础波点背景
下面这段可以直接复制进样式表，作用于任意块级元素：
立即学习“前端免费学习笔记（深入）”；
background: radial-gradient(circle, #333 0%, #333 50%, transparent 50%, transparent 100%); background-size: 16px 16px;
效果是深灰实心圆点，直径约 8px，横向纵向间距 16px。如果想调疏密，只改 background-size 两个值；想调大小，改渐变里第一个 50% 对应的半径比例（比如写成 40% 圆就更小）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
注意：别漏掉 transparent 50%, transparent 100% 这段——少了它，浏览器会自动补全为 transparent 100%，导致圆边缘虚化过度、点与点之间连成灰雾。
多色/双层圆点背景怎么叠加
单层 radial-gradient 只能一种颜色；要实现「大灰点 + 小白点」这类经典波点，得用逗号分隔多个渐变，按顺序堆叠：
background: radial-gradient(circle, #fff 0%, #fff 30%, transparent 30%, transparent 100%), radial-gradient(circle, #666 0%, #666 50%, transparent 50%, transparent 100%); background-size: 40px 40px, 12px 12px;
关键规则：
- 上面的渐变在下层，下面的在上层（类似图层顺序）
- 每个渐变独立配自己的
background-size，用逗号分隔 - 两组尺寸数值必须一一对应，否则第二组 size 会被忽略
- 如果某层想偏移位置，可用
background-position: 5px 5px, 0 0单独控制
圆点对不齐？检查这三个地方
常见错位现象：圆点看起来歪斜、横竖间距不等、靠近容器边缘时被截断。根本原因往往不是渐变写错了，而是布局干扰：
- 父容器有
padding或border，且没设box-sizing: border-box→ 圆点起始位置偏移 - 用了
background-attachment: fixed→ 滚动时圆点相对视口固定，造成“错位幻觉” -
background-origin被设成content-box或border-box→ 改成默认的padding-box即可对齐
最稳妥写法是显式重置：
background-origin: padding-box; background-clip: padding-box;
圆点背景真正的复杂点不在写法，而在「如何让圆点在响应式容器中保持视觉密度一致」——background-size 用 px 在移动端会太密，改用 vw 又难精确控制。这时候就得引入 @container 查询或 JS 动态计算，但那已是另一层问题了。
