如何用CSS background-image绘制CAD风格均匀无缺失的网格

你当前实现的问题出在使用百分比作为渐变步长，当视图缩放或容器尺寸变化时，百分比对应的实际像素值为非整数，浏览器亚像素渲染会导致线条粗细不均，缩放到一定比例时多个步长被压缩到单个像素内就会出现线条消失的问题，以下是可行的实现策略：

• 方案1：固定单位重复渐变实现
  这个方案改动最小，直接替换原有背景实现即可：

background-image:
  repeating-linear-gradient(
    to bottom,
    #BADFEB 0 1px,
    transparent 1px 100%
  ),
  repeating-linear-gradient(
    to right,
    #BADFEB 0 1px,
    transparent 1px 100%
  );
background-size: 1em 1em;
/* 保证线条锐利，避免缩放模糊 */
image-rendering: crisp-edges;

该方案通过固定1px线宽+1em边长的background-size严格匹配你需要的1em网格tile规格，所有线条默认粗细一致。

• 方案2：SVG矢量背景实现
  如果需要更好的缩放适配能力，优先选择矢量SVG背景，不受像素渲染限制，缩放多少倍都不会出现线条变形或消失：

background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0V1M0 1H1' stroke='%23BADFEB' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
background-size: 1em 1em;
image-rendering: crisp-edges;

这里给SVG路径加了vector-effect='non-scaling-stroke'属性，保证线条宽度不会随SVG缩放变化，始终保持1px粗细，完全符合CAD软件的网格显示逻辑。

• 缩放场景适配优化
  如果你的3D查看器支持缩放操作，可以通过JS同步当前缩放比例到CSS变量，动态调整线宽避免缩小时线条消失：

/* 假设--zoom是JS同步的缩放倍率，小于1时为缩小状态 */
stroke-width: clamp(0.8px, 1px / var(--zoom), 3px);
/* 渐变方案也可以用CSS变量调整线宽 */
repeating-linear-gradient(
  to bottom,
  #BADFEB 0 calc(clamp(0.8px, 1px / var(--zoom), 3px)),
  transparent calc(clamp(0.8px, 1px / var(--zoom), 3px)) 100%
)

• 3D场景额外优化
  作为3D平面的网格，添加以下属性避免渲染异常：

will-change: transform;
transform: translateZ(0);
/* 避免和其他平面重叠出现闪烁 */
backface-visibility: hidden;

内容的提问来源于stack exchange，提问作者Fredo Corleone