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()：色站
有兴趣可以自行了解一下
移动开发之css3实现背景几种渐变效果：https://www.jianshu.com/p/a3019e2dd1a4
附上端午节小长假学习计划：Element UI + NodeJs(Express)全栈开发后台管理界面https://www.bilibili.com/video/av50341412/?p=1
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1。90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，前端资源下载群：440185135
网友评论