repeating-linear-gradient参考线错位主因是background-size未匹配网格单元尺寸或background-origin默认值干扰；应设精确px值、统一background-size、用伪元素实现穿透。
repeating-linear-gradient 画不出对齐的参考线？检查 background-size 和 background-origin
最常见的情况是线条错位、偏移半像素，或者横向竖向不对齐。根本原因不是渐变写错了，而是 background-size 没和网格单元尺寸严格匹配，或者 background-origin 被默认值拖累。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 明确设定
background-size，比如网格单元是20px，就写background-size: 20px 20px；不要用100% 100%或留空 - 加上
background-origin: border-box（或padding-box），避免边框/内边距干扰起点计算 - 如果容器有
border且没设background-origin，线条会从 border 外缘开始重复，视觉上整体右/下偏移 - 渐变色停点必须严格落在周期边界上，例如
repeating-linear-gradient(90deg, #ccc, #ccc 1px, transparent 1px, transparent 20px)—— 这里20px必须等于background-size的横向值
横向线和纵向线怎么同时加？别嵌套两个 background-image
很多人用两层 background-image 分别画横线和竖线，结果发现其中一组线总“浮起来”或对不齐。这是因为多背景图层的 background-size 和 background-position 是独立解析的，稍有偏差就会累积错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用一个
background-image同时定义横纵线：background-image: repeating-linear-gradient(0deg, #eee, #eee 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, #eee, #eee 1px, transparent 1px, transparent 20px); - 确保两个渐变的周期值一致（如都是
20px），且都对应同一个background-size: 20px 20px - 顺序不重要，但必须共用同一组
background-size值；CSS 不会为每个渐变单独解析 size - 避免混用
em、rem或百分比单位——全部用px，杜绝缩放/继承导致的隐性偏差
缩放页面时参考线模糊或断开？那是抗锯齿和 subpixel 渲染在捣鬼
不是代码有问题，是浏览器把 1px 线渲染成了 0.7px 或 1.3px，尤其在非整数缩放（如 110%、125%）下，repeating-linear-gradient 的硬边会被插值模糊，看起来像虚线或发虚。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把线宽设为
2px起步（比如#ccc 2px, transparent 2px, transparent 20px），比 1px 更耐缩放 - 加
image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（Chrome/Firefox），强制关闭平滑插值 - 不用
transform: scale()去“放大网格”，那只会放大模糊；真正要缩放，应直接改background-size值 - 如果必须响应式，用
clamp()控制background-size，例如background-size: clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px)
需要点击穿透到下层元素？pointer-events: none 不够用
网格线只是视觉参考，用户得能点到背后的按钮、输入框。只给伪元素或背景层加 pointer-events: none 很容易漏掉某些场景——比如背景画在父容器上，而子元素有 position: relative，事件仍可能被拦截。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把参考线做在伪元素上（
::before），而不是直接写在可交互容器的background里 - 伪元素必须设
pointer-events: none，且z-index低于内容层 - 如果用
background实现，确保该容器本身没有pointer-events: none，否则整个区域不可点；只需让背景“不抢事件”，CSS 本身做不到，必须换层 - 测试时用浏览器的“检查元素”工具悬停看事件目标，别凭感觉判断是否穿透
border-radius、transform、或者嵌在 flex/grid 子项里时，background-origin 和坐标系会悄悄变。这时候宁可拆成伪元素 + 绝对定位，也别硬调 background-position 去凑。 
