css条纹背景制作

使用线性渐变创建条纹背景

通过CSS的linear-gradient函数可以轻松创建水平或垂直条纹背景。渐变方向由第一个参数控制，后续参数定义颜色和位置。

水平条纹示例：

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

45度斜向条纹示例：

.diagonal-stripes {
  background: linear-gradient(45deg, 
    #ff0000 25%, #0000ff 25%, 
    #0000ff 50%, #ff0000 50%, 
    #ff0000 75%, #0000ff 75%);
  background-size: 50px 50px;
}

使用重复渐变优化代码

repeating-linear-gradient可以简化条纹代码，自动重复模式：

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

创建复杂多色条纹

通过增加色标数量可以创建多色条纹效果：

.rainbow-stripes {
  background: linear-gradient(
    to right,
    red 0%, red 20%,
    orange 20%, orange 40%,
    yellow 40%, yellow 60%,
    green 60%, green 80%,
    blue 80%, blue 100%
  );
}

调整条纹粗细和间距

通过控制色标位置百分比可以调整条纹粗细：

.thick-stripes {
  background: linear-gradient(
    to right,
    #000 0%, #000 70%,
    #fff 70%, #fff 100%
  );
}

使用背景尺寸控制条纹密度

结合background-size可以控制条纹的重复密度：

.dense-stripes {
  background: linear-gradient(
    to bottom,
    #000 0%, #000 50%,
    #fff 50%, #fff 100%
  );
  background-size: 100% 20px;
}