用linear-gradient实现条纹本质是控制色标位置使相邻色标紧邻或重叠，如to bottom,#fff 50%,#000 50%；repeating-linear-gradient可做等距网格，需统一background-size并用background-blend-mode优化叠加效果。
background-image 用 linear-gradient 实现条纹
纯 CSS 渐变做条纹，本质是让颜色在极短距离内切换，形成视觉上的硬边。关键不是“画线”，而是控制 linear-gradient 的色标位置，让两个相邻色标紧挨着甚至重叠。
- 水平条纹：用
linear-gradient(to bottom, #fff 50%, #000 50%)，两个色标同值即产生硬切 - 1px 高条纹：设背景尺寸为
100% 2px，其中 1px 白、1px 黑，重复铺满 - 别写
linear-gradient(#fff, #000)——这会平滑过渡，不是条纹 - Firefox 对
repeating-linear-gradient的起始偏移支持更稳，Chrome 有时在缩放下出现 1px 错位
repeating-linear-gradient 做等距网格线
网格 = 横条纹 + 竖条纹叠加，但直接叠两层 linear-gradient 容易糊成灰。用 repeating-linear-gradient 分别定义 X/Y 方向的周期性线条，再用 background-image 合并。
- 10px 间距网格：横线用
repeating-linear-gradient(to bottom, #ccc, #ccc 1px, transparent 1px, transparent 10px) - 竖线同理，方向改
to right，尺寸保持一致才对齐 - 必须设
background-size为相同值（如10px 10px），否则横竖周期错开 - 透明部分不能省：
transparent 1px是留空，transparent 10px才是完整周期
background-blend-mode 处理多层渐变冲突
当网格线颜色较浅、底色又不白时，直接叠加会发灰。用 background-blend-mode: overlay 或 multiply 能保留线条锐度，但得小心层级顺序和 base color。
-
overlay适合深底色上提亮线条，multiply适合浅底色上压暗线条 - 必须把线条层写在
background-image的前面，否则 blend 不生效 - 如果用了
rgba()却没效果，检查是否误加了background-color——它不参与 blend - IE 完全不支持
background-blend-mode，降级方案只能用单色网格 + box-shadow 模拟
高 DPI 屏幕下 1px 线条发虚
物理 1px 在 Retina 屏上被渲染为 2×2 像素，CSS 的 1px 渐变色标常被抗锯齿模糊。这不是 bug，是设备像素比导致的采样问题。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：把线条设为
2px宽，再用transform: scale(0.5)缩回视觉 1px（仅适用于固定容器） - 更稳做法：用
background-size匹配设备像素比，比如@media (-webkit-min-device-pixel-ratio: 2)下设20px 20px尺寸 - 别依赖
device-pixel-ratio媒体查询做全局切换——Safari 对它的解析有延迟，页面初加载可能闪动 - 真正要命的是动画中动态修改
background-size，某些安卓 WebView 会卡顿或重绘异常
