repeating-linear-gradient生成条纹需确保颜色停靠点首尾相接且总长等于重复周期，如0%,10px,10px,20px；必须配合background-size（值同周期）和background-repeat:repeat使用。
repeating-linear-gradient 怎么写才出条纹
直接用 repeating-linear-gradient 生成条纹，核心是控制「重复单元」的长度和颜色停靠点。它不是画一条线再复制，而是定义一个渐变片段，浏览器自动平铺——所以停靠点加起来必须等于重复长度，否则会留白或重叠。
常见错误：把两个颜色停靠点设成 0%, 10px, 10px, 20px，结果条纹模糊或断开。这是因为中间没有“硬切”，渐变默认过渡。要硬边条纹，相邻颜色停靠点必须完全重合（比如 0%, 10px, 10px, 20px 是对的），且总长等于重复周期。
- 水平条纹：用
to bottom，高度方向设周期（如20px） - 垂直条纹：用
to right，宽度方向设周期 - 斜条纹：角度如
45deg，周期按实际视觉间距估算（通常比直角大 1.4 倍）
为什么 background-size 必须配 repeat
repeating-linear-gradient 本身不指定尺寸，只定义“一个格子长啥样”。浏览器默认把它当背景图平铺，而平铺行为由 background-size 和 background-repeat 共同决定。漏掉 background-size，条纹会按元素尺寸拉伸，失去规律；设了但没配 repeat，可能只显示一个单元。
典型配置组合：
立即学习“前端免费学习笔记（深入）”；
background: repeating-linear-gradient(90deg, #000, #000 2px, transparent 2px, transparent 4px);-
background-size: 4px 4px;← 这个值必须和渐变里最后的停靠点一致（这里是4px） -
background-repeat: repeat;← 显式声明，避免被 reset CSS 覆盖
条纹太细/发虚？检查设备像素比和抗锯齿
在高 DPI 屏幕（如 MacBook Retina、安卓旗舰）上，1px 条纹容易被浏览器抗锯齿柔化，看起来像 1.5px 灰边。这不是代码错，是渲染机制。
解决思路有限但有效：
- 把最小单位提到
2px（如#000 2px, transparent 2px），视觉更稳 - 用
transform: scale(0.5)配合transform-origin模拟物理像素，但会缩放整个元素 - 接受它——多数设计系统（如 Ant Design）的斑马纹都用 2px 起步，就是为兼容性妥协
别试 image-rendering: pixelated，它对渐变无效。
和 background-image: linear-gradient 混用时的叠加顺序问题
如果同时用了 linear-gradient（比如做遮罩）和 repeating-linear-gradient，注意 CSS 多层背景是从“前到后”堆叠的，即逗号最左边的图层在最上。条纹常被误写在后面，结果被盖住。
正确写法示例（条纹打底 + 半透色罩）：
background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), repeating-linear-gradient(0deg, #eee, #eee 2px, transparent 2px, transparent 4px);
这里 linear-gradient 写在前面，所以它盖在条纹上。如果调换顺序，就看不到条纹了。
另外，所有层共享同一个 background-size 和 background-position，除非用 CSS 层叠语法显式拆分（较复杂，日常少用）。
条纹这事，参数看着简单，但每个数字都卡着渲染逻辑。调的时候盯着 DevTools 的 computed 样式看 background-size 和渐变字符串是否对得上，比猜快得多。
