数据可视化大屏项目开发中，会遇到ui设计图中文字是渐变色加阴影的效果。

ui设计图效果如下

css实现

我们通过蓝湖生成的css生成出来的样式效果，这和我们的预期差别太大了。

这里我们可以使用伪类来实现我们想要的效果

使用伪元素

通过使用伪元素 ::before 或 ::after 来创建阴影效果，并确保阴影效果可见。

.title {
    position: relative;
    width: 40%;
    height: 100%;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }

  .title span {
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 38px;
    letter-spacing: 3px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: linear-gradient(0deg, #F2FCFF 0%, #47C8FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
    position: relative;
  }

  .title span::before {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: transparent;
    text-shadow: 0px 4px 6px rgba(0,0,0,0.51);
  }
  
    <div class="title">
      <span :title="title">{{ title }}</span>
    </div>

通过伪元素 ::before 被用来创建阴影效果。它的 content 属性设置为与原始文本相同的内容，并且 text-shadow 属性应用于伪元素。这样，阴影效果会出现在原始文本的后面，而不会影响渐变颜色。

最终css效果

第二种方法

使用 filter: drop-shadow(...)： 这种方法可以在不影响文本渐变效果的情况下增加阴影。drop-shadow 函数允许你指定阴影的偏移量、模糊半径和颜色。

.headerTitle {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    position: relative;
    height: 100%;

    p {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 50px;
      color: #FFFFFF;
      letter-spacing: 10px;
      //text-shadow: 3px 5px 2px rgba(0,44,109,0.75);
      background: linear-gradient(0deg, #B5DAFF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(3px 5px 2px rgba(0, 44, 109, 0.75));
    }
  }