background: repeating-linear-gradient(red, yellow 10%, green 20%);
linera-gradinet 表示的线性渐变
x1,x2,y1,y2的取值范围为0%-100%，当x1,x2,y1,y2取值为极值的时候，x1和x2可以取值left（或0%）或right（或100%），,y1和y2可 以取值top（或0%）或bottom（或100%）；
下面是代码模板：
<style>
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>重复的线性渐变</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));
background: -webkit-gradient这样的用法在CSS中适合 Chrome,Safari4+两种浏览器。
来源：CSDN
作者：小黄先生
链接：https://blog.csdn.net/qq_16933229/article/details/54177247