数据可视化大屏项目开发中，会遇到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效果