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>

效果图


 
【前端切图】CSS文字渐变和背景渐变_css
 

背景渐变其实也很简单，顺便一道写了，移动端背景渐变，非常的年轻，符合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>
 
【前端切图】CSS文字渐变和背景渐变_css_02
 

其实新的梯度渐变语法，新的语法包含四个渐变函数：

linear-gradient()： 线性梯度渐变
radial-gradient()： 径向梯度渐变
repeating-linear-gradient()：重复梯度渐变
repeating-radial-gradient()：色站

有兴趣可以自行了解一下
移动开发之css3实现背景几种渐变效果：https://www.jianshu.com/p/a3019e2dd1a4

附上端午节小长假学习计划：Element UI + NodeJs(Express)全栈开发后台管理界面https://www.bilibili.com/video/av50341412/?p=1

原文作者：祈澈姑娘 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见