渐变且描边文字

效果：

用 background-image：linear-gradient实现渐变、
text-shadow实现描边

元素同时添加：

    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(143, 180, 253, 1));
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: 3px 3px 0px #0000ff, -3px -3px 0px #0000ff, 3px -3px 0px #0000ff, -3px 3px 0px #0000ff;

会出现以下效果

所以:before和:after重叠在元素之上，实现，
即：使用before元素实现描边，after元素实现渐变

<span class="home-intro">
     前端开发<br />
     Vue
  <span class="blue-text" data-text="前端开发">前端开发</span >React
</span>

最终代码：

.home-intro {
    font-size: 44px;
    color: #FFFFFF;
    letter-spacing: 2.75px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    line-height: 57px;
    font-family: titleFamily;
    transform: translate(-50%, -50%);

    .blue-text {
        letter-spacing: 2.75px;
        text-align: center;
        font-family: titleFamily;
        position: relative;
        color: transparent;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(143, 180, 253, 1));
        -webkit-background-clip: text;
        background-clip: text;
    }

    .blue-text::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: #fff;
        height: 100%;
        text-shadow: 3px 3px 0px #0000ff, -3px -3px 0px #0000ff, 3px -3px 0px #0000ff, -3px 3px 0px #0000ff;
    }

    .blue-text::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: transparent;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(143, 180, 253, 1) 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }
}