移動(dòng)端背景漸變，非常的年輕，符合90后年輕一代的審美，css3的這個(gè)漸變目前主要是應(yīng)用在手機(jī)前端領(lǐng)域。
產(chǎn)品設(shè)計(jì)中使用漸變色的好處：
1：觀眾不至于眼睛過于疲勞（如果是淺色背景，3個(gè)小時(shí)下來極容易造成觀眾閉上眼睛還有殘影，眼睛會(huì)極度疲勞）。
2：優(yōu)雅而低調(diào)的深淺色調(diào):
3：純色單調(diào) 漸變色一是色彩不單調(diào) 二是在有限空間內(nèi)盡可能制造空間感
4：稍微加點(diǎn)漸變可以讓純色層顯得更細(xì)膩，不那么單調(diào)。畫面顯得更豐富。
代碼如下，非常簡(jiǎn)單
新的梯度漸變語(yǔ)法，新的語(yǔ)法包含四個(gè)漸變函數(shù)：
linear-gradient()： 線性梯度漸變
radial-gradient()： 徑向梯度漸變
repeating-linear-gradient()：重復(fù)梯度漸變
repeating-radial-gradient()：色站
一：線性漸變 linear-gradient()： 線性梯度漸變
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移動(dòng)開發(fā)之css3實(shí)現(xiàn)背景漸變效果</title>
<style type="text/css">
.linear{
/*仿支付寶背景藍(lán)色漸變*/
background-image: linear-gradient(to top, #66b7f9,#1c82d4);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
二：radial-gradient徑向漸變
代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移動(dòng)開發(fā)之css3實(shí)現(xiàn)背景漸變效果</title>
<style type="text/css">
.linear{
/*background-image: linear-gradient(to top, #66b7f9,#1c82d4);*/
background: radial-gradient(#ffffff,#1c82d4);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
三： repeating-linear-gradient()：重復(fù)梯度漸變
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移動(dòng)開發(fā)之css3實(shí)現(xiàn)背景漸變效果</title>
<style type="text/css">
.linear{
background: repeating-linear-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
四：repeating-radial-gradient()：色站
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移動(dòng)開發(fā)之css3實(shí)現(xiàn)背景漸變效果</title>
<style type="text/css">
.linear{
background: repeating-radial-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
/全兼容的移動(dòng)端漸變寫法/
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #66b7f9,#1c82d4);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear,top,from(#66b7f9),to(#1c82d4));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #66b7f9, #1c82d4);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #66b7f9, #1c82d4);
/* default */
background: linear-gradient(top, #66b7f9, #1c82d4);
background-color: #1c82d4;
文末福利：
福利一：前端，Java，產(chǎn)品經(jīng)理，微信小程序，Python等資源合集大放送：http://www.itdecent.cn/p/e8197d4d9880
福利二：微信小程序入門與實(shí)戰(zhàn)全套詳細(xì)視頻教程
原文作者：祈澈姑娘
技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe190后前端妹子，愛編程，愛運(yùn)營(yíng)，愛折騰。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題，堅(jiān)持記錄工作中所所思所見，歡迎大家一起探討交流。
文末福利：關(guān)注「編程微刊」公眾號(hào) ，在微信后臺(tái)回復(fù)「領(lǐng)取資源」，獲取IT資源200G干貨大全。公眾號(hào)回復(fù)“1”，拉你進(jìn)程序員技術(shù)討論群
