如何实现CSS中repeating-linear-gradient的重复颜色渐变效果？

本文共计993个文字，预计阅读时间需要4分钟。

由于没有理解‘重复单元’的长度逻辑：

实操必须显式控制单次循环长度：

• 写法要带长度单位，例如 repeating-linear-gradient(to right, red 0px, red 10px, blue 10px, blue 20px)，明确告诉浏览器「20px 是一个完整周期」
• 所有色标位置必须用绝对长度（px、em 等），不能混用百分比和长度，否则行为不可控
• 首尾色标位置必须严格对齐，比如 red 0px 和 red 20px 才能形成无缝衔接；若写成 red 0px, blue 15px, red 20px，最后 5px 就是空白或裁剪

怎么让 repeating-linear-gradient 和 background-size 配合好？

background-size 控制的是「单个重复图案块」的尺寸，不是整张背景图。很多人以为设 background-size: 40px 就能让渐变每 40px 重复一次，结果发现纹路错位——其实是渐变自身的周期长度和 background-size 没对齐。

关键原则：渐变周期长度必须等于 background-size 值，否则会出现缩放拉伸或截断：

立即学习“前端免费学习笔记（深入）”；

• 如果渐变定义为 repeating-linear-gradient(45deg, #000 0px, #000 2px, transparent 2px, transparent 4px)，那它的自然周期是 4px，background-size 就得设成 4px 4px
• 若想放大到 20px 一格，两个办法：改渐变里的长度（全换成 0px/5px/5px/10px…），或直接用 background-size: 20px 20px 并确保渐变周期是 20px 的约数（比如周期设为 5px）
• 注意：CSS 会先画满渐变周期，再按 background-size 裁切平铺，所以周期 > background-size 会导致图案被硬切，边缘露白或色块突变

repeating-linear-gradient 在 Safari 里不生效或错位？

Safari（尤其 iOS 15–16）对 repeating-linear-gradient 的解析更严格，常见报错是 Invalid property value 或渲染成纯色，根源多在单位缺失或语法松散。

兼容性避坑点：

• 角度必须带单位，45deg 可以，45 不行；方向关键词如 to right 没问题，但别混用（如 to right 45deg 是非法的）
• 所有颜色停止点必须有明确位置，不允许 red, blue 这种无位置写法；至少写成 red 0%, blue 100% 或带 px 的绝对定位
• 旧版 Safari 不支持多层渐变叠加时用 repeating-linear-gradient 做其中一层，建议单独抽成 class，避免和其他 linear-gradient 写在同一 background-image 值里

用 repeating-linear-gradient 实现细线网格，为什么线太粗或模糊？

本质是像素对齐问题：CSS 渐变在非整像素边界渲染时会抗锯齿，细线（尤其是 1px）容易发虚、变灰、甚至消失。

真正有效的细线写法要卡死像素边界：

• 用 px 单位，且起止位置严格对齐，例如画垂直线：repeating-linear-gradient(90deg, #000 0px, #000 1px, transparent 1px, transparent 2px)
• 避免用 % 或 em 定义 1px 级别的线，它们在缩放或字体变化时会失准
• 如果容器宽高不是偶数像素，或用了 transform: scale()，线会模糊——这时得配合 image-rendering: pixelated 或改用 SVG

渐变重复效果的精度，永远取决于你写的数字是否和设备像素对齐，而不是函数本身有多“智能”。