徑向漸變作缺角效果

---

標籤：CSS樣式，漸變

---

缺角效果

效果

話很少說直接上設計稿

設計稿

不仔細的前端開發者稍不注意就會忽略一些細節，尤爲是兩個缺角效果就不會完美的實現。

圓角實現

這個頁面的主體是兩個圓角的盒子組成，有些圖方便或者不仔細的前端開發者可能就直接兩個盒子貼合。

爲了方便，咱們不實現設計稿中的所有細節，只將其中最重要的部分提出來用以說明問題，html結構以下：

<div class="container">
  <div class="banner">banner部分</div>
  <main>主體</main>
</div>

接下來咱們分析一下圓角實現的問題：

.container {
  display: inline-block;

  border: 2px solid #000;
  padding: 30px;

  font-size: 40px;
  text-align: center;

}
.banner {
  border-bottom: 1px dashed #ddd;
  border-radius: 5px 5px 10px 10px;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.15);
  width: 350px;
  height: 150px;

  background-color:rgba(234, 169, 84, .1);
}
main {
  border-radius: 10px 10px 5px 5px;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.15);
  width: 350px;
  min-height: 400px;

  background-color: #fff;
}

圓角實現很是簡單，可是缺陷顯而易見，缺角凹陷的方向不對，對於追求細節的客戶是絕對接收不了的。

圓角實現效果圖

遮罩缺角

相信大部分人應該會想到，用元素去作一個白底遮罩。

只用稍微修改banner部分

.banner {
  position: relative;

  border-bottom: 1px dashed #ddd;
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.15);
  width: 350px;
  height: 150px;

  background-color:rgba(234, 169, 84, .1);
}

.banner:before {
  position: absolute;
  left: -10px;
  bottom: -10px;

  border-radius: 50%;
  width: 20px;
  height: 20px;

  background-color: #fff;

  content: '';
}
.banner:after {
  position: absolute;
  right: -10px;
  bottom: -10px;

  border-radius: 50%;
  width: 20px;
  height: 20px;

  background-color: #fff;

  content: '';
}

如下爲效果圖：

遮罩實現1

徑向漸變

增長新元素的作法可能有些開發者並不喜歡，而且若是盒子的shadow再明顯一點很容易看出兩個圓形遮罩的存在，這樣就須要對兩個盒子使用overflow: hidden，若是盒子須要超出作其餘效果，就會引發矛盾了，即便不矛盾也共計須要四個元素或僞元素作遮罩。若是不喜歡上面那種取巧的方式，那下面這種方式就值得一試了。

開始以前先簡單介紹一下徑向漸變

1. 標準寫法：radial-gradient(center, shape size, start-color, …, last-color)。
2. CSS3屬性，因此使用前和書寫時都要考慮兼容性。
3. 第一個參數定義位置，默認爲center。
4. 第二個參數定義形狀和大小， 默認橢圓ellipse 最遠角落farthest-corner。
5. 剩餘參數定義顏色列表。

一個簡單的徑向漸變例子

<style>
div {
  width: 200px;
  height: 200px;

  background: radial-gradient(center, circle, farthest-corner, red, orange, yellow, blue, green);
}
</style>
<div></div>

center表示漸變的中心在元素中心，circle表示漸變的形狀爲圓形,farthest-corner表示漸變的範圍從中心到最遠的元素角落，最後是從內到外的顏色漸變列表。如下爲效果圖：

認識漸變

如今要實現設計稿的效果要解決兩個問題：

1. 漸變色的取值。
2. 多個漸變的疊加。

直接上代碼，爲了看出漸變內的陰影效果，加大了box-shadow

.banner {
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.3);
  width: 350px;
  height: 150px;

  background-color:rgba(234, 169, 84, .2);

  background-image: -webkit-radial-gradient(
    0 100%,
    circle farthest-corner,        
    #f2f2f2 10px,
    transparent 10px
  ),
    -webkit-radial-gradient(
    100% 100%,
    circle farthest-corner,
    #f2f2f2 10px,
    transparent 10px
  );
  background-image: radial-gradient(
    0 100%,
    circle farthest-corner,
  #f2f2f2 10px,
    transparent 10px
  ),
    radial-gradient(
    100% 100%,
  #f2f2f2 10px,
    transparent 10px
  );
}
main {
  border-radius: 0 0 5px 5px;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.3);
  width: 350px;
  min-height: 400px;

  background-image: -webkit-radial-gradient(
    0 0,
    circle farthest-corner,
    #f2f2f2 10px,
    transparent 10px
  ),
    -webkit-radial-gradient(
    100% 0,
    circle farthest-corner,
    #f2f2f2 10px,
    transparent 10px
  );
  background-image: radial-gradient(
    0 0,
    circle farthest-corner,
    #f2f2f2 10px,
    transparent 10px
  ),
    radial-gradient(
    100% 0,
    #f2f2f2 10px,
    transparent 10px
  );
}

這實際會引發一個新問題，分割線須要用另外一內部元素實現，不然分割線的長度不對，解決好這個問題後的效果圖：

漸變實現
漸變實現的好處還在於，能在徑向漸變時直接設置顏色列表，在缺角內模擬盒子陰影效果。顏色列表直接影響到缺角內的陰影是否協調，必須與盒子的box-shadow融爲一體，從而達到以假亂真的效果。

 

使用徑向漸變還有一個小技巧：能夠用background-size設置大小，上個例子能夠認爲是兩個漸變疊加在一塊兒了，只是重疊的部分被設置爲了transparent透明，若是你遇到一個需求不能設置將重疊部分設置爲透明，那麼能夠像設置背景圖同樣設置背景漸變。每一個background-***中的值均可以用,分隔，達到設置多個背景漸變不一樣屬性的效果。

    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 0 100%,100% 100%;

缺角效果能夠用多種方式實現，帶box-shadow的缺角並很差作，用徑向漸變能夠模擬shadow效果，顏色列表的規劃相當重要。學會了徑向漸變能夠作不少複雜的效果，不再用擔憂設計大佬忘記切圖了。

做者簡介：葉茂，蘆葦科技web前端開發工程師，表明做品：口紅挑戰網紅小遊戲、服務端渲染官網。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發，專一於前端領域框架、交互設計、圖像繪製、數據分析等研究。
一塊兒並肩做戰： web@talkmoney.cn
訪問 www.talkmoney.cn 瞭解更多