CSS双线性渐变网格背景线条粗细不一致问题求助

以下是几个针对性的修复方案，你可以逐个尝试：

1. 让渐变线条对齐像素网格 #

亚像素渲染是导致线条模糊、粗细不一的核心原因，通过调整背景位置让线条落在像素中心，避免浏览器半透明采样：

background-image: 
  linear-gradient(to right, black 1px, transparent 0%), 
  linear-gradient(to bottom, black 1px, transparent 0%);
background-size: 22px 22px;
background-repeat: repeat;
background-position: 0.5px 0.5px; /* 偏移0.5px让线条对齐像素中心 */

2. 改用反向渐变写法 #

把线条放在每个格子的末尾，避免起始位置的亚像素计算问题：

background-image: 
  linear-gradient(to right, transparent calc(100% - 1px), black calc(100% - 1px)),
  linear-gradient(to bottom, transparent calc(100% - 1px), black calc(100% - 1px));
background-size: 22px 22px;
background-repeat: repeat;

3. 开启GPU加速优化渲染 #

通过transform触发硬件加速，让浏览器使用更精准的GPU渲染管线：

.your-element-class {
  background-image: linear-gradient(to right, black 1px, transparent 0%), 
                    linear-gradient(to bottom, black 1px, transparent 0%);
  background-size: 22px 22px;
  background-repeat: repeat;
  /* 添加GPU加速属性 */
  transform: translateZ(0);
  will-change: background;
}

4. 强制像素化渲染规则 #

使用image-rendering属性让浏览器以像素化方式渲染背景，避免平滑插值：

.your-element-class {
  /* 原有背景代码 */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges; /* Firefox 兼容 */
  image-rendering: crisp-edges;
}

5. 替代方案：使用CSS Grid实现网格 #

如果渐变方案始终有问题，可以改用CSS Grid模拟网格，渲染稳定性更高：

.your-element-class {
  display: grid;
  grid-template-columns: repeat(auto-fit, 22px);
  grid-template-rows: repeat(auto-fit, 22px);
  position: relative;
}
.your-element-class::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#000 1px, transparent 1px) 0 0 / 22px 22px;
  pointer-events: none;
}
.your-element-class::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000 1px, transparent 1px) 0 0 / 22px 22px;
  pointer-events: none;
}

注意事项 #

• 确保元素没有被意外缩放（比如父元素的transform: scale()），即使宽高是22px倍数，缩放也会导致亚像素问题。
• 不同浏览器的渲染引擎处理方式有差异，建议优先尝试前两种方案，兼容性更好。

内容的提问来源于stack exchange，提问作者T. F.