使用css直接寫漸變，對於現在而言，應該屬於比價簡單的一件事了，在一定程度上，扁平化的設計趨勢的出現，減少了使用漸變色的場景，但是並不影響我們逐漸的熟悉線性漸變Linear-gradient的寫法。
更進一步的話，應該就是斑馬線的實現了，只要多謝幾遍，其實也沒什么難度。
最近在學習《css揭秘》，里面關於linear-gradient的用法，真的讓人有大開眼界的感覺。
在他講解的切角效果的章節里面，擴展幾個css圖形變化。
1、單個切角
background: linear-gradient(-45deg, transparent 15px, #58a 0);
通過調整角度，可以做成不同角度的切腳效果，調整transparent后面的數字值，可以調整切角效果的大小。
2、兩個切角
background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
在超過一個切角的效果的時候，就需使用css3的background應用多層背景的特性來完成多重漸變，從而實現多個切角，並且要確保背景不得重復（background-repeat），划分每個背景圖片的大小（background-size）。
下面實現的效果也還都屬於簡單效果，也是在不斷重復漸變，並確認大小。
利用角度確定切角形成的角度大小，利用transparent后面的值，確定切角形成的形狀大小，利用left,right, top, bottom確定切角在每一個切片區的位置。
這個也屬於四個切角效果，唯一要點是把切角都放在一個角落里面，導致看起來就是個菱形的效果，如果將顏色改變一下，就是我們正常看見的一個正規的合乎視覺的菱形。
background: linear-gradient(-60deg, transparent 15px, #58a 0) top left,
linear-gradient(60deg, transparent 15px, #58a 0) top right,
linear-gradient(-120deg, transparent 15px, #58a 0) bottom left,
linear-gradient(120deg, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
background: linear-gradient(-60deg, transparent 15px, #58a 0) top left,
linear-gradient(60deg, transparent 15px, #58a 0) bottom left,
linear-gradient(-120deg, transparent 15px, #58a 0) top right,
linear-gradient(120deg, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
background: linear-gradient(-45deg, transparent 15px, #58a 0) top left,
linear-gradient(45deg, transparent 15px, #58a 0) top right,
linear-gradient(-90deg, transparent 10px, #58a 0) bottom left,
linear-gradient(90deg, transparent 10px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
內凹圓角的實現
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
單個標簽實現多個圓
background: radial-gradient(circle at center center, transparent 15px, #58a 0) top left,
radial-gradient(circle at center center, transparent 15px, #58a 0) top right,
radial-gradient(circle at center center, transparent 15px, #58a 0) bottom left,
radial-gradient(circle at center center, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
background: radial-gradient(circle at center right, transparent 15px, #58a 0) top left,
radial-gradient(circle at center left, transparent 15px, #58a 0) top right,
radial-gradient(circle at center left, transparent 15px, #58a 0) bottom left,
radial-gradient(circle at center right, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
不斷實驗的話，能夠發現更多更好玩的形狀。
補充一個線性漸變的使用場景，自定義文字下划線:
<p class="text-decoraion">在一定程度上，扁平化的設計趨勢的出現，減少了使用漸變色的場景，但是並不影響我們逐漸的熟悉線性漸變Linear-gradient的寫法。</p>
.text-decoration{
color: red;
line-height: 2;
background: linear-gradient(currentColor, currentColor) no-repeat 0 2.15em;
background-size: 40px 1px;
}
通過background-position的位置，定位下划線所在的位置，通過background-size的第一個值width設置下划線長度，第二個值height設置下划線粗細，可以很細粒度的控制下划線的長寬和位置。