用 CSS 渐变做斜纹背景的关键是 repeating-linear-gradient 与 background-size 协同：前者定义斜线周期（如 1px 线宽 + 19px 间距共 20px），后者必须严格设为对应值（如 20px 20px）以确保无缝重复、不拉伸、不虚边；需避免多层背景干扰和 no-repeat 覆盖，并可通过 CSS 变量实现响应式控制。
用 CSS 渐变做斜纹背景，核心不是“加个角度就行”，而是让渐变单元在斜向重复时无缝拼接、不拉伸、不锯齿。关键在 repeating-linear-gradient 和 background-size 的协同控制，而不是靠单层 linear-gradient 硬转。
用 repeating-linear-gradient 定义斜线单元
斜纹本质是一组等距、等宽的平行细线。直接写 linear-gradient(45deg, #000, #000 1px, transparent 1px) 只能画出一条线；要自动铺满，必须用 repeating-linear-gradient：
- 写法示例：
background: repeating-linear-gradient(45deg, #333 0, #333 1px, transparent 1px, transparent 20px); - 其中
1px是线宽，20px是完整周期（线+空），两者决定疏密 - 角度支持任意值（如
30deg、-15deg），比手动拼色标灵活得多
background-size 必须与周期长度严格匹配
background-size 不是“调大小”，而是定义这个斜线单元在 X 和 Y 方向上的实际尺寸。若不匹配，就会错位、虚边或留白：
- 上面例子中周期是
20px，就必须写background-size: 20px 20px - 如果改成
background-size: 30px 30px，浏览器会强行拉伸单元，线条变粗、间距变大 - 高 DPI 屏幕上发虚？把
1px换成0.5px，再配background-size: 20px 20px强制重绘
避免多层背景干扰导致失效
斜纹常被覆盖或错位，80% 是因为 background 层叠冲突：
- 别在同一个元素上混用
background-image多层渐变 + 其他图片，容易某一层被覆盖 - 父容器设了
background-size会继承影响子元素，建议显式重置：background-size: 20px 20px - 检查是否误加了
background-repeat: no-repeat——斜纹必须repeat（默认值，删掉它反而可能触发no-repeat）
响应式斜纹：用 CSS 自定义属性动态控制
不能用 vmin 或 % 直接写进渐变参数（语法不支持），但可以这样适配不同屏幕：
- 定义变量：
:root { --step: 20px; } - CSS 中使用：
background: repeating-linear-gradient(45deg, #333 0, #333 1px, transparent 1px, transparent var(--step)); background-size: var(--step) var(--step); - 用媒体查询或 JS 动态改
--step值，比如小屏设为12px，大屏设为24px
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
