创建渐变条纹linear-gradient以及一些感悟

渐变条纹linear-gradient一些感悟：

条纹背景其实用的还是比较少的，主要是因为色彩的调控，有点喧宾夺主，如果是只是简单的页面，非多内容的，其实也可以考虑用色彩比较淡一些的条纹做为背景，然后内容部分用颜色块去凸显主体，不过个人是没有这个调控能力，等以后有机会再试试吧！

先我们来讲讲linear-gradient的代码意思：

background: linear-gradient(#58a 50%,#999 70%);

这是一段常见的背景渐变，淡蓝色在上面，灰色在下面。如图：

这里的50%和70%就需要特别说明一下，这个百分百并不是指颜色占据的高度或者宽度，而是颜色渐变的起始点、结束点，从50%开始渐变，到70%结束渐变！

既然知道了这是起止点，那么我们再回顾一下渐变的一个定义：

当某个色标的位置值小于前面时，默认使用前面所有位置值最大的值！

也就说如果我们第一个值是50%,第二个值49%，这样系统会自动判断这个49%为50%，因为你渐变不可能还可以往回渐变的，这完全就是逻辑上的错误，这样其实也有一个好处，我们可以通过这个特性去创建条纹背景，你试想一下，当你的渐变的距离等于0的时候，你所得到的就是纯色的背景了。

注意：背景色他的叠加方式是，第一写的浮动在最上面，第二写的浮动下第一个下面，所以，如果你第二个颜色值的宽度小于第一个，第二个颜色是完全看不到的，被遮挡的。

于是乎:

background: linear-gradient(#58a 50%,#999 0);

效果很符合我们的想象，那么我们再多加几个颜色，来创建条纹。

background:linear-gradient(#58a 25%,#999 0,#999 50%,blue 0,blue 75%,red 0);

简单的条纹创建成功，但是我们这样只是设置的一整块的百分比，如果我们要让他每条宽度都是15px，而且只有这四个颜色，怎么弄，我们不可能知道一个网页他的高度，而且也不可能一条一条去写吧，这是不可能做到的，于是乎我们应该要想到backgroun-size，用size去控制渐变的高度，于是乎：

background:linear-gradient(#58a 25%,#999 0,#999 50%,blue 0,blue 75%,red 0);
background-size: 100% 60px;

x轴我们让他宽度100%填满，y轴我们是只设置4个颜色，每个颜色15px，就是4*15=60px,加上背景默认是repeat的，一个条纹渐变完美制作完毕，你也可以自己调整不同的颜色宽度来达到自己喜欢的效果。

那么，简单的条纹我们已经制作完毕，我们下面来进阶：

如果我想让条纹倾斜，怎么办？
这时肯定有人会说，当然是在渐变里面添加角度就可以了啊，很简单的！
那么我们就按他所说的这么设置：

background:linear-gradient(45deg,#58a 25%,#999 0,#999 50%,blue 0,blue 75%,red 0);
background-size: 100% 60px;

你会发现你得到的完全是一个撕裂的图片，并不是我们想要的倾斜45度的条纹，完全是错误的。

这里我们要先知道几个条件：

1. 渐变里面的角度(deg)方向，他的颜色并不是从上到下了，而是从下到上，也就是第一个我们设置的是红色，那么设置了deg角度后，红色会出现在相反的方向，这点需要注意。
2. linear-gradient最多支持两条渐变条纹倾斜，且倾斜角度只能是45deg、45+45+45...想要增加角度只能是加减45。
3. 虽然说最大只支持两条，但是写的时候，你需要重复写一次，也就是一共是四条，只是重复了而已。
4. backgroud-size必须是正方形，如30px 30px。

代码：

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

45deg:

90deg:

135deg:

基本上就如上，还有一些角度就不一一展示了，自行测试即可。
上面的图你可以看到第一个颜色#58a一直是处于最底部的，所以，你要是想让他显示在顶部，就是要设置不同的角度，比如45deg就要改成135deg才对。

那么倾斜条纹我是是已经会了，但是有局限啊，只能45deg，不符合我们css进阶的需求，于是，下面我们介绍一些css3的渐变代码：repeating-linear-gradient

这个repeating-linear-gradient有什么特别的地方呢？

1. 可以创建任意角度的条纹。
2. 不需要设置background-size也能控制条纹宽度。
3. 想设置几个颜色就设置几个颜色。

具体代码如下：

background:repeating-linear-gradient(45deg,#58a 0,#58a 5px,#666 0,#666 10px,blue 0,blue 15px,red 0,red 20px);

十分简单，唯一需要注意的就是，从第一条颜色开始，他的渐变开始点就是要是0。

其次这个要注意就是ie11才支持，旧的ie版本是不支持的，opera mini不支持，现代浏览器都已经支持了，所以，为了兼容性，你还需要在前面加上一个兼容背景色：

background-color: #eee;
background:repeating-linear-gradient(45deg,#58a 0,#58a 5px,#666 0,#666 10px,blue 0,blue 15px,red 0,red 20px);

好了，讲了这么多我们来弄个实际例子，我们用条纹来模拟信封的边框吧！

这张是我百度找的一张信封的图片，我们用css来模拟下这个效果！

我先是完全按照这个信封风格做：

.div1 {
    width: 800px;
    height: 400px;
    border: 10px solid transparent;
    background-color: #eee;
    background:linear-gradient(white,white) padding-box,
    repeating-linear-gradient(45deg,transparent 0,transparent 10px,#9c070d 0,#9c070d 20px,transparent 0,transparent 30px,#0032dd 0,#0032dd 40px) border-box;
}

效果图：

发现效果不好，因为边角都透明了，实物是有底色的，所有他透明是没问题，而我们单纯照搬会出问题，所以我们把颜色的位置调整下！

repeating-linear-gradient(45deg,#9c070d 0,#9c070d 10px,transparent 0,transparent 20px,#0032dd 0,#0032dd 30px,transparent 0,transparent 40px) border-box;

效果图：

这样看，还不错！

本期感悟到此结束，有兴趣也可以留言你自己的想法，哈哈...