用 background-image 叠加多个渐变可高效实现点阵效果：横向与纵向 linear-gradient 交叉形成网格点，或改用 radial-gradient 得实心圆点；background-size 需设相同固定像素值（如 20px）确保对齐，避免 dpr 导致的模糊；配合 background-origin/clip 锚定起点，媒体查询分段控制响应式密度。
用 background-image 叠加多个渐变实现点阵效果
点阵本质是周期性重复的视觉单元，CSS 里最轻量的做法不是画 SVG 或 Canvas，而是用 linear-gradient 拼出单个“点”或“格”，再靠 background-size 控制密度。关键在两个渐变：一个做横向线，一个做纵向线，叠加后自然交出网格点。
- 横向线用
linear-gradient(to right, #000 1px, transparent 1px)，1px 黑线 + 透明间隙；纵向同理但方向为to bottom -
background-size必须设为相同值（如20px 20px），否则横纵节奏错位，点就糊了 - 别用百分比或
em做background-size，缩放时会失真；固定像素最稳 - 如果要实心圆点而非十字交点，把两个渐变都改成
radial-gradient(circle at 50% 50%, #000 1px, transparent 1px)，再用background-size调间距
避免 repeating-linear-gradient 的常见错位
很多人直接写 repeating-linear-gradient 想一步到位，结果发现线条总偏 0.5px、边缘断开、或者在 Retina 屏上发虚——根本原因是它默认从元素左上角开始平铺，而 CSS 像素和设备像素比（dpr）不匹配时，1px 线可能被渲染成 0.7px，抗锯齿一糊就看不见。
- 强制对齐：加
background-origin: border-box和background-clip: border-box，确保起点锚定在盒子边界 - 绕过 dpr 问题：把单位从
px换成px的整数倍（比如2px宽线配4px间隔），或用calc(1px * 1)这类 trick 让浏览器重算 - 调试技巧：临时加
background-color: rgba(255,0,0,0.1)，看底色是否被完全覆盖——漏色说明有缝隙
合成背景时 background-blend-mode 的取舍
想让点阵和底层渐变融合出纹理感？background-blend-mode 确实能做，但得小心它的兼容性和性能代价。Chrome/Firefox 支持好，Safari 15.4+ 才稳定支持 multiply 等模式，且开启后会禁用部分 GPU 加速。
- 优先用
overlay或soft-light，比multiply更柔和，对底色明暗容忍度高 - 如果底层是纯色，其实不需要 blend mode——直接调点阵颜色的透明度（
rgba(0,0,0,0.2)）更省资源 - 千万别在动画中动态改
background-blend-mode，触发全层重绘，帧率会掉
响应式点阵必须用 background-size 配合媒体查询
用 vmin 或 rem 直接设 background-size 听起来聪明，实际会出问题：vmin 在宽屏下太小，点密得像噪点；rem 受字体大小影响，和视觉密度无关。真正可控的方式还是媒体查询分段。
立即学习“前端免费学习笔记（深入）”；
- 典型三档：
@media (max-width: 768px) { background-size: 12px 12px; }/ 平板 / 桌面逐级放大到24px - 如果用 JS 动态控制，读
element.getBoundingClientRect().width比读window.innerWidth更准，避免滚动条干扰 - 注意：Safari 对媒体查询里的
background-size切换有 1 帧延迟，加will-change: background-size可缓解
点阵密度和颜色对比度之间没有银弹公式，尤其在深色模式下，1px 黑点在 #121212 背景上几乎隐形——得实测，别信理论值。
