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

先來說說漸變吧

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

具體效果見鏈接