【前端切图】CSS文字渐变和背景渐变
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()：色站有兴趣可以自行了解一下
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.06.06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
