当前位置：首页 > CSS

css制作条纹

2026-01-28 07:38:01CSS

使用线性渐变制作条纹

在CSS中，线性渐变（linear-gradient）是创建条纹背景的常用方法。通过调整颜色停止点和重复渐变，可以生成水平、垂直或对角条纹。

水平条纹：

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

垂直条纹：

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

使用重复线性渐变

repeating-linear-gradient可以简化条纹创建过程，无需计算background-size：

45度对角条纹：

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

使用伪元素创建条纹

通过伪元素可以创建更复杂的条纹效果，实现多层叠加：

.stripes {
  position: relative;
}
.stripes::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, 
    transparent 0%, transparent 50%,
    rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 100%);
  background-size: 20px 100%;
}

SVG背景条纹

SVG可以作为背景图像创建精确的条纹：

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

动画条纹效果

结合CSS动画可以创建动态条纹：

css制作条纹

@keyframes stripeAnimation {
  from { background-position: 0 0; }
  to { background-position: 20px 0; }
}
.stripes {
  background: repeating-linear-gradient(45deg,
    #ff0000, #ff0000 10px,
    #0000ff 10px, #0000ff 20px);
  animation: stripeAnimation 1s linear infinite;
}