渐变且描边文字

效果：在这里插入图片描述

用 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;}
}