徑向漸變做缺角效果
標籤：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，如果盒子需要超出做其他效果，就會引起矛盾了，即使不矛盾也共計需要四個元素或偽元素做遮罩。如果不喜歡上面那種取巧的方式，那下面這種方式就值得一試了。
開始之前先簡單介紹一下徑向漸變
- 標準寫法：radial-gradient(center, shape size, start-color, …, last-color)。
- CSS3屬性，所以使用前和書寫時都要考慮相容性。
- 第一個引數定義位置，預設為center。
- 第二個引數定義形狀和大小， 預設橢圓ellipse 最遠角落farthest-corner。
- 剩餘引數定義顏色列表。
一個簡單的徑向漸變例子
<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表示漸變的範圍從中心到最遠的元素角落，最後是從內到外的顏色漸變列表。以下為效果圖：
認識漸變
現在要實現設計稿的效果要解決兩個問題：
- 漸變色的取值。
- 多個漸變的疊加。
直接上程式碼，為了看出漸變內的陰影效果，加大了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前端開發工程師，代表作品：口紅挑戰網紅小遊戲、服務端渲染官網。擅長網站建設、公眾號開發、微信小程式開發、小遊戲、公眾號開發，專注於前端領域框架、互動設計、影象繪製、資料分析等研究。
一起並肩作戰： [email protected]
訪問 www.talkmoney.cn 瞭解更多