css——文字实现渐变色的两种方案

（一）通过设置color、background-image及background-clip实现文字颜色渐变

<template><span class="title">文字实现渐变色的两种方案</span>
</template><style>
.title {color: transparent;background-image: linear-gradient(180deg, #ffffff 28.65%, #1efff4 100%);background-clip: text;
}
</style>

注意：如果使用的是块级元素，记得加上background-color: transparent

效果如下：
实际效果图

（二）通过svg的linearGradient及text元素实现文字的颜色渐变

<template><!-- 默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野 --><!-- 通过viewBox来修改默认的显示配置，viewBox由4个点组成，viewBox=“x, y, w, h”；其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。而w，h则是定义svg画布的视野区域；默认情况下viewBox=“0,0,width,height” --><!-- 当w<width、h<height的时候，相当于是拉近了视野，视野小了，但实际显示的区域没有发生变化；这就会导致显示的图形变大，显示的区域变小。 --><!-- 当w>width、h>height的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。。 --><svg width="500" height="150" viewBoxs="0 0 500 300" class="svg-box"><defs><!-- 线性渐变可以被定义为水平、垂直或角度渐变 --><!-- x1, x2, y1,y2属性定义渐变的起始位置 --><!-- 当y1和y2相等，x1和x2不同时，创建水平渐变 --><!-- 当x1和x2相等，y1和y2不同时，创建垂直渐变 --><!-- 当y1和y2不同并且x1和x2也不同时，创建角度渐变（Angular gradients） --><linearGradient id="svg-linergradient" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50"><!-- 渐变的颜色范围可以由2个或多个颜色组成。每一种颜色都通过一个<stop>标签来指定。 offset属性用来定义渐变颜色开始和结束的位置。 --><!-- 开始颜色 --><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>从起始位置(x,y)开始展示。但由于在svg中无法事先知道<text>的长度，所以无法仅通过改变(x,y)让<text>的中轴或结束位置位于指定位置。 --><!-- svg提供了一种更简单直接的方法实现这些对齐方式 --><!-- text-anchor属性可以改变(x,y)作为起始坐标的定义。 --><!-- text-anchor="start"时，(x,y)为<text>的起始坐标。 --><!-- text-anchor="middle"时，(x,y)为<text>的中轴坐标。 --><!-- text-anchor="end"时，(x,y)为<text>的结束坐标。 --><text text-anchor="start" class="gradient-text" x="0" y="30%">文字实现渐变色的两种方案</text></svg>
</template><style>
.gradient-text{fill:url(#svg-linergradient);font-size:40px;font-weight:bolder;
}
</style>