CSS揭秘之《条纹背景》

先来讲说渐变吧

background: linear-gradient(#fb3 20%, #58a 80%);

效果图以下所示：也就是说真正的渐变只出如今容器 60%（从20%到80%） 的高度区域

若是把两个色标合在一块儿，会怎样呢
w3c是这样规定的“若是多个色标具备相同的位置， 它们会产生一个无限小的过渡区域，
过渡的起止色分别是第一个和最后一个指定值。 从效果上看， 颜色会在那
个位置忽然变化， 而不是一个平滑的渐变过程”
也就是说假设以下设置的话：

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

会产生以下所示效果

由于渐变是一种由代码生成的图像， 咱们能像对待其余任何背景图像那
样对待它， 并且还能够经过 background-size 来调整其尺寸

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

会产生以下效果：

可是如今这样的代码就会有一个问题，若是我想改变50%则须要改变两处
根据w3c的规定“若是某个色标的位置值比整个列表中在它以前的色标的位置值都要
小， 则该色标的位置值会被设置为它前面全部色标位置值的最大值。”
因此上述代码可改成：由于若是咱们把第二个色标的位置值设置为 0， 那它的位置就
老是会被浏览器调整为前一个色标的位置值

background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;

具体效果见连接
同理能够建立多重边框：

background: linear-gradient(#fb3 33.3%,
#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

备注：其实写法不止一种

/* background: linear-gradient(#fb3 25%, #58a 0,#58a 50%,yellowgreen 0,yellowgreen 75%,red 0,red 100%); */
            /* 两种均可以 */
            /* background: linear-gradient(#fb3 25%, #58a 0,#58a 50%,yellowgreen 0,yellowgreen 75%,red 0); */

垂直条纹：在开头加上一个额外的参数来指定渐变的方向

body {
            background: linear-gradient(to right, #fb3 50%, #58a 0);
            background-size: 30px 100%;
        }

具体效果见连接
若是咱们想要45度角的条纹背景，可能会想用以下代码来实现：

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

但是获得的效果倒是这样的

事实上的原理是这样子的，以下图所示，也就是说单个切片中是包含四个条纹的，

因此代码最后演变为：

body {
            background: linear-gradient(45deg,
            #fb3 25%, #58a 0, #58a 50%,
            #fb3 0, #fb3 75%, #58a 0);
            background-size: 42.4px 42.4px;
        }

具体效果见连接
上面只说了45deg和90deg这种特殊角度的条纹，若是要30deg或60deg的怎么办？
来看看repeating-linear-gradient的威力吧
其实上面45deg可简化为：

body {
            background: repeating-linear-gradient(45deg,
            #fb3, #fb3 15px, #58a 0, #58a 30px);
            background-size: 42.4px 42.4px;
        }

利用repeating-linear-gradient可制做60deg的条纹效果：

html {
            background: repeating-linear-gradient(60deg,
            #fb3, #fb3 15px,
            #58a 0, #58a 30px);
            height: 100%;
            /* 如下方式也能够实现，效果有一丁点儿差异，多是个人background-size 没有算准确 */
            /* background: repeating-linear-gradient(45deg,#fb3 0,#fb3 25%,#58a 0,#58a 50%);
            background-size: 42.426406871px 42.426406871px; */
        }

具体效果见连接

有一个小秘诀在于：条纹颜色都是相近的，只是在明度方面有着轻微的差别
因此咱们能够：再也不为每种条纹单独指定颜色， 而是把最深的颜色指定为背景色， 同时把半透明白色的条纹叠加在背景色之上来获得浅色条纹

html {
            background: #58a;
            background-image: repeating-linear-gradient(30deg,
            hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px,
            transparent 0, transparent 30px);

            height: 100vh;
        }

具体效果见连接