在我们的日常生活中，各种各样的条纹图案随处可见，那么我们用CSS又该怎样实现呢？

方案

假设我们有一条基本的垂直线性变化，颜色由red过渡到green。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>条纹背景</title>
  <style>
    .box{
      width: 300px;
      height: 300px;

      background: linear-gradient(red, blue);
    }
  </style>
</head>
<body>
  <div class="box">

  </div>
</body>
</html>

我们可以让这两个颜色靠近点：

      background: linear-gradient(red 20%, blue 80%);

这句话的意思是，当前容器的20%的区域被填充成red，而从80%起（也就是从从底部起的20%）被填充成blue，而中间的60%，则是线性渐变区域。

那么当我们把这两个颜色之间的线性简便区域变为零时，则有如下效果：

background: linear-gradient(red 50%, blue 50%);

由上图我们可以看见，已经没有任何的渐变效果，只有两块实色，从实际上看，我们创建了两条水平条纹。

我们可以通过background-size来调整尺寸：

  <style>
    .box{
      width: 300px;
      height: 300px;
      border: 2px dashed black;

      background: linear-gradient(red 50%, blue 50%) no-repeat;
      background-size: 100% 30px;
    }
  </style>

上图中，我们把每条条纹的实际尺寸调整到到了15px，我们也可以同相同的方法来创建不等宽的条纹。

background: linear-gradient(red 20%, blue 20%) no-repeat;

这里有一个语法糖点，在设置第二个参数的时候可以设置成0，意思就是浏览器在解析时会把第二个色标的位置调整为前一个色标的位置。

background: linear-gradient(red 20%, blue 0) no-repeat;

这个效果跟之前的是一样的。

我们也可以创建多个多彩的条纹。

      background: linear-gradient(red 33.33%, blue 0, blue 66.66%, yellowgreen 0) no-repeat;

垂直条纹

颜色的垂直线性过度是默认的，所以水平条纹是最容易创建的，那么当我们需要垂直的条纹时又该怎么办呢？其实很简单，只要如下即可：

      background: linear-gradient( to right, red 33.33%, blue 0, blue 66.66%, yellowgreen 0) no-repeat;
      background-size: 30px 100%;

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

每天一个CSS小技巧-条纹背景-垂直和水平

方案

垂直条纹