当前位置：首页 > CSS

css制作带条纹

2026-04-02 14:26:40CSS

使用 CSS 制作条纹背景

线性渐变实现条纹

通过 linear-gradient 可以创建水平或垂直条纹。将色标设置为相同颜色并紧邻排列，形成硬边过渡效果。

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

调整角度参数可改变条纹方向。to bottom 创建垂直条纹，45deg 生成对角条纹。

重复线性渐变优化

使用 repeating-linear-gradient 简化代码，特别适合多条纹场景。通过定义重复单元减少代码量。

css制作带条纹

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

径向渐变条纹

radial-gradient 可创建环形条纹效果，适用于圆形元素装饰。

.radial-stripe {
  background: radial-gradient(
    circle,
    #ff0000 0%,
    #ff0000 20%,
    #0000ff 20%,
    #0000ff 40%,
    #ff0000 40%,
    #ff0000 60%,
    #0000ff 60%,
    #0000ff 80%,
    #ff0000 80%,
    #ff0000 100%
  );
}

伪元素叠加技巧

通过伪元素创建复杂条纹组合，实现多层叠加效果。

css制作带条纹

.complex-stripe {
  position: relative;
  background: #ff0000;
}
.complex-stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 10px,
    rgba(0,0,255,0.5) 10px,
    rgba(0,0,255,0.5) 20px
  );
}

SVG 背景条纹

使用 SVG 作为背景图像，适合需要精细控制的复杂条纹图案。

.svg-stripe {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='10' height='20' fill='%23ff0000'/%3E%3Crect x='10' width='10' height='20' fill='%230000ff'/%3E%3C/svg%3E");
}

动画条纹效果

结合 CSS 动画让条纹产生动态视觉效果。

.animated-stripe {
  background: repeating-linear-gradient(
    to right,
    #ff0000,
    #ff0000 10px,
    #0000ff 10px,
    #0000ff 20px
  );
  background-size: 200% 100%;
  animation: stripeMove 2s linear infinite;
}

@keyframes stripeMove {
  0% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}