css 文字渐变-[Front Cut] CSS 文本渐变和背景渐变

CSS是后端最简单最基本的东西，但是没有多少人敢说自己精通CSScss 文字渐变，因为里面的知识还是太多了，但是作为一个前端工程师，每次写这些花哨的东西还有眼花缭乱的界面，每次都少不了这样的支持，所以一定要打好基础。

今天写了一个很简单的属性，CSS文字渐变css 文字渐变，因为设计师为了突出界面炫丽，把标题改成了渐变色。 虽然标题图片被剪掉了，但是最好用CSS来写，以后还可以修改标题。

一：CSS文字渐变

    
        
        
        
            .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;
            }                       
        
    
    
        
化工厂人员定位系统
    

效果图

背景渐变看起来很简单。 顺便说一句，移动端的背景渐变非常年轻化，符合80年代年轻一代的审美。 css3的这种渐变目前主要用在手机后端领域。

二：线性梯度 Linear-gradient()：线性梯度渐变

.linear{
/*仿支付宝背景蓝色渐变*/
background-image: linear-gradient(to top, #66b7f9,#1c82d4);
height: 15rem;
}

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

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

有兴趣的话可以自己去了解一下

移动开发的CSS3实现后台的几种渐变效果：

附端午假期学习计划：Element UI + NodeJs(Express)全栈开发后台管理界面

原作者：七车妹科技博客：。 90后后端美女，热爱编程，热爱运营，艺术与代码齐飞，魅力与智慧并存。 坚持总结工作中遇到的技术问题，坚持记录工作中所想、所见。 前端资源下载群：440185135