CSS如何让背景色呈现点阵色彩分布_利用radial-gradient背景重复-css教程-PHP中文网

正确做法是用 radial-gradient(circle at 50% 50%, transparent 0%, #000 0%, #000 2px, transparent 2px) 配合 background-size: 20px 20px 实现等距居中点阵，色标需同位置硬切防模糊，css 变量和响应式单位提升复用性。

css如何让背景色呈现点阵色彩分布_利用radial-gradient背景重复

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之间会渐变过渡，点就糊了。必须让颜色在单像素内突变。

正确写法是两个相同位置的色标，强制硬切：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

错误：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 组合