摘要：先來說說漸變吧效果圖如下所示也就是說真正的漸變只出現(xiàn)在容器從到的高度區(qū)域如果把兩個(gè)色標(biāo)合在一起，會(huì)怎樣呢是這樣規(guī)定的如果多個(gè)色標(biāo)具有相同的位置，它們會(huì)產(chǎn)生一個(gè)無限小的過渡區(qū)域，過渡的起止色分別是第一個(gè)和最后一個(gè)指定值。

先來說說漸變吧

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

效果圖如下所示：也就是說真正的漸變只出現(xiàn)在容器 60%（從20%到80%） 的高度區(qū)域

如果把兩個(gè)色標(biāo)合在一起，會(huì)怎樣呢
w3c是這樣規(guī)定的“如果多個(gè)色標(biāo)具有相同的位置， 它們會(huì)產(chǎn)生一個(gè)無限小的過渡區(qū)域，
過渡的起止色分別是第一個(gè)和最后一個(gè)指定值。 從效果上看， 顏色會(huì)在那
個(gè)位置突然變化， 而不是一個(gè)平滑的漸變過程”
也就是說假設(shè)如下設(shè)置的話：

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

會(huì)產(chǎn)生如下所示效果

因?yàn)闈u變是一種由代碼生成的圖像， 我們能像對(duì)待其他任何背景圖像那
樣對(duì)待它， 而且還可以通過 background-size 來調(diào)整其尺寸

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

會(huì)產(chǎn)生如下效果：

但是現(xiàn)在這樣的代碼就會(huì)有一個(gè)問題，如果我想改變50%則需要改變兩處
根據(jù)w3c的規(guī)定“如果某個(gè)色標(biāo)的位置值比整個(gè)列表中在它之前的色標(biāo)的位置值都要
小， 則該色標(biāo)的位置值會(huì)被設(shè)置為它前面所有色標(biāo)位置值的最大值。”
所以上述代碼可改為：因?yàn)槿绻覀儼训诙€(gè)色標(biāo)的位置值設(shè)置為 0， 那它的位置就
總是會(huì)被瀏覽器調(diào)整為前一個(gè)色標(biāo)的位置值

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

具體效果見鏈接
同理可以創(chuàng)建多重邊框：

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

備注：其實(shí)寫法不止一種

            /* 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); */

垂直條紋：在開頭加上一個(gè)額外的參數(shù)來指定漸變的方向

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

具體效果見鏈接
如果我們想要45度角的條紋背景，可能會(huì)想用如下代碼來實(shí)現(xiàn)：

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

可是得到的效果卻是這樣的

事實(shí)上的原理是這樣子的，如下圖所示，也就是說單個(gè)切片中是包含四個(gè)條紋的，

所以代碼最后演變?yōu)椋?/p>

        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的威力吧
其實(shí)上面45deg可簡(jiǎn)化為：

        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%;
            /* 以下方式也可以實(shí)現(xiàn)，效果有一丁點(diǎn)兒差別，可能是我的background-size 沒有算準(zhǔn)確 */
            /* background: repeating-linear-gradient(45deg,#fb3 0,#fb3 25%,#58a 0,#58a 50%);
            background-size: 42.426406871px 42.426406871px; */
        }

具體效果見鏈接

有一個(gè)小秘訣在于：條紋顏色都是相近的，只是在明度方面有著輕微的差異
所以我們可以：不再為每種條紋多帶帶指定顏色， 而是把最深的顏色指定為背景色， 同時(shí)把半透明白色的條紋疊加在背景色之上來得到淺色條紋

        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;
        }

具體效果見鏈接