相关阅读点《Css secret》第2章《背景与边框》第5节《条纹背景》正文在第2章《背景与边框》第5节《条纹背景》讲CSS3的新属性值linear-gradient，不过这里不详细介绍这个新属性的用法，这里主要是用来完成背景条纹的，看一下原文中的说明和演示。假设我们有一个基本的垂直线性渐变，颜色从#fb3过渡到#58a（见图2-20）：background:linear-gradient(#fb3,#58a);简单的说就是上面的代码，接受两个颜色值参数，默认是垂直渐变。让我们再看看原文：现在，让我们试着让这两个色标更接近（见图2-21）：background:linear-gradient(#fb320%,#58a80%);现在你可以看到，颜色值后面跟着一个相应的百分比值，虚线框中的渐变过渡被压缩了。第一种颜色的纯色占总高度的20%，第二种颜色的纯色也占总高度的20%，渐变的过渡占总高度的60%。看到这里，我很好奇也很疑惑，为什么代码没有设置60%的值，为什么结果会是一样的值，书上没怎么说。归根结底，我对这个属性不熟悉。看了mdn上的文档，发现了这句话：linear-gradient(0deg,blue,green40%,red);/*一个从下往上的渐变，从蓝色开始，40%后变成绿色，最后变成红色*/从注释中可以看出，百分比指的是从起点开始的颜色值的起始位置。默认的渐变方式是从上到下，所以当给某个颜色值设置百分比时，纯色会从与顶部相关的距离（百分比计算）开始填充。渐变颜色将填充在顶部和尾部之间的中间。我们可以通过相关例子自己验证一下：第一个我没有设置任何百分比background:linear-gradient(red,orange);得到的效果是这样的：由于这里不清楚默认的百分比是多少，所以接下来Setbackground:linear-gradient(red0%,orange100%);原来效果和上图没什么区别，所以如果我们不设置百分比，默认是根据颜色的个数来设置每个颜色的值，最后一个颜色的百分比值为100%，初始值为0%。如果中间有多个颜色值，则按照100/(number-1)进行平均。同样的，我们可以设置多个值比如background:linear-gradient(red,orange,yellow,green,blue,indigo,violet);背景：线性渐变（红色0%，橙色16.67%，黄色33.33%，绿色50.00%，蓝色66.67%，靛蓝83.33%，紫色100%）；以上两段代码效果相同。说了这么多，只知道默认值，不知道百分比是怎么算的。那我们现在写一个例子。首先定义一个background:linear-gradient(red0%,orange0%)颜色值全为0；看不出下面效果的原因，再设置一个0%20%background:linear-gradient(red0%,orange20%);设置0%50%背景：线性渐变（红色0%，橙色50%）；不难看出，红色部分是从顶部着色，橙色部分是从设置的百分比顶部着色，但是当橙色设置为0%时，会直接从顶部着色，并且橙色会完全覆盖红色的效果，当橙色百分比值增加时，会产生一个相应的距离，而这个距离的空间一开始就已经被红色着色了，所以才会有后面的效果。ps：如果设置第一种颜色的值呢？让我们设置第一种颜色背景的百分比：linear-gradient(red30%,orange50%);知道了百分比值的作用，我们来看看在什么情况下会产生渐变的过渡效果：我们已经知道了，默认不设置百分比的时候，是这个样子的！[Percentagenotset](http://upload-images.jianshu....)设置红色为0%，橙色为50%后，是这个样子的。我们再修改一下。将红色更改为30%，将橙色更改为70%以查看效果。背景：线性渐变（红色30%，橙色70%）；所以从上图仔细可以看出过渡也是有空间比例的，默认(red0%,orange100%)渐变过渡的比例为红色0%橙色的比例为50%渐变过渡为红色30%比例橙色70%渐变过渡是渐变过渡区域比例为总空间（高或宽）减去上下两个色块的空间比例得出的结论。我们可以通过设置两种颜色各占50%来检查渐变过渡区域是否还存在。背景：线性渐变（红色50%，橙色50%）；PS：如果后一种颜色的百分比设置的高一点，一个颜色的百分比小是什么意思？以下内容摘自原文。如果一个色标的位置值小于它在整个列表中前一个色标的位置值，则该色标的位置值将设置为所有色标位置值的最大值在它之前。所以我们可以知道如果前面有一个比当前颜色值大的百分比，那么当前颜色值的百分比会自动设置为上一个颜色中的最大百分比值，我们可以知道下面的效果背景：linear-渐变（红色50%，橙色40%）；其实相当于background:linear-gradient(red50%,orange50%);综上所述，通过一个属性就可以轻松制作出多条颜色线条的背景背景：linear-gradient(red0%,red14.3%,orange0,orange28.6%,yellow0,yellow42.9%,green0,绿57.2%，蓝0，蓝71.5%，靛0，靛85.8%，紫0，紫100%）；ps：说明一下，一共用了7种颜色。第一种颜色是红色，此时整个背景已经被红色覆盖。为什么要在这里设置两次颜色？这是因为每种颜色都需要一个起始着色点，然后需要改变两种颜色之间的渐变。过渡区域用纯色覆盖，消除了过渡效果。可以想象，在没有纯色覆盖的情况下，最终效果会是这样的背景：linear-gradient(red0%,orange16.67%,yellow33.33%,green50%,blue66.67%,indigo83.33%,violet100%);
