repeating-linear-gradient创建条纹背景需颜色停靠点紧邻重叠（如red 0, red 4px, blue 4px, blue 8px）、direction与background-size配对（如to right+background-size: 8px auto）、优先用百分比（0%, 50%, 50%, 100%）提升兼容性。
直接用 repeating-linear-gradient() 就能创建重复条纹背景，关键不是“能不能用”，而是“怎么写才不发虚、不断裂、不变成纯色”。核心就三点：颜色停靠点必须紧邻重叠、方向和 background-size 要配对、像素值不如百分比稳妥。
颜色停靠点必须“挨着写”，不能留空也不能错位
浏览器靠两个相邻停靠点数值完全相等来硬切颜色（比如 red 4px, blue 4px），中间不留过渡空间。一旦写成 red 4px, blue 5px，就会插值出模糊灰带；写成 red 0, blue 100%，整个单元可能被拉满，只剩一种颜色。
- ✅ 正确写法：
red 0, red 4px, blue 4px, blue 8px→ 红蓝各占 4px，周期 8px - ✅ 更推荐百分比：
red 0%, red 50%, blue 50%, blue 100%→ 适配缩放和高 DPR 屏幕 - ❌ 错误写法：
red 0, blue 10px或red 0%, blue 100%→ 单段渐变，无重复逻辑
方向与 background-size 的配合要反直觉
0deg 是从下往上（生成水平条纹），90deg 或 to right 是从左往右（生成垂直条纹）。而 background-size: A B 中，A 控制水平方向重复密度，B 控制垂直方向——它缩放的是整个重复单元，不是单个色带。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 要做水平红白条纹（每条高 20px）：
repeating-linear-gradient(0deg, red 0, red 20px, white 20px, white 40px)+background-size: auto 40px - 要做垂直密条纹（每条宽 4px）：
repeating-linear-gradient(to right, #eee 0, #eee 4px, #ccc 4px, #ccc 8px)+background-size: 8px auto - Safari 对
90deg支持不稳定，生产环境建议统一用to right或to bottom
兼容旧浏览器：IE10–11 必须降级为 linear-gradient + background-size
IE 完全不支持 repeating-linear-gradient，但可以用普通 linear-gradient 模拟一个完整周期，再靠 background-size 控制平铺密度，效果一致。
立即学习“前端免费学习笔记（深入）”；
- ✅ IE 友好写法：
background: linear-gradient(to bottom, #e0e0e0 0%, #e0e0e0 10px, #ffffff 10px, #ffffff 20px); background-size: auto 20px; - ⚠️ 注意：IE10+ 不支持 HSLA 中带空格的写法，如
hsla(0, 0%, 0%, 0.5) 0%会失效，要写成hsla(0,0%,0%,0.5) 0% - 别漏掉
background-repeat: repeat，某些 reset CSS 会把它设为no-repeat
细条纹看不见？先排查容器和渲染问题
2px 条纹在 Retina 屏上可能被渲染为 1.5px，边缘发虚；或者容器高度为 0，根本没空间画。
- 加
min-height: 20px排查是否容器塌陷 - 细条纹优先用百分比定义停靠点（
0%, 50%, 50%, 100%），再用background-size控制整体缩放 - 斜向条纹慎用
45deg；更稳的做法是用to right或to bottom+transform: rotate(45deg)整体旋转容器（注意溢出和布局影响）
