css——文字实现渐变色的两种方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了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

效果如下：
css——文字实现渐变色的两种方案,css,前端

（二）通过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>