UI设计的时候往往用上渐变色或者字体阴影来美化文字，这种一般只能用图片来代替文字，但有时为了能有更好的复用性，我们今天用纯css来实现。
最终效果如下：用了渐变+文字阴影
text-shadow
先贴上html与css，后面我们在详讲
<div class="title">
<h1 class="gradient">活动大标题</h1>
<span>活动大标题</span>
</div>
.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的值。
第二种方法：
<div class="title">
<h1 class="gradient-text" data-content="活动大标题">活动大标题</h1>
<span>活动大标题</span>
</div>
.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、因为文字阴影与渐变一起使用没有效果，所以我利用层级做了叠加效果。
这是渐变的效果图：
在这里插入图片描述
这是字体阴影效果图：
在这里插入图片描述
两者叠加效果图(上面有样式代码可参考)：
在这里插入图片描述
