CSS属于前端里面最简单的东西，也是最基本的，但真正也没有多少人敢说自己精通CSS，因为其中的学问还是太多了，但作为前端工程师，每一次写出那些花里胡哨的炫酷界面的时候，都少不了这些的支持，因此，一定要好好打打牢基础。
今天写一个特别简单的属性，CSS文字渐变，因为设计师为了体现一下炫酷的界面，把标题改成了渐变色了，虽然切了标题图片，但不如自己用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">化工厂人员定位系统</div> </body> </html>
效果图
背景渐变其实也很简单，顺便一道写了，移动端背景渐变，非常的年轻，符合90后年轻一代的审美，css3的这个渐变目前主要是应用在手机前端领域。
二：线性渐变 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>移动开发之css3实现背景渐变效果</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>
其实新的梯度渐变语法，新的语法包含四个渐变函数：
linear-gradient()： 线性梯度渐变 radial-gradient()： 径向梯度渐变 repeating-linear-gradient()：重复梯度渐变 repeating-radial-gradient()：色站
