在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！

基础样式：

.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

第一种方法，使用 background-cli、 text-fill-color：

.gradient-text-one{

    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

说明 ：

background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

第二种方法，使用 mask-image：

.gradient-text-two{

   color:red;

}

.gradient-text-two[data-content]::after{

    content:attr(data-content);

    display: block;

    position:absolute;

    color:yellow;

    left:0;

    top:0;

    z-index:2;

    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));

}

说明：

mask-image 和 background-image 一样，不仅可以取值是 图片路径，也可以是渐变色。

第三种方法，使用 linearGradient、fill：

.gradient-text-three{

    fill:url(#SVGID_1_);

    font-size:40px;

    font-weight:bolder;

}
<svg viewBoxs="0 0 500 300" class="svgBox">

    <defs>

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">

            <stop  offset="0" style="stop-color:yellow"/>

            <stop  offset="0.5" style="stop-color:#fd8403"/>

            <stop  offset="1" style="stop-color:red"/>

        </linearGradient>

    </defs>

    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>

</svg>

说明：

在SVG中，有两种主要的渐变类型：

线性渐变（linearGradient）
放射性渐变（radialGradient）
SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素

dom示例:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>CSS3渐变字体</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">

        *{margin:0;padding:0;}

        body,html{width:100%;height:100%;}

        .wrapper{width:80%;margin:0 auto;margin-top:30px;}

        .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

        .gradient-text-one{

            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);

            -webkit-background-clip:text;

            -webkit-text-fill-color:transparent;

        }

        .gradient-text-two{

            color:red;

        }

        .gradient-text-two[data-content]::after{

            content:attr(data-content);

            display: block;

            position:absolute;

            color:yellow;

            left:0;

            top:0;

            z-index:2;

            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));

        }

        .gradient-text-three{

            fill:url(#SVGID_1_);

            font-size:40px;

            font-weight:bolder;

        }

    </style>

</head>

<body>

    <section class="wrapper">

        <div class="panel panel-info">

            <div class="panel-heading">

                <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>

            </div>

            <div class="panel-body">

                <h3 class="gradient-text gradient-text-one">花样年华</h3>

            </div>

        </div>

        <div class="panel panel-warning">

            <div class="panel-heading">

                <h3 class="panel-title">方法2. mask-image</h3>

            </div>

            <div class="panel-body">

                <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>

            </div>

        </div>

        <div class="panel panel-danger">

            <div class="panel-heading">

                <h3 class="panel-title">方法3. svg linearGradient</h3>

            </div>

            <div class="panel-body">

                <svg viewBoxs="0 0 500 300" class="svgBox">

                    <defs>

                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">

                            <stop  offset="0" style="stop-color:yellow"/>

                            <stop  offset="0.5" style="stop-color:#fd8403"/>

                            <stop  offset="1" style="stop-color:red"/>

                        </linearGradient>

                    </defs>

                    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>

                </svg>

            </div>

        </div>

    </section>

</body>

</html>

效果：

前端技术分享点击：加入

css文字颜色渐变的3种实现的更多相关文章

  1. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  2. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  4. css Backgroud-clip (文字颜色渐变)

    首先来瞄一下background-clip,这个属性是干嘛的? 顾名思义,背景裁剪...   按照我自己的理解就是背景的显示区域 此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https:// ...

  5. css 边框颜色渐变的半圆

    1.需求有这么个东西,个人不习惯背景图片来解决,开始了css尝试. <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. css边框颜色渐变

    在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 <!DOCTYPE html> <html lang=&quo ...

  7. echarts背景颜色渐变的三种类型

    // 线性渐变,多用于折线柱形图,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的 ...

  8. CSS 竖线颜色渐变

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  9. CSS3 loading 和 文字颜色渐变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Python：Excel

    xlrd与xlwt:xls文件 如果不想看前半部分的基础知识,可以直接看最后的总结部分 1.两个模块 读xlrd 写xlwt import xlrd,xlwt 2.读 2.1 文件.表格信息的获取 打 ...

  2. appium滚动查找屏幕外的控件

    嗯,还是把自己做的实验保存一下 Appium1.12.1+python2.7 实验滚动,查找屏幕外控件以及控制seekbar scroll() 是根据页面中两个元素位置之间的距离进行滑动. 滑动寻找屏 ...

  3. LeetCode-018-四数之和

    四数之和 题目描述:给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 targe ...

  4. 『现学现忘』Docker基础 — 16、Docker中的基本概念和底层原理

    目录 1.Docker的底层原理 2.Docker中常用的基本概念 3.run命令的运行流程 4.为什么Docker比VM快 Docker架构图: 我们依照Docker架构图进行Docker基础概念的 ...

  5. Wordpress Calendar Event Multi View < 1.4.01 反射型xss漏洞（CVE-2021-24498）

    简介 WordPress是Wordpress基金会的一套使用PHP语言开发的博客平台.该平台支持在PHP和MySQL的服务器上架设个人博客网站.WordPress 插件是WordPress开源的一个应 ...

  6. BBS项目分布搭建三(个人站点时间归档补充，实现侧边栏跳转、无线级分类、实现文章详情页展示功能)

    BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans ...

  7. pandas连接数据库

    项目中使用pandas方法读取数据库数据可能用到的方法 使用pandas连接数据库 例如 mysql_conn = pymysql.connect(host='172.28.*.***', port= ...

  8. Linux kernel cfg80211_mgd_wext_giwessid缓冲区溢出漏洞

    受影响系统:Linux kernel <= 5.3.2描述:CVE(CAN) ID: CVE-2019-17133 Linux kernel是开源操作系统Linux所使用的内核. Linux k ...

  9. Caffeine缓存详解

    概要 Caffeine是一个高性能,高命中率,低内存占用,near optimal 的本地缓存,简单来说它是 Guava Cache 的优化加强版,有些文章把 Caffeine 称为"新一代 ...

  10. Java基础——StringBuilder

    /* StringBuilder作用: String 在new一个新的对象以及进行字符串拼接时,会在常量池创建拼接之前的两个字符串对象,拼接完成后会造成内存浪费,时间浪费 StringBuilder ...