如何在CSS中使用重复渐变_repeating-linear-gradient创建条纹效果

使用repeating-linear-gradient可创建重复条纹背景，语法为background: repeating-linear-gradient(方向, 颜色1 停止点1, 颜色2 停止点2, ...)；0deg生成水平条纹，如红白相间每20px：background: repeating-linear-gradient(0deg, red 0, red 20px, white 20px, white 40px)；90deg为垂直条纹，45deg为斜向条纹；通过增加颜色节点可实现多色效果，如彩虹条纹：background: repeating-linear-gradient(45deg, red 0, orange 10px, yellow 20px, green 30px, blue 40px, purple 50px)，合理设置停止点和角度即可灵活控制图案。

使用 repeating-linear-gradient 可以轻松创建重复的条纹图案，无需额外图片资源，适合背景装饰、斑马纹、加载动画等场景。它基于线性渐变，但会自动重复颜色过渡，直到填满整个容器。

基本语法

格式：
background: repeating-linear-gradient( direction, color1 stop1, color2 stop2, ... );

创建水平条纹

通过设定颜色在特定位置切换，并控制间隔，可以生成等距条纹。

例如：创建红白相间的水平条纹，每条高20px：

background: repeating-linear-gradient(
  0deg,
  red 0,
  red 20px,
  white 20px,
  white 40px
);

说明：从0到20px为红色，20px到40px为白色，之后重复这一模式。

立即学习“前端免费学习笔记（深入）”；

创建垂直或斜向条纹

调整角度即可改变条纹方向。

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

217

查看详情

• 90deg → 垂直条纹（从左到右）
• 45deg → 对角条纹

示例：垂直蓝白条纹，每条宽15px：

background: repeating-linear-gradient(
  90deg,
  blue 0,
  blue 15px,
  white 15px,
  white 30px
);

创建多色或渐变条纹

不限于两种颜色，可添加更多颜色节点实现多彩条纹。

比如彩虹条纹效果：

background: repeating-linear-gradient(
  45deg,
  red 0,
  orange 10px,
  yellow 20px,
  green 30px,
  blue 40px,
  purple 50px
);

每10px变换一次颜色，形成密集彩色条纹。

基本上就这些。合理设置颜色停点和方向，就能灵活实现各种条纹背景，不复杂但容易忽略细节。

以上就是如何在CSS中使用重复渐变_repeating-linear-gradient创建条纹效果的详细内容，更多请关注php中文网其它相关文章！