线性渐变

基本语法

linear-gradient([方向], 颜色节点1 [位置], 颜色节点2 [位置], ...)

方向控制

方向类型	示例代码	效果说明
关键字方向	`to right`	水平左到右渐变
角度方向	`45deg`	45度角斜向渐变
对角线方向	`to bottom right`	左上到右下渐变

角度：0deg（向上）、90deg（向右）、180deg（向下）、270deg（向左）

条纹背景

当渐变的两个实色区域相等时（即渐变区域没有）

.box {
    background: linear-gradient(#fb3 50%, #58a 50%);
}

把第二个色标的位置值设置为 0，那它的位置就总是会被浏览器调整为前一个色标的位置值，这使代码更有复用性
```
.box {
    background: linear-gradient(#fb3 50%, #58a 0);
}
```

通过 background-size 调整尺寸

.box {
    background: linear-gradient(#fb3 50%, #58a 0);
    background-size: 100% 30px;
}

因为默认情况是重复平铺，所以其实已经被填满水平条纹了

重复的线性渐变

repeating-linear-gradient([方向], 颜色节点1 [位置], 颜色节点2 [位置], ...)

可以通过 repeating-linear-gradient 快速实现上面的重复平铺效果

复杂图形

网格

把多个渐变条纹组合起来

.box {
  background: white;
  background-image:
    linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
    linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
  background-size: 30px 30px;
}

也可以描绘网格线，形成网格

.box {
  background: #58a;
  background-image:
    linear-gradient(90deg, white 1px, transparent 0),
    linear-gradient(white 1px, transparent 0);
  background-size: 15px 15px;
}

波点

先使用渐变形成圆点

.box {
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0);
  background-size: 25px 25px;
}

用 background-position 移动第二层

.box {
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 12.5px;
}

棋盘

先创建一个 $\frac{1}{4}$ 角

.box {
  background: #eee;
  background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
  background-size: 25px 25px;
}

再创建另一边

.box {
  background: #eee;
  background-image:
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0);
  background-size: 25px 25px;
}

移动第二层图像，可得一半

.box {
  background: #eee;
  background-image:
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0);
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 12.5px;
}

再创建另一半即可

.box {
  background: #eee;
  background-image:
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0);
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 12.5px, 12.5px 12.5px, 25px 25px;
}

上面实现麻烦，且代码重复性很高，有没有其他方法？ svg