css条纹制作

CSS 条纹制作方法

水平条纹 使用 linear-gradient 可以轻松创建水平条纹。通过设置多个颜色停止点，并让它们紧邻彼此，可以形成条纹效果。

.striped {
  background: linear-gradient(
    to bottom,
    #ff0000 0%,
    #ff0000 50%,
    #0000ff 50%,
    #0000ff 100%
  );
}

垂直条纹 将渐变方向改为 to right 即可创建垂直条纹。

.striped {
  background: linear-gradient(
    to right,
    #ff0000 0%,
    #ff0000 50%,
    #0000ff 50%,
    #0000ff 100%
  );
}

斜向条纹 通过调整渐变角度可以实现斜向条纹效果。角度值决定了条纹的倾斜方向。

.striped {
  background: linear-gradient(
    45deg,
    #ff0000 0%,
    #ff0000 50%,
    #0000ff 50%,
    #0000ff 100%
  );
}

多色条纹 增加颜色停止点可以创建包含多种颜色的条纹。

.striped {
  background: linear-gradient(
    to bottom,
    #ff0000 0%,
    #ff0000 25%,
    #00ff00 25%,
    #00ff00 50%,
    #0000ff 50%,
    #0000ff 75%,
    #ffff00 75%,
    #ffff00 100%
  );
}

重复条纹 使用 repeating-linear-gradient 可以创建重复的条纹图案，特别适合需要无缝拼接的场景。

.striped {
  background: repeating-linear-gradient(
    45deg,
    #ff0000,
    #ff0000 10px,
    #0000ff 10px,
    #0000ff 20px
  );
}

注意事项

• 条纹宽度通过颜色停止点的百分比或固定值控制
• 渐变方向影响条纹走向
• 使用透明色可以创建半透明条纹效果
• 考虑添加 background-size 属性控制重复图案的尺寸