repeating-linear-gradient倾斜条纹易错在颜色停靠点未“硬切”（如red 4px, blue 4px须严格相等）、45deg导致高DPR屏锯齿、未用百分比+background-size匹配周期，以及IE兼容时缺fallback方案。
repeating-linear-gradient 倾斜条纹写法容易错在哪
直接写 repeating-linear-gradient(45deg, red 0, red 4px, blue 4px, blue 8px) 很可能出不来清晰斜纹——不是发虚就是变纯色。根本原因是颜色停靠点没“硬切”，浏览器一插值，边界就糊了。
必须保证相邻两个停靠点的数值完全相等，比如 red 4px, blue 4px，中间不能有空隙、不能有偏移。45deg 方向在高 DPR 屏上还容易锯齿，尤其条纹窄于 2px 时。
-
to right比45deg更稳，Safari 兼容更好 - 优先用百分比：
red 0%, red 50%, blue 50%, blue 100%，再配background-size: 20px 20px控制密度 - 容器高度不能为 0，加
min-height: 20px快速验证是否渲染塌陷
斜纹背景要动起来，background-position 还是 transform？
想让斜纹滚动，background-position 动画最轻量，但只适用于单向平移；如果需要旋转或缩放节奏感更强的动态效果，得用伪元素 + transform: rotate() + animation 组合。
例如斜纹平移动画：
立即学习“前端免费学习笔记（深入）”；
div {
background: repeating-linear-gradient(
to right,
#ff0080 0%, #ff0080 10%,
transparent 10%, transparent 20%
);
background-size: 40px 40px;
animation: slide 4s linear infinite;
}
@keyframes slide {
0% { background-position: 0 0; }
100% { background-position: 40px 40px; }
}
- 动画周期必须和
background-size匹配，否则会跳帧或断层 -
background-position动画在 Chrome/Firefox 上 GPU 加速友好，IE11 不支持，需降级为 JS fallback - 若用
transform: rotate()动画伪元素，注意父容器overflow: hidden防止旋转溢出
IE10–11 怎么兼容 repeating-linear-gradient 斜纹
IE 完全不识别 repeating-linear-gradient，但可以用 linear-gradient + background-size 模拟出等效重复效果，关键在于手动写出一个完整周期，并靠 background-size 控制平铺密度。
比如实现 4px 红白斜纹（模拟 45deg）：
.ie-fallback {
background: linear-gradient(
45deg,
#ff0000 0px, #ff0000 2px,
#ffffff 2px, #ffffff 4px
);
background-size: 4px 4px;
}
- 方向写成
45deg或to bottom right都行，IE 支持 - 必须显式写
background-repeat: repeat，某些 reset.css 会清掉它 - HSLA 颜色里不能有空格：
hsla(0,0%,0%,0.5)✅，hsla(0, 0%, 0%, 0.5)❌ IE10 直接失效
斜纹太细看不清？先查这三件事
2px 斜纹在 Retina 屏上常被渲染成模糊灰带，不是代码写错了，而是渲染层问题。别急着改 gradient，先确认基础条件。
- 检查容器是否有
min-height或内容撑开，height: 0会导致背景不绘制 - 用
devicePixelRatio判断当前 DPR，DPR=2 时 1px 实际占 2 物理像素，2px 条纹可能只剩 1.5px 渲染精度 - Chrome 开发者工具里勾选 “Rendering > Paint flashing”，看斜纹区域是否真被重绘；没闪说明根本没画出来
真正可控的解法是放弃绝对像素单位，改用 % 定义停靠点 + background-size 缩放整体单元，这样 DPI 变化时条纹比例保持一致。
