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

具體效果見連接