css条纹背景制作

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

通过CSS的linear-gradient函数可以轻松创建水平或垂直条纹背景。设置多个颜色节点并定义每个颜色的宽度即可形成条纹效果。

.stripe-bg {
  background: linear-gradient(
    to right, 
    #ff6b6b 0%, #ff6b6b 50%, 
    #4ecdc4 50%, #4ecdc4 100%
  );
  background-size: 20px 100%;
}

斜向条纹的实现

调整渐变角度并重复背景图案可实现45度斜条纹。需要计算精确的色标位置确保无缝衔接。

.diagonal-stripe {
  background: repeating-linear-gradient(
    45deg,
    #ff9a76,
    #ff9a76 10px,
    #ffd3b6 10px,
    #ffd3b6 20px
  );
}

多色条纹组合

通过增加颜色节点数量可以创建彩虹色等复杂条纹。色标位置需保持相同间隔。

.rainbow-stripe {
  background: linear-gradient(
    to bottom,
    red 0%, red 14.28%,
    orange 14.28%, orange 28.56%,
    yellow 28.56%, yellow 42.84%,
    green 42.84%, green 57.12%,
    blue 57.12%, blue 71.4%,
    indigo 71.4%, indigo 85.68%,
    violet 85.68%, violet 100%
  );
}

使用repeating-linear-gradient

该函数会自动重复渐变图案，适合创建等宽条纹且无需手动计算background-size。

.repeating-stripe {
  background: repeating-linear-gradient(
    90deg,
    #a8e6cf,
    #a8e6cf 30px,
    #dcedc1 30px,
    #dcedc1 60px
  );
}

条纹边框效果

结合背景裁剪技术可以实现条纹边框。注意需要设置适当的background-clip和padding。

.stripe-border {
  padding: 5px;
  background: linear-gradient(to right, #ff758c, #ff7eb3);
  background-clip: content-box;
}