可以做一些条纹，比图片性能要好。

这个是css渐变，有水平渐变和径向渐变

Gradient 是渐变，CSS3目前有三种渐变方式：
linear-gradient 线性渐变
radial-gradient 径向渐变
conic-gradient 圆锥渐变

线性渐变可以做渐变色背景，条纹背景等，这里我贴几张图

• 概念：线性渐变,向下/向上/向左/向右/对角方向,为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

• demo

/* 从上到下 */
#grad {
  background: linear-gradient(red, blue); 
}
/* 从左到右 */
#grad {
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
/* 对角 */
#grad {
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
/* 使用角度 */
#grad {
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}

• 概念：线性渐变,向下/向上/向左/向右/对角方向,为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）
• demo

/* 从上到下 */
#grad {
  background: linear-gradient(red, blue); 
}
/* 从左到右 */
#grad {
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
/* 对角 */
#grad {
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
/* 使用角度 */
#grad {
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}

对角渐变是：

background: linear-gradient(to bottom right, red, blue);