先说说渐变。背景：线性渐变（#fb320%，#58a80%）；效果图如下：也就是说真正的渐变只出现在容器的60%（从20%%到80%），如果两个色阶组合在一起会怎样？w3c规定“多个色标如果位置相同，会产生一个无限小的过渡区域，过渡的开始和结束颜色是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然改变，而不是平滑的梯度过程。”也就是说，如果设置如下：background:linear-gradient(#fb350%,#58a50%);会产生如下效果，因为渐变是代码生成的图片，我们可以像对待任何其他背景图片一样对待它，我们也可以通过background-size背景调整它的大小：linear-gradient(#fb350%,#58a50%);背景大小：100%30px；会产生如下效果：但是现在这段代码会有问题，如果我要改变50%，我需要改变两个地方根据w3c，“如果某个色标的位置值小于该位置整个列表中它前面的色标的位置值，这个色标的位置值会被设置为它前面所有色标的位置值的最大值。"所以上面的代码可以改成：因为如果我们把第二个色标的位置值设置为0，它的位置会一直被浏览器调整到前一个色标背景的位置值：linear-gradient(#fb350%,#58a0);background-size:100%30px;具体效果见链接。同理可以创建多个边框：background:linear-gradient(#fb333.3%,#58a0,#58a66.6%,yellowgreen0);background-size:100%45px;备注：其实不止一种写法/*background:linear-gradient(#fb325%,#58a0,#58a50%,yellowgreen0,yellowgreen75%,red0,red100%);*//*两者都可用*//*background:linear-gradient(#fb325%,#58a0,#58a50%,yellowgreen0,yellowgreen75%,red0);*/verticalstripes:在开头增加一个额外的参数来指定渐变体的方向{background:linear-gradient(toright,#fb350%,#58a0);background-size:30px100%;}具体效果看链接如果我们想要一个45度角的条纹背景，可能要用下面的代码来实现：body{background:linear-gradient(45deg,#fb350%,#58a0);背景尺寸：30px30px；但是得到的效果却是事实，原理是这样的，如下图，也就是说单个切片包含四个条纹，所以代码最终演化为：body{background:linear-gradient（45度，#fb325%,#58a0,#58a50%,#fb30,#fb375%,#58a0);背景尺寸：42.4px42.4px；}具体效果看上面的链接，只提到了45deg和90deg特殊角度的条纹呢，要30deg还是60deg？让我们来看看重复线性渐变的力量。其实上面的45deg可以简化为：body{background:repeating-linear-gradient(45deg,#fb3,#fb315px,#58a0,#58a30px);背景尺寸：42.4px42.4px；}使用repeating-linear-gradient制作60deg条纹效果：html{background:repeating-linear-gradient(60deg,#fb3,#fb315px,#58a0,#58a30px);高度：100%；/*下面的方法也可以实现，效果有点不同，可能是我的background-size不准确*//*background:repeating-linear-gradient(45deg,#fb30,#fb325%,#58a0,#58a50%);背景大小：42.426406871px42.426406871px；*/}具体效果见链接有一个小秘密：条纹的颜色是相似的，但是在明度上有细微的差别所以我们可以：不为每条条纹指定单独的颜色，而是指定最暗的颜色作为底色，将半透明的白色条纹叠加在底色上得到浅色条纹。html{背景：#58a;背景图像：重复线性渐变（30度，hsla（0、0%、100%、.1）、hsla（0、0%、100%、.1）15px，透明0，透明30px）；高度：100vh；}具体效果见链接
