Css渐变与斑马条纹

原理：

渐变函数linear-gradient，通过linear-gradient创建的背景可以通过background-size控制。

linear-gradient接收两种参数，第一个参数是角度，不建议使用top、left等，第二种参数就是颜色和百分比。

background: linear-gradient( 0deg, red, green);

颜色后面跟百分比意思是从多少之后才开始渐变：

background: linear-gradient( 0deg, red 50%, green);

也可以直接平分不渐变：

background: linear-gradient( 0deg, red 50%, green 50%);

下面是角度从0-360，依次加45度的效果。

可以多个颜色：

background: linear-gradient( 0deg, red, green, yellow, pink)

了解了linear-gradient，再知道linear-gradient创建的背景可以通过background-size控制。

background: linear-gradient( 0deg, red 50%, green 50%);background-size: 100% 20px;

不过要是想要斜条纹，得用另外一个：

background: repeating-linear-gradient(45deg, red, red 10px, green 0, green 20px);

多颜色：

background: repeating-linear-gradient(45deg, red, red 10px, green 0, green 20px, blue 0, blue 30px);

这个属性的话，每一个颜色都有依次叠加宽度或者高度。其实使用这个属性，甚至比上面的更简单，也可以实现上面所有的效果。

（完）