字体颜色渐变 特效

UI设计的时候往往用上渐变色或者字体阴影来美化文字，这种一般只能用图片来代替文字，但有时为了能有更好的复用性，我们今天用纯css来实现。
最终效果如下：用了渐变+文字阴影

text-shadow

先贴上html与css，后面我们在详讲

    
活动大标题
    活动大标题

        .title {
            position: absolute;
            top: 1.12rem;
            width: 100%;
            text-align: center;
        }

        .title .gradient-text {
            font-size: 1.04rem;
            background-image: linear-gradient(to bottom, #fffcfa, #ffefde, #ffe1c0, #ffd3a2, #ffc280);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 0.1rem;
            position: absolute;
            z-index: 2;
            left: 0.92rem;
            top: 0;
            text-shadow: 1px 3px 1px rgba(204, 165, 165, 0.43);
        }

        .title span {
            font-size: 1.04rem;
            text-shadow: 1px 3px 1px rgba(204, 165, 165, 0.43);
            color: #fb391f;
            letter-spacing: 0.1rem;
            font-weight: bold;
        }

1、首先是文字的渐变效果

第一种方法：

{
background-image: linear-gradient(to bottom,#fffcfa,#ffefde,#ffe1c0,#ffd3a2,#ffc280);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

说明：上述属性虽然好用但是兼容效果差，只适用于webkit内核的浏览器有效果，该方法还适用于制作镂空，流光效果
(1) background-clip 的意思即是背景裁剪，使用-webkit-background-clip: text后以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。用文本剪辑背景来作为颜色填充文本。
(2) -webkit-text-fill-color设置对象中文字的填充颜色，和color的效果相似。如果同时设置text-fill-color和color两个属性，则text-fill-color会覆盖掉color的值。

第二种方法：

    
活动大标题
    活动大标题

.title .gradient-text {
        font-size: 1.04rem;
        color: #ffc280;
        letter-spacing: 0.1rem;
        position: absolute;
        z-index: 2;
        left: 0.92rem;
        top: 0;
    }

 .title .gradient-text[data-content]::after {
        content: attr(data-content);
        color: #fffcfa;
        -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        text-shadow: 1px 3px 1px rgba(204, 165, 165, 0.43);
    }

2、字体阴影效果

在这里插入图片描述

其中HSL是指(H,S,L)
取值：
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
如下图所示，圈起来的就是hsl取值。

在这里插入图片描述

3、因为文字阴影与渐变一起使用没有效果，所以我利用层级做了叠加效果。
这是渐变的效果图：

在这里插入图片描述

这是字体阴影效果图：

在这里插入图片描述

两者叠加效果图(上面有样式代码可参考)：

在这里插入图片描述