css 字体渐变样式（设置字体渐变样式+附加实现源码）

问题描述

先看效果图。

解决方案

在对应的css样式里添加如下代码。

我的商品列表在shangpinliebiaobiaotit-view类里面，那么就在shangpinliebiaobiaotit-view设置css渐变样式。

<view class="shangpinliebiaobiaotit-view">商品列表</view>

实现字体渐变样式CSS代码

注意：一定要用background-image，我之前试过background-color或者color都不行，按照下面这个去调整，我这边的需求是从左到右进行渐变，所以这边我用的to right，从左到右，如果你的需求是从右到左就使用to left，有四种渐变方向分别为：to right，to left，to top，to bottom，根据需求去进行调整，#316DFB, #57D4F8这是颜色值，第一个颜色和第二个，第一个颜色值深一些，我这边渐变由深到浅。

background-image: linear-gradient(to right, #316DFB, #57D4F8);
-webkit-background-clip: text;
color: transparent;