正确做法是用 radial-gradient(circle at 50% 50%, transparent 0%, #000 0%, #000 2px, transparent 2px) 配合 background-size: 20px 20px 实现等距居中点阵，色标需同位置硬切防模糊，CSS 变量和响应式单位提升复用性。
radial-gradient 重复铺满时圆心定位不准
直接用 repeating-radial-gradient 容易让点阵错位或拉伸，根本原因是默认圆心在元素左上角，且渐变尺寸按最近边计算。实际要的是等距、居中、不缩放的“点阵单元”。
关键做法是手动固定圆心和半径，用 radial-gradient(circle at 50% 50%, ...) 配合 background-size 控制单元大小：
- 把第一个色标设为透明（
transparent 0%），第二个设为实色（#000 2px），第三个立刻切回透明（transparent 2px），形成“小圆点” -
background-size设为点间距，比如20px 20px，这样每个渐变单元刚好平铺 - 必须加
background-repeat: repeat（虽然默认就是 repeat，但显式写上更稳）
background: radial-gradient(circle at 50% 50%, #000 2px, transparent 2px); background-size: 20px 20px;
点太虚、边缘发灰？检查色标硬停写法
浏览器对渐变过渡默认插值，如果写成 #000 0%, #000 2px, transparent 3px，2px→3px之间会渐变过渡，点就糊了。必须让颜色在单像素内突变。
正确写法是两个相同位置的色标，强制硬切：
立即学习“前端免费学习笔记（深入）”；
- 错误：
transparent 0%, #000 1px, transparent 2px→ 0→1px 插值变黑，1→2px 插值变透，边缘模糊 - 正确：
transparent 0%, #000 0%, #000 1px, transparent 1px→ 在 0% 瞬切黑，在 1px 瞬切透 - 点直径 = 第二个不透明色标位置 − 第一个不透明色标位置（如
#000 0%, #000 2px就是 2px 直径）
CSS 变量控制点大小/颜色/间距更灵活
硬编码尺寸和颜色不利于复用，尤其要响应不同密度或主题时。用自定义属性可解耦：
- 定义：
--dot-size: 2px; --dot-color: #333; --dot-spacing: 16px; - 渐变里用
var(--dot-color)和calc(var(--dot-size) * 1)（注意不能直接写var(--dot-size)在函数里，需包裹） - 实际常用组合：
background-size: var(--dot-spacing) var(--dot-spacing)
background: radial-gradient( circle at 50% 50%, var(--dot-color) 0%, var(--dot-color) calc(var(--dot-size) * 1), transparent calc(var(--dot-size) * 1) ); background-size: var(--dot-spacing) var(--dot-spacing);
高 DPR 屏幕下点被放大？别信 px
用 px 写死点大小，在 2x 屏上会变成物理 4px，显得粗笨。真正要的是“视觉上一致的微点”，得换单位。
- 用
rem或em：前提是根字体设为 1px（html { font-size: 1px; }），然后--dot-size: 2rem→ 实际就是 2px，且随缩放变化 - 更稳妥是用
vw/vh搭配媒体查询，比如@media (min-resolution: 2dppx) { --dot-size: 1px; } - 注意：Safari 对
repeating-radial-gradient的 DPR 处理有偏差，优先用单次radial-gradient+background-size组合
点阵效果看着简单，但每个点的位置、大小、边缘硬度、DPR 适配都卡在几个数值的写法细节上。少一个 %，多一个空格，都可能让点消失或糊成一片。
