背景&边框之魔法武器CSS3

简述

在页面的构建过程中，离不开背景、边框，背景和边框就是最基本的设置了
UI为了实现一些特定的视觉效果，单一的纯色背景已经不能满足现有的效果了。越来越多的图片背景开始盛行。这个在一定程度上也特别方便，当然，也会经常碰到一些不能使用重复实现的背景效果，此时就需要切出来一张大幅的背景图片，图片越大就会拖慢页面的速度，用户体验的效果就会差强人意。
当下css3已经普及，虽然并不能很好的向下兼容，却可以做好回退。
在这里，我们使用纯css来实现一些相对复杂的背景和边框效果，这些效果不能很好的实现向下兼容。

背景

1.条纹背景
条纹背景，我们可以通过background的属性 linear-gradinet 来实现。通过实操来查看效果

background: linear-gradient(#fba, #58a);

背景效果：

可以看到，呈现的效果就是两种颜色的渐变，通过改变色标的位置，可以拉近两个色标，那把两个色标重合在一起，就会产生条纹的效果，如图

这样就是没有平滑渐变的条纹效果了，在应用中，我们可以使用background-size来调整条纹的尺寸，

background: linear-gradient(#fba, #58a);
background-size: 100% 20px;

这样就有了如图的效果

改变色标的位置，就可以实现不等宽的条纹效果
那如果想要超过两种颜色的条纹效果，也是很容易实现的

background: linear-gradient(#fba 33.3%,#58a 0, #58a 66.6%, #9acd32 0);
background-size: 100% 30px;

以上都是水平的条纹，那垂直的条纹甚至斜向的条纹能实现吗，当然可以的，我们只需要修改渐变的方向就可以实现了
垂直条纹

background: linear-gradient(to right, #fba 33.3%,#58a 0, #58a 66.6%, #9acd32 0);
background-size: 100% 30px;

斜向条纹
看都斜向，大家的第一想法肯定是去改变渐变的方向。如：

background: linear-gradient(45deg, #fba 50%, #58a 0);
background-size: 30px 30px;

然后，我们看到的效果是

很明显的，这个效果并不是我们想要的斜纹。原因就是我们只是把每个背景块的渐变旋转了45deg，并不是把整个重复的背景都旋转了。那如果我们想实现条纹效果，我们就要找到一个可重复的背景贴片，来实现无缝的拼接，实现如下的效果

在上图中，黑色区域就是一个可重复的背景贴片，这样就达到了预期的效果。实现的代码为：

background: linear-gradient(45deg, #fba 25%, #58a 0, #58a 50%, #fba 0, #fba 75%, #58a 0);
background-size: 42px 42px;

我们添加了更多的色标，也加大了贴片的区域范围，当然这个我们是通过勾股定理计算得到的这个近似值，但是如果每次因为改变角度，或者条纹宽度我们都要去计算一下值，这个是事倍功半的方法，反倒增加了我们的工作量。
更好的实现斜向条纹，linear-gradient有一个循环式的加强版： repeating-linear-gradient(),它的工作原理是色标可以无限循环重复的，直到填满了整个背景

对应的代码：

background: repeating-linear-gradient(60deg, #fba, #fba 15px, #58a 0, #58a 30px);

就是这样，我们可以通过很简单的一段代码，不需要复杂的计算，就实现想要的效果！

接下来，我们来延伸一下，来实现更复杂一点的背景效果，比如，网格等常见的图案

background: #fba;
background-image: linear-gradient(white 2px, transparent 0),
                  linear-gradient(90deg, white 2px, transparent 0),
                  linear-gradient(rgba(255,255,255,.3) 1px, transparent 0),
                  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

使用css来完成背景，减少了好http请求，多数情况下都还是可以实现的，如果要设计到兼容问题，那可能有些不现实了，那背景图片还是最好的解决办法，
我是在学习css揭秘这本书的时候写的笔记，
最后展示一个夜空的背景效果
如图

代码贴上

.star-bg{width: 600px; height: 600px; margin: 20px;
        background-color: #000;
        background-image: radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 40px),
                          radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 30px),
                          radial-gradient(white, rgba(255, 255 ,255, .1) 2px, transparent 40px),
                          radial-gradient(rgba(255, 255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
        background-size: 600px 600px, 350px 350px, 250px 250px, 150px 150px;
        background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
    }

还有更多的内容等着我去开发....加油加油！！！