推进Css3属性背景梯度。它是如何工作的？

我举了一个非常受欢迎的例子。我想了解这些模式是如何从渐变属性生成的。我刚刚收集并汇编了以下几个例子。需要了解如何通过梯度属性的东西，所以我可以生成自己的模式

.pattern{
高度：100px
}
.模式1{
背景：径向梯度（0%50%、rgba（96,16,48,0）9px、#613 10px、rgba（96,16,48,0）11px）0px 10px、径向梯度（100%100%、rgba（96,16,48,0）9px、#613 10px、rgba（96,16,48,0）11px）、#8a3；
背景尺寸：20px 20px；
}
.模式2{
背景：线性梯度（63度，透明23%，透明23%）7px0，线性梯度（63度，透明74%，透明999 78%），线性梯度（63度，透明34%，透明999 38%，透明999 58%，透明62%），透明444；
背景尺寸：16px48px；
}
.模式3{
背景：径向梯度（60%43%的圆最近侧，#b03 26%，rgba（187,0,51,0）27%），径向梯度（40%43%的圆最近侧，#b03 26%，rgba（187,0,51,0）27%），径向梯度（40%22%的圆最近侧，#d35 45%，rgba（221,51,85,0）46%），径向梯度（60%22%的圆最近侧，#d35 45%，rgba（221,51,85,0）46%），径向梯度（50%35%，#d35 30%，rgba（221,51,85,0）31%的圆最近侧），径向梯度（60%43%的圆最近侧，#b03 26%，rgba（187,0,51,0）27%）50px 50px，径向梯度（40%43%的圆最近侧，#b03 26%，rgba（187,0,51,0）27%）50px 50px，径向梯度（40%22%的圆最近侧，#d35 45%，rgba（221,51,85,0）46%）50px 50px，径向梯度（60%22%的圆最近侧，#d35 45%，rgba（221,51,85,0）46%）50px 50px，径向梯度（50%35%的圆最近侧，#d35 30%，rgba（221,51,85,0）31%）50px 50px；
背景色：#b03；
背景尺寸：100px 100px；
}
.模式4{
背景：线性梯度（135度，#ECEDDC 25%，透明25%）-50px 0，线性梯度（225度，#ECEDDC 25%，透明25%）-50px 0，线性梯度（315度，#ECEDDC 25%，透明25%），线性梯度（45度，#ECEDDC 25%，透明25%）；
背景尺寸：100px 100px；
背景色：#EC173A；
}

---

如果您想了解每个图案是如何构建的，您应该通过将其变大（在下面的示例中为4倍）来解构它，并将每个颜色替换为清晰可见的颜色

下面，对于第二种模式，我在行尾用透明色替换了背景色#444（番茄没有那么清晰），并用蓝色、红色等随机颜色替换了每次出现的

#999

。
编辑：并在每个逗号后添加一个新行。每行一个*渐变表示有三个逗号和一个背景色

.pattern{
高度：192px；
}
.模式2{
背景：线性梯度（63度，红色23%，透明23%）7px 0，
线性梯度（63度，透明74%，蓝色78%），
线性梯度（63度，透明34%，深绿色38%，#999 58%，透明62%），
透明的；
背景尺寸：64px 192px；
}