简介在页面构建过程中，背景和边框是密不可分的。背景和边框是最基本的设置。为了达到一些特定的视觉效果，单一的纯色背景已经不行了。对现有效果满意。越来越多的图片背景正变得流行起来。这在一定程度上也是非常方便的。当然，你也会经常遇到一些无法重复实现的背景效果。这时候就需要裁剪出一张大的背景图。图像越大，页面速度越慢。用户体验的效果会差强人意。目前，CSS3已经普及。虽然不是很向后兼容，但是可以回滚。这里我们使用纯css来实现一些比较复杂的背景和边框效果，不能很好的向后兼容。背景1.条纹背景条纹背景，我们可以使用背景属性linear-gradinet来实现。通过实际操作查看效果。背景：线性渐变（#fba，#58a）；背景效果：可以看到，呈现出来的效果是两种颜色的渐变。通过改变色标的位置，可以缩短两个色标。当两个色阶重叠在一起时，会产生条纹的效果，如图，没有平滑的渐变条纹效果。在应用中，我们可以使用background-size来调整条纹的大小，background:linear-gradient(#fba,#58a);background-size:100%20px;这样就会出现如图所示的效果。改变色标的位置，即可实现不等宽的条纹效果。如果你想要两种以上颜色的条纹效果，也很容易实现。背景：线性渐变（#fba33.3%，#58a0，#58a66.6%，#9acd320）；背景大小：100%30px；以上都是横条纹，竖条纹甚至可以实现斜条纹，当然我们只需要修改渐变的方向就可以实现竖条纹背景：linear-gradient(toright,#fba33.3%,#58a0,#58a66.6%,#9acd320);背景尺寸:100%30px;斜条纹看起来斜，大家第一时间想到的肯定是换个渐变的方向。如：背景：linear-gradient(45deg,#fba50%,#58a0);背景尺寸：30px30px；那么，我们看到的效果就很明显了，这个效果并不是我们想要的斜纹图案。原因是我们只是将每个背景块的梯度旋转了45deg，而不是整个重复的背景。那么如果我们要实现条纹效果，就需要找到一个可重复的背景补丁来实现无缝拼接，实现如下效果。上图中，黑色区域是可重复的背景补丁，达到了预期的效果。实现的代码是：background:linear-gradient(45deg,#fba25%,#58a0,#58a50%,#fba0,#fba75%,#58a0);background-size:42px42px;我们添加了更多的色阶，同时也扩大了patch的面积。当然，这个近似值是通过勾股定理计算出来的，但是如果我们每次改变条纹的角度或者宽度，我们都得计算这个值。这是一种事半功倍的方法，但是却增加了我们的工作量。为了更好的实现斜条纹，linear-gradient有一个循环增强版：repeating-linear-gradient()，其工作原理是色阶可以无限重复，直到填满整个背景。对应代码：background:repeating-linear-gradient(60deg,#fba,#fba15px,#58a0,#58a30px);就是这样，我们不需要复杂的计算，通过很简单的一段代码就可以达到我们想要的效果！接下来我们对其进行扩展，实现更复杂的背景效果，比如网格等常见图案背景：#fba;background-image:linear-gradient(white2px,transparent0),linear-gradient(90deg,white2px,transparent0),线性渐变(rgba(255,255,255,.3)1px,透明0),线性渐变(90deg,rgba(255,255,255,.3)1px,透明0);背景尺寸:75px75px,75px75px,15px15px,15px15px;使用css补全后台，减少好的http请求次数，大部分情况下还是可以实现的。如果要设计兼容性问题，可能有点不现实。背景图还是最好的解决方案，我在学习css解密书的时候写的笔记，最后展示了一个夜空的背景效果。如图所示粘贴代码。star-bg{width:600px;高度：600px；边距：20px；背景色：#000；背景图像：径向渐变（白色，rgba（255、255、255，.2）2px，透明40px），径向渐变（白色，rgba（255,255,255,.15)1px,transparent30px),radial-gradient(white,rgba(255,255,255,.1)2px,transparent40px),radial-gradient(rgba(255,255,255,.4)),rgba(255,255,255,.1)2px,透明30px);背景尺寸：600px600px，350px350px，250px250px，150px150px；背景位置：00、40px60px、130px270px、70px100px；}还有更多内容等我开发……加油加油！！！
