css制作条纹

CSS 制作条纹的方法

使用线性渐变（linear-gradient）

通过 background-image 属性结合 linear-gradient 可以轻松创建水平或垂直条纹背景。调整角度和颜色停止点来控制条纹的样式。

.stripe {
  background-image: linear-gradient(
    45deg,
    #000 25%,
    #fff 25%,
    #fff 50%,
    #000 50%,
    #000 75%,
    #fff 75%
  );
  background-size: 50px 50px;
}

重复线性渐变（repeating-linear-gradient）

repeating-linear-gradient 可以避免手动计算背景尺寸，直接生成重复的条纹图案。

.stripe {
  background-image: repeating-linear-gradient(
    45deg,
    #000,
    #000 10px,
    #fff 10px,
    #fff 20px
  );
}

使用背景尺寸和颜色

通过设置 background-size 和 background-color，配合单色渐变生成条纹。

.stripe {
  background-color: #000;
  background-image: linear-gradient(
    #fff 50%,
    transparent 50%
  );
  background-size: 100% 20px;
}

斜向条纹

调整渐变角度可以生成斜向条纹，结合 background-size 控制条纹密度。

.stripe {
  background-image: repeating-linear-gradient(
    60deg,
    #000,
    #000 15px,
    #fff 15px,
    #fff 30px
  );
}

多色条纹

在渐变中增加多个颜色停止点，可以生成多色条纹效果。

.stripe {
  background-image: repeating-linear-gradient(
    90deg,
    red,
    red 10px,
    blue 10px,
    blue 20px,
    green 20px,
    green 30px
  );
}

注意事项

• 条纹的宽度和颜色通过调整渐变中的像素值和色值控制。
• 使用 repeating-linear-gradient 时，确保颜色停止点的计算准确，避免出现断裂或模糊。
• 测试不同浏览器的兼容性，必要时添加前缀（如 -webkit-）。