UI設(shè)計(jì)的時(shí)候往往用上漸變色或者字體陰影來美化文字，這種一般只能用圖片來代替文字，但有時(shí)為了能有更好的復(fù)用性，我們今天用純css來實(shí)現(xiàn)。
最終效果如下：用了漸變+文字陰影

text-shadow

先貼上html與css，后面我們?cè)谠斨v

<div class="title">
    <h1 class="gradient">活動(dòng)大標(biāo)題</h1>
    <span>活動(dòng)大標(biāo)題</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內(nèi)核的瀏覽器有效果，該方法還適用于制作鏤空，流光效果
(1) background-clip 的意思即是背景裁剪，使用-webkit-background-clip: text后以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字的背景即為區(qū)塊的背景，文字之外的區(qū)域都將被裁剪掉。用文本剪輯背景來作為顏色填充文本。
(2) -webkit-text-fill-color設(shè)置對(duì)象中文字的填充顏色，和color的效果相似。如果同時(shí)設(shè)置text-fill-color和color兩個(gè)屬性，則text-fill-color會(huì)覆蓋掉color的值。

第二種方法：

<div class="title">
    <h1 class="gradient-text" data-content="活動(dòng)大標(biāo)題">活動(dòng)大標(biāo)題</h1>
    <span>活動(dòng)大標(biāo)題</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(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
如下圖所示，圈起來的就是hsl取值。

在這里插入圖片描述

3、因?yàn)槲淖株幱芭c漸變一起使用沒有效果，所以我利用層級(jí)做了疊加效果。
這是漸變的效果圖：

在這里插入圖片描述

這是字體陰影效果圖：

在這里插入圖片描述

兩者疊加效果圖(上面有樣式代碼可參考)：

在這里插入圖片描述