css条纹制作

使用线性渐变制作条纹

通过CSS的linear-gradient可以轻松创建水平或垂直条纹。以下是一个水平条纹的例子：

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

调整background-size中的第二个值可以改变条纹的粗细。要创建垂直条纹，只需将方向改为to right。

使用重复线性渐变

对于更复杂的条纹图案，可以使用repeating-linear-gradient：

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

这个例子创建了45度角的斜条纹，每20px重复一次。

使用背景图像

虽然渐变更现代，但也可以使用小尺寸的背景图像来创建条纹：

.stripes {
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="5" fill="red"/><rect y="5" width="10" height="5" fill="blue"/></svg>');
  background-size: 10px 10px;
}

这种方法在需要非常精确控制条纹样式时可能有用。

多色条纹效果

要创建三色或更多颜色的条纹，只需在渐变中添加更多颜色停止点：

.stripes {
  background: linear-gradient(
    to right,
    red 0%, red 33.33%,
    white 33.33%, white 66.66%,
    blue 66.66%, blue 100%
  );
}

斑马条纹表格行

对于表格行的斑马条纹效果，可以使用CSS的:nth-child选择器：

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

这种方法简单且广泛支持，不需要渐变或背景图像。