CSS屬于前端里面最簡單的東西澄耍，也是最基本的顷级，但真正也沒有多少人敢說自己精通CSS，因為其中的學問還是太多了，但作為前端工程師郭脂，每一次寫出那些花里胡哨的炫酷界面的時候，都少不了這些的支持坛悉，因此顺献，一定要好好打打牢基礎。
今天寫一個特別簡單的屬性定嗓，CSS文字漸變蜕琴，因為設計師為了體現(xiàn)一下炫酷的界面，把標題改成了漸變色了宵溅，雖然切了標題圖片凌简，但不如自己用css寫，之后還可以更改標題恃逻。
一： CSS文字漸變
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.text-gradient {
display: inline-block;
color: green;
font-size: 40px;
font-family: '微軟雅黑';
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#5b62fd), to(#66b0fd));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="text-gradient">化工廠人員定位系統(tǒng)</div>
</body>
</html>
效果圖
背景漸變其實也很簡單雏搂，順便一道寫了，移動端背景漸變寇损，非常的年輕凸郑，符合90后年輕一代的審美，css3的這個漸變目前主要是應用在手機前端領(lǐng)域润绵。
二：線性漸變 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>移動開發(fā)之css3實現(xiàn)背景漸變效果</title>
<style type="text/css">
.linear{
/*仿支付寶背景藍色漸變*/
background-image: linear-gradient(to top, #66b7f9,#1c82d4);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
其實新的梯度漸變語法线椰，新的語法包含四個漸變函數(shù)：
linear-gradient()： 線性梯度漸變
radial-gradient()： 徑向梯度漸變
repeating-linear-gradient()：重復梯度漸變
repeating-radial-gradient()：色站
有興趣可以自行了解一下
移動開發(fā)之css3實現(xiàn)背景幾種漸變效果：http://www.reibang.com/p/a3019e2dd1a4
附上端午節(jié)小長假學習計劃：Element UI + NodeJs(Express)全棧開發(fā)后臺管理界面https://www.bilibili.com/video/av50341412/?p=1
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1。90后前端妹子尘盼，愛編程憨愉，愛運營，文藝與代碼齊飛卿捎，魅力與智慧共存的程序媛一枚配紫。堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見午阵，前端資源下載群：440185135
