1、前言
CSS提供了一種繪制漸變圖的機制酣倾，這個漸變的機制可以接受任何圖片的屬性聯合使用逼泣，包括background-image玫镐，我們可以嘗試使用一個漸變背景：
.profile-box {
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, #0c3662 0%, #dee3eb 100%);
}
漸變背景圖.png
2、瀏覽器支持條件
有些舊版本的WebKit瀏覽器只支持線性漸變
3、線性漸變
使用到的linear-gradient()函數瞭吃，可以假設一條線碌嘀，從元素頂部到底部繪制了一個漸變背景，這條線的角度由這個函數的前面關鍵字（to歪架，bottom）股冗，位置由0%處的顏色是淺灰色，而位置100%處也就是元素頂部的顏色是深藍色和蚪。
漸變線的方向可以使用關鍵字to止状，再加上一個表示邊的（top、right攒霹、bottom怯疤、left）或者使用角來表示（top left、top right催束、bottom left集峦、bottom right）的關鍵字來指定。
此外還可以使用deg單位指定漸變線的角度抠刺，0deg表示垂直向上塔淤，增大角度值就意味著沿順時針方向旋轉，直到360deg速妖，度數表示繪制漸變的方向高蜂，因此起點就在我們指定的相反方向。
當設置為45deg的漸變：
.profile-box {
width: 100%;
height: 100%;
background-image: linear-gradient(45deg, #dee3eb, #0c3662);
}
對角漸變的起點與終點位置.png
4罕容、默認值及色標位置
線性漸變的默認方向是自上而下的妨马，而且0%和100%分別表示第一個和最后一個色標的位置，因此杀赢，可以簡寫為：
background-image: linear-gradient(#0c3662, #dee3eb);
新增色標若未指定位置烘跺，則在0%~100%范圍內取均值，比如：有3個未指定位置的色標脂崔，那么它們的位置分布為0%滤淳、50%、100%
background-image: linear-gradient(red,blue,yellow);
image.png
除了百分比外砌左，還可以使用絕對值指定色標的位置脖咐，比如：
background-image: linear-gradient(#cfdfee, #8da9cf 100px);
image.png
這種寫法漸變是頂部從淺藍色開始漸變，往下走100px之后過渡到深藍色汇歹，然后一直到底部都是深藍色屁擅。
