在日常前端開發(fā)中，漸變應(yīng)該是小伙伴常用的屬性之一了。但是，你真的把漸變用透了嗎？
漸變除了可以用于顏色過渡之外，還有哪些用法呢？小伙伴們可以盡情想象下 >_<
在介紹漸變的神奇用法之前，我們先來看看它的類型及日常用法：

漸變的類型及日常應(yīng)用

• 線性漸變

.linear {
    background: linear-gradient(to top, red, #fff);
}

線性漸變.png

• 徑向漸變

.radial {
      background: radial-gradient(45deg, red, #fff);
}

徑向漸變.png

上面兩個(gè)粗糙的例子，是漸變的日常用法，多用于顏色間的過渡變化。那么，我們還可以利用漸變來做出什么樣有趣的事呢？

漸變屬性挖掘

假設(shè)我們需要做一個(gè)45度角顏色過渡的背景，代碼如下：

 background: linear-gradient(45deg, red 20%, #eee 80%);
 background: linear-gradient(45deg, red 20%, #eee 40%);
 background: linear-gradient(45deg, red 20%, #eee 20%);

小伙伴仔細(xì)看下這三個(gè)寫法，前面固定red 20%，隨著后面#eee的百分比逐漸接近red的20%，會(huì)發(fā)生什么有趣的事呢？
好了，直接上圖。

漸變.png

可以看到，當(dāng)兩者的百分比不斷接近的時(shí)候，漸變的邊界區(qū)域也越來越小，直到兩者相等，漸變的效果直接消失了。

由此可以得出一個(gè)結(jié)論：

"如果多個(gè)色標(biāo)具有相同的位置，它們會(huì)產(chǎn)生一個(gè)無限小的過渡區(qū)域， 過渡的起止色分別是第一個(gè)和最后一個(gè)指定值。從效果上看，顏色會(huì)在那 個(gè)位置突然變化，而不是一個(gè)平滑的漸變過程。"
—— CSS圖像（第三版）

根據(jù)這個(gè)結(jié)論，我們可以利用漸變來做出很多有趣的效果。

構(gòu)造多邊形

八邊形.png

<div id="cut-2"></div>
<style>
#cut-2 {
      width: 150px;
      height: 150px;
      background: #58a;
      background: linear-gradient(135deg, transparent 30px, #58a 0) top left,
                  linear-gradient(-45deg, transparent 30px, #58a 0) bottom right,
                  linear-gradient(225deg, transparent 30px, #58a 0) top right,
                  linear-gradient(45deg, transparent 30px, #58a 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
}
</style>

圓形切角.png

<div id="cut-3"></div>
<style>
#cut-3 {
     width: 150px;
     height: 150px;
     background: #58a;
     background: radial-gradient(circle at top left, transparent 30px, #58a 0) top left,
                 radial-gradient(circle at bottom right, transparent 30px, #58a 0) bottom right,
                 radial-gradient(circle at top right, transparent 30px, #58a 0) top right,
                 radial-gradient(circle at bottom left, transparent 30px, #58a 0) bottom left;
     background-size: 50% 50%;
     background-repeat: no-repeat;
 }
</style>

構(gòu)造條紋圖案

垂直條紋.png

<div id="vertical-stripe-border"></div>
<style>
#vertical-stripe-border {
     width: 100px;
     height: 100px;
     background: linear-gradient(90deg, #fb3 50%, #58a 0);
     background-size: 30px 100%;
 }
</style>

斜向條紋.png

<div id="slant-stripe-progress"></div>
<style>
#slant-stripe-progress {
     width: 200px;
     height: 10px;
     background: repeating-linear-gradient(45deg,
                           #58a 0,
                           #58a 25%,
                           #fb3 0,
                           #fb3 50%) 0 / 20px 20px;
     border-radius: 10px;
}
</style>

構(gòu)造格子圖案

格子.png

<div id="grid-background"></div>
<style>
#grid-background {
      width: 100px;
      height: 100px;
      background-color: #fff;
      background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
                        linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
      background-size: 30px 30px;
}
</style>

構(gòu)造棋盤圖案

棋盤.png

<div id=""></div>
<style>
#chessboard-background {
    width: 100px;
    height: 100px;
    background-color: #eee;
    background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
                      linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
  }
</style>

畫出Vue logo

vue logo.png

#vue-logo {
    width: 100px;
    height: 116px;
    background: #39b981;
    background: linear-gradient(30deg, transparent 26px, #39b981 0) bottom left,
                linear-gradient(-30deg, transparent 26px, #39b981 0) bottom right,
                linear-gradient(150deg, transparent 26px, #39b981 0) top left,
                linear-gradient(-150deg, transparent 26px, #39b981 0) top right;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    position: relative;
}
#vue-logo::after {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    display: block;
    width: 70px;
    height: 60px;
    background: linear-gradient(60deg, transparent 50%,#fff 0,#fff 70%, #34485e 0,#34485e 90%, transparent 0) bottom left,
                linear-gradient(-60deg, transparent 50%,#fff 0,#fff 70%, #34485e 0,#34485e 90%, transparent 0) bottom right;
    background-repeat: no-repeat;
    background-size: 50% 100%;
}

參考資料

• 《CSS揭秘》