mozilla内核浏览器制作background背景渐变
1、制作一个简单的橫条纹渐变背景
-mozilla内核的浏览器css样式：
CSS Code复制内容到剪贴板
body {
background-color: #aaa;
background-image:-moz-linear-gradient(#000 25%,#fc0 80%);
background-size: 50px 50px;
}
以火狐为代表，显示效果如下：
改变background-size的值可以控制背景条纹的高度。上例中-moz-linear-gradient的值分为两组，开始值和结束值，同时设定的开始值的开始位置和结束值的结束位置，位置相差的部分形成渐变。开始位置之前的部分填充为开始的颜色值，结束值之后的部分填充为结束的颜色值。
2、改变条纹的方向
CSS Code复制内容到剪贴板
body {
background-image:-moz-linear-gradient(0deg,#000 25%,#fc0 80%);
}
在上面的样式中添加了一组参数<角度位置>，参数分别为0deg-360deg，当这为0deg时，为竖条纹，度数增加时，以逆时针方向转动。下图为它分别为0deg和45deg时效果图：
3、我们尝试着多加几种颜色渐变
CSS Code复制内容到剪贴板
body {
background-image:-moz-linear-gradient(45deg,#000 25%,transparent 25%,#fc0 80%);
}
大家看到，在原来的代码里面我添加了一种透明颜色（transparent 25%），这种渐变的位置和前面一种渐变的位置相重合，它发生了什么样的事情？
从上图中大家可以清晰的看到，第一种颜色嘎然而止。那我们再试着多添加几种这样的颜色，会出现什么样的效果？写到这里我打算把里面的角度先调成0deg，这样看起来会更清楚。
CSS Code复制内容到剪贴板
body {
background-image:-moz-linear-gradient(0deg,#000 25%,transparent 25%,transparent 50%,#fc0 50%,#f00 75%,transparent 75%);
}
猜猜看，效果图会是什么样子的？
在这里大家一定要注意一个问题，这里面写了background-size：50px,50px;那么，它可以被分成重复的块，每个块是50px*50px，注意每个块的起始位置和结束位置。
