用 linear-gradient 配合 background-size 可实现无图条纹，关键在于色标位置相等（如 red 50%, white 50%）形成硬切换，并通过 background-size 控制条纹宽高与方向，多色或不等宽条纹需精确设置色标百分比，斜向条纹注意像素对齐以避免模糊。
直接用 linear-gradient 配合 background-size 就能做出清晰条纹，不需要额外图片或 SVG —— 关键是让相邻颜色在同一个位置“硬切换”，再控制重复单元大小。
为什么 linear-gradient(red 50%, white 50%) 能出条纹？
这不是渐变，而是浏览器的“色标对齐”行为：当两个色标位置相同时（比如都写 50%），中间过渡区间坍缩为 0，结果就是上半部分纯红、下半部分纯白。这个两色拼接体本质上是一张高度为容器 100% 的背景图，而默认 background-repeat: repeat 会让它垂直平铺 —— 条纹就出来了。
- 色标位置必须严格相等（
red 40%, white 40%）或后一个写0（red 40%, white 0），后者会被自动修正为前一个值 - 如果写成
red 40%, white 60%，中间 20% 是渐变区，不是硬边条纹 - 单靠这一步只能生成“单组双色单元”，真正控制条纹宽高得靠
background-size
怎么控制条纹方向和尺寸？
方向由 linear-gradient 的第一个参数决定，尺寸由 background-size 的两个值决定 —— 且二者必须匹配，否则条纹会错位或拉伸。
- 水平条纹：
linear-gradient(to bottom, #333 50%, #eee 50%)+background-size: 100% 20px（高度 20px = 每条纹总高） - 垂直条纹：
linear-gradient(to right, #333 50%, #eee 50%)+background-size: 20px 100%（宽度 20px = 每条纹总宽） - 斜向条纹（45°）：
linear-gradient(45deg, #333 25%, #eee 25%)+background-size: 30px 30px（正方形单元更易对齐） - 注意：
to right和90deg等价，但to bottom right是对角线，不适用于标准条纹
多色条纹和不等宽条纹怎么写？
多色靠堆叠多个色标，不等宽靠调整色标百分比 —— 但要注意顺序和数值逻辑，否则会被浏览器自动修正。
- 三色等宽（各占 1/3）：
linear-gradient(#f00 33.3%, #0f0 33.3%, #00f 66.6%, #f00 66.6%) - 红细白宽（红占 15%，白占 85%）：
linear-gradient(#f00 15%, #fff 15%)+background-size: 100% 40px - 别写
#f00 15%, #fff 0来偷懒——虽然生效，但可读性差，协作时容易误判 - 超过 4 种颜色建议改用
repeating-linear-gradient，避免色标列表过长难维护
为什么有时条纹边缘发虚或颜色溢出？
常见于斜向条纹或小尺寸单元，本质是像素对齐和抗锯齿问题，不是代码写错。
- 斜向条纹用
background-size: 29px 29px比30px 30px更易出现模糊，因为非整数倍缩放触发亚像素渲染 - 1px 线条类效果（如网格）优先用
repeating-linear-gradient或双层渐变叠加，比单层更稳 - 在 Retina 屏或 zoom ≠ 100% 时，
background-size建议用偶数 px 值（如20px而非19px）减少渲染抖动 - 透明色参与时（如
rgba(0,0,0,0.1) 20%, transparent 20%），alpha 叠加可能让边界显得“透底”，需检查父级背景色
最易被忽略的是：条纹是否真需要响应式适配？background-size 写死 px 在移动端可能太密或太疏，用 em 或 rem 单位配合根字体缩放，比媒体查询更轻量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
