css条纹制作

CSS条纹制作方法

使用CSS可以轻松创建各种条纹效果，包括水平、垂直、对角线和渐变条纹。以下是几种常见的实现方式：

线性渐变条纹

水平条纹可以通过linear-gradient实现：

.stripes {
  background: linear-gradient(
    to right,
    #ff8a00 0%, #ff8a00 50%,
    #e52e71 50%, #e52e71 100%
  );
  background-size: 30px 100%;
}

垂直条纹只需调整渐变方向：

.stripes {
  background: linear-gradient(
    to bottom,
    #ff8a00 0%, #ff8a00 50%,
    #e52e71 50%, #e52e71 100%
  );
  background-size: 100% 30px;
}

斜向条纹

45度斜纹使用repeating-linear-gradient更高效：

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

多色条纹

创建三色条纹只需增加色标：

.stripes {
  background: linear-gradient(
    to right,
    #ff8a00 0%, #ff8a00 33.33%,
    #e52e71 33.33%, #e52e71 66.66%,
    #00c6ff 66.66%, #00c6ff 100%
  );
  background-size: 60px 100%;
}

斑马条纹表格

表格行斑马纹使用:nth-child伪类：

tr:nth-child(even) {
  background-color: #f2f2f2;
}

注意事项

渐变条纹中，色标位置百分比需要精确计算以避免模糊边缘。repeating-linear-gradient更适合周期性重复的图案，能减少代码量。对于复杂条纹效果，可以组合多个渐变背景图。