CSS点阵背景制作教程：radial-gradient重复应用

本文深入解析了如何用纯CSS精准制作清晰锐利的点阵背景，重点纠正常见误区——避免直接使用repeating-radial-gradient导致的错位与拉伸，转而采用手动定位圆心（circle at 50% 50%）、硬切色标（同位置双色标实现像素级突变）、配合精确background-size控制单元间距，并通过CSS自定义属性实现点大小、颜色、间距的灵活复用；同时针对高DPR屏幕提出rem/vw响应方案，强调每一个细节——从百分号缺失到空格误写——都可能让点阵失效或模糊，真正把“简单效果”背后的精密控制讲透。

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 适配都卡在几个数值的写法细节上。少一个 %，多一个空格，都可能让点消失或糊成一片。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS点阵背景制作教程：radial-gradient重复应用》文章吧，也可关注golang学习网公众号了解相关技术文章。