repeating-linear-gradient创建条纹背景必须确保颜色停靠点“紧邻重叠”（如#000 4px, #fff 4px）实现硬切，周期长度须与background-size显式匹配（如4px周期配background-size: 4px 4px），否则会发虚、断裂或变纯色；推荐用百分比单位提升兼容性。
repeating-linear-gradient 能直接生成条纹背景，但写错颜色停靠点或漏配 background-size，条纹就会发虚、断裂、变纯色，甚至根本看不见。
颜色停靠点必须“紧邻重叠”才能硬切
浏览器靠两个相邻停靠点数值完全相等（比如 #000 10px 和 #fff 10px）来实现无过渡的硬边切换。一旦中间留空或错位，就会插值出灰边或模糊带。
- ✅ 正确：
repeating-linear-gradient(to bottom, #000 0, #000 4px, #fff 4px, #fff 8px)—— 红蓝各占 4px，周期 8px - ❌ 错误：
repeating-linear-gradient(to bottom, #000 0, #000 4px, #fff 5px, #fff 9px)—— 中间多出 1px 过渡，条纹发虚 - ⚠️ 百分比更安全：
repeating-linear-gradient(to right, #000 0%, #000 50%, #fff 50%, #fff 100%)，适配缩放和高 DPR 屏幕 - 别省略单位：写
#000 0不如写#000 0%或#000 0px，避免浏览器按默认 0% 解析引发意外过渡
background-size 必须显式匹配重复周期
repeating-linear-gradient 只定义“一个格子长啥样”，不控制它怎么铺。漏掉或设错 background-size，条纹会拉伸、截断、错位，甚至只显示一次。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 若渐变写的是
red 0, red 2px, blue 2px, blue 4px，周期为 4px，则必须配background-size: 4px 4px（横条纹）或auto 4px（竖条纹） - 用百分比色标时，
background-size: 20px 20px表示把 100% 映射为 20px，整个单元等比缩放 - 别依赖 reset CSS，默认
background-repeat: repeat可能被覆盖，建议显式声明 - Safari 对
90deg支持略差，横向条纹优先用to right，纵向用to bottom
IE10–11 不支持？用 linear-gradient + background-size 降级
IE10+ 完全不认 repeating- 前缀，但支持 linear-gradient。可手动构造单周期渐变，再靠 background-size 控制平铺密度，效果一致。
- ✅ 降级写法：
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% - 横向条纹用
to right+background-size: 20px auto，垂直条纹用to bottom+background-size: auto 20px
细条纹在高 DPR 屏上发虚？不是代码错，是渲染机制
1px 条纹在 Retina、安卓旗舰等高像素密度屏幕上容易被抗锯齿柔化，视觉上变成 1.5px 灰边——这不是 bug，是浏览器渲染策略。
- 最小单位建议从 2px 起步：
#000 0, #000 2px, transparent 2px, transparent 4px - 容器高度为 0 或塌陷时，条纹根本没空间画；先加
min-height: 20px排查 -
image-rendering: pixelated对渐变无效，别试 - 斜向条纹慎用
45deg：周期需按 √2 倍估算（直角周期 4px → 斜向建议background-size: 6px 6px），边缘更稳的做法是先做清晰直条纹，再用transform: rotate(45deg)整体旋转容器
background-size 是否与之严格对应、以及高 DPR 下对最小物理像素的妥协。这些点一错，条纹就从“刚好”变成“几乎看不见”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
