css制作条纹

CSS 制作条纹背景

使用 CSS 的 linear-gradient 或 repeating-linear-gradient 可以轻松创建条纹背景。以下是几种常见的条纹实现方法。

水平条纹

通过 linear-gradient 设置颜色和间距，生成水平条纹：

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

• to bottom 表示渐变方向从上到下。
• #ff0000 和 #0000ff 是条纹颜色，50% 处切换颜色。

垂直条纹

将方向改为 to right 即可生成垂直条纹：

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

斜向条纹

通过调整角度和重复模式生成斜向条纹：

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

• 45deg 表示条纹倾斜角度。
• 10px 和 20px 控制条纹宽度和间距。

更复杂的多色条纹

通过增加颜色节点实现多色条纹：

.striped-multi {
  background: repeating-linear-gradient(
    to right,
    #ff0000,
    #ff0000 20px,
    #00ff00 20px,
    #00ff00 40px,
    #0000ff 40px,
    #0000ff 60px
  );
}

注意事项

• 使用 repeating-linear-gradient 时，确保最后一个颜色值与第一个颜色值相同，以实现无缝重复。
• 调整像素值或百分比可以控制条纹的粗细和间距。
• 现代浏览器均支持这些属性，无需额外前缀。

以上方法适用于大多数需要条纹背景的场景，如进度条、装饰元素等。