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

广告位

CSS属于前端里面最简单的东西,也是最基本的,但真正也没有多少人敢说自己精通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> 

效果图

【前端切图】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文字渐变和背景渐变

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

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

金罗老师

关于作者: 金罗老师

为您推荐

广告位

发表评论