使用linear-gradient通过控制色标位置可创建条纹背景，如background: linear-gradient(to bottom, red 50%, white 50%)实现红白相间条纹，调整百分比可改变条纹宽度，支持多色和方向变化，推荐repeating-linear-gradient实现重复条纹图案。
在 CSS 中，你可以使用 linear-gradient 函数来创建条纹色背景。关键是通过控制颜色的色标位置，让颜色之间不平滑过渡，从而形成清晰的条纹效果。
基本语法与原理
默认情况下，linear-gradient 会平滑过渡颜色。要实现条纹，你需要让相邻颜色在同一个位置开始和结束，中间不留渐变空间。
例如，创建一个水平红白相间的条纹：
background: linear-gradient(to bottom, red 50%, white 50%);这里红色从 0% 开始，到 50% 结束；白色从 50% 开始，到 100% 结束。由于两者在 50% 处“接壤”，就形成了清晰的分界线，即条纹。
立即学习“前端免费学习笔记（深入）”；
控制条纹宽度
你可以通过调整色标位置来改变每条条纹的宽度。
- 红条占 30%，白条占 70%：
- 更细的红条（10%）和宽的白条（90%）： background: linear-gradient(to bottom, red 10%, white 10%);
- 三色水平条纹（红、白、蓝，各占 33.3%）：
- 垂直条纹（从左到右）：
- 斜向条纹：
多色条纹与方向控制
支持多种颜色和不同方向。
重复条纹（推荐使用 repeating-linear-gradient）
如果想让条纹自动重复，比如做背景图案，建议使用 repeating-linear-gradient 更方便。
background: repeating-linear-gradient(0deg, red, red 10px, white 10px, white 20px);这会创建每隔 20px 重复的红白条纹，每条宽 10px。
基本上就这些。通过精确控制色标位置，linear-gradient 能轻松实现各种条纹效果，关键是让相邻颜色在同一位置切换，避免渐变。不复杂但容易忽略细节。
